?
Solved

Json data will not display in view

Posted on 2013-11-07
15
Medium Priority
?
242 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:Seven price
[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
  • 8
  • 7
15 Comments
 
LVL 43

Expert Comment

by:Chris Stanyon
ID: 39631477
Can we see you JSON data?
0
 
LVL 43

Expert Comment

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

Author Comment

by:Seven price
ID: 39631566
Json works that is correct but the view i cannot display in the select.
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 43

Expert Comment

by:Chris Stanyon
ID: 39631601
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:Seven price
ID: 39631626
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 43

Expert Comment

by:Chris Stanyon
ID: 39631653
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:Seven price
ID: 39631682
["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
 
LVL 9

Author Comment

by:Seven price
ID: 39631693
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 43

Accepted Solution

by:
Chris Stanyon earned 1500 total points
ID: 39631706
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:Seven price
ID: 39631836
The code is working with Json but the Json javascript is not rendering it.
0
 
LVL 9

Author Closing Comment

by:Seven price
ID: 39631924
tks
0
 
LVL 43

Expert Comment

by:Chris Stanyon
ID: 39632073
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:Seven price
ID: 39632265
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 43

Expert Comment

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

Author Comment

by:Seven price
ID: 39632318
thanks
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

IntroductionWhile developing web applications, a single page might contain many regions and each region might contain many number of controls with the capability to perform  postback. Many times you might need to perform some action on an ASP.NET po…
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…
This is my first video review of Microsoft Bookings, I will be doing a part two with a bit more information, but wanted to get this out to you folks.
How to fix incompatible JVM issue while installing Eclipse While installing Eclipse in windows, got one error like above and unable to proceed with the installation. This video describes how to successfully install Eclipse. How to solve incompa…
Suggested Courses
Course of the Month10 days, 15 hours left to enroll

770 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