Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 244
  • Last Modified:

Json data will not display in view

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
Seven price
Asked:
Seven price
  • 8
  • 7
1 Solution
 
Chris StanyonCommented:
Can we see you JSON data?
0
 
Chris StanyonCommented:
I've just ran your code with some test JSON and it works fine.
0
 
Seven priceFull StackAuthor Commented:
Json works that is correct but the view i cannot display in the select.
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
Chris StanyonCommented:
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
 
Seven priceFull StackAuthor Commented:
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
 
Chris StanyonCommented:
Sorry - I don't know ASP.

I thought you said the JSON works. Can I see the JSON output and the generated HTML
0
 
Seven priceFull StackAuthor Commented:
["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
 
Seven priceFull StackAuthor Commented:
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
 
Chris StanyonCommented:
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
 
Seven priceFull StackAuthor Commented:
The code is working with Json but the Json javascript is not rendering it.
0
 
Seven priceFull StackAuthor Commented:
tks
0
 
Chris StanyonCommented:
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
 
Seven priceFull StackAuthor Commented:
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
 
Chris StanyonCommented:
Sorry. As I said, I don't do ASP..
0
 
Seven priceFull StackAuthor Commented:
thanks
0

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

  • 8
  • 7
Tackle projects and never again get stuck behind a technical roadblock.
Join Now