Using JSON To Populate UL With jQuery

Question

This is my JSON data

[
    {"CountyId":2,"Name":"Snohomish","StateId":1,"State":null,"Plans":null},    
    {"CountyId":1,"Name":"Whatcom","StateId":1,"State":null,"Plans":null}
]

I'm attempting to populate a UL on my web page with this data.

function loadSavedCounties() {
    $.post("/Plans/GetPlanCounties/",
        { planId: $("#PlanId").val() },
        function (data) {
            populateSavedCounties($("#SavedCounties"), data);
        }
    );
}
function populateSavedCounties(select, data) {
    select.html('');
    var items = [];
    $.each(data, function (id, option) {
        items.push('<li>' + option.Name + '</li>');
    });  
    select.append(items.join(''));
}

I know that i'm successfully calling the loadSavedQueries() because my UL is being cleared out with the select.html('') call. But no items are being put back into the UL.

Update...

After the obvious fixes and changes not working, I discovered an issue within the controller that wasn't throwing an error, but was basically returning empty JSON objects. Once I caught this, the data started flowing down and the changes suggested did the trick.

In `populateSavedCounties`, put this as the first line: `console.log(typeof data)` and let us know what it is. — Ian, Oct 11 '12 at 20:35

score 13 · Accepted Answer · edited Feb 12 '15 at 15:30

13

You can set the UL's html at the end - no need to clear it out first:

function populateSavedCounties(select, data) {
    var items = [];
    $.each(data, function (id, option) {
        items.push('<li>' + option.Name + '</li>');
    });  
    select.html(items.join(''));
}

edited Feb 12 '15 at 15:30

JamesFrost

729
11
20

answered Oct 11 '12 at 20:31

Gabriel Florit

2,886
1
22
36

same result, an empty
– RSolberg Oct 11 '12 at 20:32
I see that... I'm now starting to wonder if I'm simply not getting the data for some reason... – RSolberg Oct 11 '12 at 20:39
Your change did work. I didn't post the full functionality of what I'm trying to do and actually had an error upstream preventing the JSON request from completing successfully. Once I fixed that and modified the final line as you showed, that did the trick. Thanks! – RSolberg Oct 11 '12 at 20:44

SpYk3HH · Answer 2 · 2012-10-11T20:42:01.017

0

This is very easy, I'll write up code first, then try to go back and explain.

Script

// You obviously know how to use .post
$.post("/Plans/GetPlanCounties/", { planId: $("#PlanId").val() }, function(data) {
    // out of simplicity, i did not create a seperate function, however you seem to know how to move functions around
    // below of course i simply assign a variable for reuse to the element you want
    var $this = $("#SavedCounties").empty();
    // instead of .each, I went on the premise that your data is returned exactly as stated above,
    // in which case, a simple old school for statement is easiest
    for (x in data) {
        // this is real simple, the first part creates a jQuery object of a List Element
        // the text part adds the text too it (aka, html you were wanting)
        // the last part appends the Li to the END of the UL
        $("<li />").text(data[x].Name).appendTo($this);
    };
});

Final result without comments, is very short and sweet

$.post("/Plans/GetPlanCounties/", { planId: $("#PlanId").val() }, function(data) {
    var $this = $("#SavedCounties").empty();
    for (x in data) {
        $("<li />").text(data[x].Name).appendTo($this);
    };
});

edited Oct 11 '12 at 20:42

answered Oct 11 '12 at 20:36

SpYk3HH

22,272
11
70
81

1

You probably don't wanna use a "for... in" loop for arrays. If any libraries you have loaded add anything to the Array prototype, that loop will also iterate over that(and not just the items in the array). – rossisdead Oct 11 '12 at 20:41
.each is really a fancy for function, that's a silly statement, if you have libraries adding data to your post-back, then u need to know how to evaluate for those additions, or else, check your post back. Since post back is usually an echo of some sort, it's really not that hard to ensure the integrity of your data. I've been doing this for years, and never seen a reason not to use a simple for statement on json data. – SpYk3HH Oct 11 '12 at 20:47
@SpYk3HH: I'm just pointing out that it's better to use a "for i" loop on arrays instead of a "for... in" loop, especially in situations where you might not know(or can't know) whether Array.prototype has been modified by another source. http://stackoverflow.com/a/500531/152168 – rossisdead Oct 11 '12 at 20:59
Personal opinion, if you have a library that modifies your basic javascript methods, dump it! Just my personal opinion, but to make such modification in a "library" is brash and ignorant. besides, that still doesn't remove the coder'sability to know how to account for such a situation. I personally just find for i loops to be archaic and to open to liable malfunction. its personal preference, but to each his own. – SpYk3HH Oct 11 '12 at 21:08
not to mention for i's can be very long and drawn out when a for in is simple and easy and short! i like short – SpYk3HH Oct 11 '12 at 21:09

Using JSON To Populate UL With jQuery

Update...

2 Answers2