Solved

Json data will not display in view

Posted on 2013-11-07
15
235 Views
Last Modified: 2013-11-07
I see the Json data in firebug but I cannot get it to load on the front end within my select.

    <select id="MyList"></select>
$(document).ready(function () {
        $.getJSON("@Url.Action("mystore", "Home")", function (data) {
            $("#MyList").addItems(data);
        });
    });

    $.fn.addItems = function (data) {
        return this.each(function () {
            var list = this;
            $.each(data, function (index, itemData) {
                var option = new Option(itemData.Text, itemData.Value);
                list.add(option);
            });
        });
    };

Open in new window

0
Comment
Question by:sevensnake77
  • 8
  • 7
15 Comments
 
LVL 42

Expert Comment

by:Chris Stanyon
Comment Utility
Can we see you JSON data?
0
 
LVL 42

Expert Comment

by:Chris Stanyon
Comment Utility
I've just ran your code with some test JSON and it works fine.
0
 
LVL 9

Author Comment

by:sevensnake77
Comment Utility
Json works that is correct but the view i cannot display in the select.
0
 
LVL 42

Expert Comment

by:Chris Stanyon
Comment Utility
Unfortunately, in isolation, your code means nothing. As I said, I ran your code and it worked. I don't have your JSON so I can't test against that. I also haven't seen your HTML. I'm guessing you do have this in your HTML:

<select id="MyList"></select>

Open in new window

Maybe post to a live link we can have a look at, or at least, post your (generated) HTML and your JSON data.
0
 
LVL 9

Author Comment

by:sevensnake77
Comment Utility
controller
this works but when I make it dynamic I cannot get it to break after the first string. It puts it in as one long string. See controller dynamic at bottom.
   public JsonResult GetSite()
{
    var sites = new[]
    {
        new {chain = "site 1" },
        new {chain = "site 3" },
        new {chain = "site 3" },
    };
    return Json(sites, JsonRequestBehavior.AllowGet);
}

Open in new window


Json
  $(function() {
                    $.getJSON('@Url.Action("mystore", "Home")', function(result) {
                        var ddl = $('#MyList');
                   ddl.empty();
                   $(result).each(function() {
                       ddl.append(
                           $('<option/>', {
                               value: this.Id
                           }).html(this.chain)
                       );
                   });
               });
           });
    });

Open in new window



But I need it to be dynamic and this one creates one long string instead of using new
 
public JsonResult mystore()
        {
            List<string> ChainResultList = ListOfChain();
          //  chain = new SelectList(ChainResultList);
            var sites = new[]
    {
            new {chain = ChainResultList }
            
             
    };


            return Json(sites, JsonRequestBehavior.AllowGet);
        }

Open in new window

0
 
LVL 42

Expert Comment

by:Chris Stanyon
Comment Utility
Sorry - I don't know ASP.

I thought you said the JSON works. Can I see the JSON output and the generated HTML
0
 
LVL 9

Author Comment

by:sevensnake77
Comment Utility
["1234", "32323", "234233",]
The Json does work but I cannot get it to display on the view. the data comes up blank.
for example its blank but in the dropdown there are 3 blank rows.
0
Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

 
LVL 9

Author Comment

by:sevensnake77
Comment Utility
Ok I see the string but all the data is combined

var sites = new[]
    {

        new {chain = ResultList },
       
    };
so it appears like so instead of ["1234", "32323", "234233",] I get
["123432323234233]  in the drop down.
0
 
LVL 42

Accepted Solution

by:
Chris Stanyon earned 500 total points
Comment Utility
Right. Your code is expecting your JSON to contain arrays, each consisting of a Text key and a Value key. Your JSON doesn't. For your code to work, your JSON should look like this:

[{"Text":"text1","Value":"value1"},{"Text":"text2","Value":"value2"},{"Text":"text3","Value":"value3"}]

To get your code working with your JSON, you need to change your code to this:

var option = new Option(itemData, itemData);

Open in new window

However, that stray comma after the last value means that it's not valid JSON so it will fail anyway. Remove the comma!
0
 
LVL 9

Author Comment

by:sevensnake77
Comment Utility
The code is working with Json but the Json javascript is not rendering it.
0
 
LVL 9

Author Closing Comment

by:sevensnake77
Comment Utility
tks
0
 
LVL 42

Expert Comment

by:Chris Stanyon
Comment Utility
You 'JSON Javascript' is not rendering it because you're not providing it in the correct format. Re-read my previous comment and you'll understand why!
0
 
LVL 9

Author Comment

by:sevensnake77
Comment Utility
thats true but  having a hard time converting to array in the controller. you think this is possible in the controller with dynamic data/
0
 
LVL 42

Expert Comment

by:Chris Stanyon
Comment Utility
Sorry. As I said, I don't do ASP..
0
 
LVL 9

Author Comment

by:sevensnake77
Comment Utility
thanks
0

Featured Post

Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

Join & Write a Comment

Sometimes in DotNetNuke module development you want to swap controls within the same module definition.  In doing this DNN (somewhat annoyingly) swaps the Skin and Container definitions to the default admin selections.  To get around this you need t…
Introduction This article shows how to use the open source plupload control to upload multiple images. The images are resized on the client side before uploading and the upload is done in chunks. Background I had to provide a way for user…
Sending a Secure fax is easy with eFax Corporate (http://www.enterprise.efax.com). First, Just open a new email message.  In the To field, type your recipient's fax number @efaxsend.com. You can even send a secure international fax — just include t…
Polish reports in Access so they look terrific. Take yourself to another level. Equations, Back Color, Alternate Back Color. Write easy VBA Code. Tighten space to use less pages. Launch report from a menu, considering criteria only when it is filled…

771 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

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now