Solved

Json data will not display in view

Posted on 2013-11-07
15
238 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 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
Netscaler Common Configuration How To guides

If you use NetScaler you will want to see these guides. The NetScaler How To Guides show administrators how to get NetScaler up and configured by providing instructions for common scenarios and some not so common ones.

 
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

PRTG Network Monitor: Intuitive Network Monitoring

Network Monitoring is essential to ensure that computer systems and network devices are running. Use PRTG to monitor LANs, servers, websites, applications and devices, bandwidth, virtual environments, remote systems, IoT, and many more. PRTG is easy to set up & use.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Problem to refer to value 8 50
mail.To.Add 5 26
Need to start a web service from Visual Studio 2015 Pro 2 24
Example works but why do I need to click twice on button 4 43
Problem Hi all,    While many today have fast Internet connection, there are many still who do not, or are connecting through devices with a slower connect, so light web pages and fast load times are still popular.    If your ASP.NET page …
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
Two types of users will appreciate AOMEI Backupper Pro: 1 - Those with PCIe drives (and haven't found cloning software that works on them). 2 - Those who want a fast clone of their boot drive (no re-boots needed) and it can clone your drive wh…

810 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