Solved

Json data will not display in view

Posted on 2013-11-07
15
240 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
[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:sevensnake77
ID: 39631566
Json works that is correct but the view i cannot display in the select.
0
SharePoint Admin?

Enable Your Employees To Focus On The Core With Intuitive Onscreen Guidance That is With You At The Moment of Need.

 
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:sevensnake77
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:sevensnake77
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:sevensnake77
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 500 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:sevensnake77
ID: 39631836
The code is working with Json but the Json javascript is not rendering it.
0
 
LVL 9

Author Closing Comment

by:sevensnake77
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:sevensnake77
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:sevensnake77
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

This article discusses the ASP.NET AJAX ModalPopupExtender control. In this article we will show how to use the ModalPopupExtender control, how to display/show/call the ASP.NET AJAX ModalPopupExtender control from javascript, how to show/display/cal…
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
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…

733 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