Solved

Styling Json with Jquery

Posted on 2013-11-07
9
204 Views
Last Modified: 2013-11-11
I hav Json value that has multiple values separated by a comma, Is there a way to have that rendered in the dom as a selection dropdown input.

      $.getJSON('@Url.Action("my", "Home")', function(result) {
                        var ddl = $('#MyList');
                   ddl.empty();
                   $(result).each(function (i, item) {
                       alert(this.Nome);
                       ddl.append(
                           $('<option/>', {
                               value: this.Id

                           }).html(this.Nome)

                       );
                   });
               });
           });

Open in new window

0
Comment
Question by:sevensnake77
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
  • 4
9 Comments
 
LVL 43

Accepted Solution

by:
Rob earned 500 total points
ID: 39633078
You can just use the split function on your result variable assuming it is a string.  If it is returned as a json object then I'd need to know the object property holding the value you speak of eg result.myval

I've assumed as such below with adapting your code

http://www.w3schools.com/jsref/jsref_split.asp

      $.getJSON('@Url.Action("my", "Home")', function(result) {
                        var ddl = $('#MyList');
                   ddl.empty();
                   res = result.myval.split(",");
                   $(res).each(function (i, item) {
                       alert(this.Nome);
                       ddl.append(
                           $('<option/>', {
                               value: this.Id

                           }).html(this.Nome)

                       );
                   });
               });
           });

Open in new window

0
 
LVL 9

Author Comment

by:sevensnake77
ID: 39638814
Not working. matter a fact the alert is not even working.
0
 
LVL 9

Author Closing Comment

by:sevensnake77
ID: 39638927
this is not really the problem or the solution but it is coming from the controller
0
Why You Need a DevOps Toolchain

IT needs to deliver services with more agility and velocity. IT must roll out application features and innovations faster to keep up with customer demands, which is where a DevOps toolchain steps in. View the infographic to see why you need a DevOps toolchain.

 
LVL 43

Expert Comment

by:Rob
ID: 39639728
If that's the case there's no point closing the question.  

It could be a simple matter of what type of object is being returned to you in the json call.  I don't have access to that and would need your feedback.

Can you tell me what the structure of the "result" object is?  using "console.log(result) or console.dir(result)" will output the contents of the variable to the console (press F12 to get developer tools up.
0
 
LVL 9

Author Comment

by:sevensnake77
ID: 39640331
Name
	[Object { Selected=false, Text="12345", Value=null}
	
0
	Object { Selected=false, Text="56789", Value=null}
	
1
	Object { Selected=false, Text="987665", Value=null}
	
2
	Object { Selected=false, Text="345454", Value=null}
	
3
	Object { Selected=false, Text="232323", Value=null}

Open in new window

0
 
LVL 43

Expert Comment

by:Rob
ID: 39640367
Ok, so it's returning an array of records with the following properties: Selected, Text and Value.  However there isn't a value "separated by commas".  What data are you expecting?
0
 
LVL 43

Expert Comment

by:Rob
ID: 39640426
http://jsbin.com/ugUmANe/1/edit

$(myjson).each(function (i, item) {
    alert(this.Text);
    ddl.append(
      $('<option/>', {
        value: this.Id
        
      }).html(this.Text)
      
    );
  });

Open in new window

0
 
LVL 9

Author Comment

by:sevensnake77
ID: 39640504
it worked. Yes thanks. I will correct the points for the correct answer
0
 
LVL 43

Expert Comment

by:Rob
ID: 39640572
Thanks, appreciate it
0

Featured Post

Instantly Create Instructional Tutorials

Contextual Guidance at the moment of need helps your employees adopt to new software or processes instantly. Boost knowledge retention and employee engagement step-by-step with one easy solution.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Summary Displaying images in RichTextBox is a common requirement with limited solutions available. Pasting through clipboard or embedding into RTF content only support static images.  This article describes how to insert Windows control objects int…
This document covers how to connect to SQL Server and browse its contents.  It is meant for those new to Visual Studio and/or working with Microsoft SQL Server.  It is not a guide to building SQL Server database connections in your code.  This is mo…
A short tutorial showing how to set up an email signature in Outlook on the Web (previously known as OWA). For free email signatures designs, visit https://www.mail-signatures.com/articles/signature-templates/?sts=6651 If you want to manage em…
Finding and deleting duplicate (picture) files can be a time consuming task. My wife and I, our three kids and their families all share one dilemma: Managing our pictures. Between desktops, laptops, phones, tablets, and cameras; over the last decade…

738 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question