如何获取JSON并以HTML中的无序列表显示它？

Question

I have JSON which looks like:

{
    "fID": "00202020243123",
    "name": "John Doe",
    "List": ["Father", "Brother", "Cousin"]
}

I'm rendering this JSON element from my model, and inside of html, I can simply see the contents of the JSON. However, when I try to do it in a script, it does nothing.

What I'm trying to do is to take the List attribute and show it in unordered list in HTML.

Here is what i tried so far:

<script>
    $("input[name=loadmyJson]").click(function() {//on button click
        var items = [];
        var myJ = ${json}; //Json element i created in my controller
        var myVar = myJ.parseJSON();
        $.each(data, function(myVar) {
        items.push('<li>' + myVar.List + '</li>');
        });
        $('#myList').append( items.join('') );//myList is my unordered list's id.
    )};
</script>

EDIT: Do i need to add something for parseJSON() func?

Answer 1

I would seriously look into a templating engine like json2html (which specializes in converting json to html) for jquery. Makes life much easier than trying to write your own methods to build html from a source json object.

Note that I changed the List from an array of strings to objects instead (makes it easier to access)

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="http://json2html.com/js/jquery.json2html-2.3-min.js"></script>

<div id='list'></div>

<script>
var json =
{
    "fID": "00202020243123",
    "name": "John Doe",
    "List": [{label:"Father"}, {label:"Brother"},{label:"Cousin"}]
};
var transform = {tag:'span',html:'.label'};

$('#list').json2html(json.List, transform);
</script>

Answer 2

what about:

var myVar = myJ.parseJSON();
$.each(myVar.List, function(key, value) {
        items.push('<li>' + value + '</li>');
    });
    $('#myList').append( items.join('') );//myList is my unordered list's id.
)};

??

As descriped In my comment jQuery.each has the arguments key and value . the variable this is equal to the value ( arguments[1] ).

Same as jQuery("selector").each has the arguments key and element where the variable this is equal to the element ( arguments[1] ).

OKAY:

var myVar = myJ.parseJSON();

also has to be replaced with:

var myVar = jQuery.parseJSON(myJ);

sorry for not seeing it :)

Answer 3

You want to loop through the List array that's on your object.

var myVar = myJ.parseJSON();
$.each(myVar.List, function(index, el) {
    items.push('<li>' + el + '</li>');
});

Answer 4

You can just add it straight away, something like:

var parent = $("#myList");
$.each(myJ.parseJSON().List, function() {
    $("<li></li>").html(this).appendTo(parent);
});

Answer 5

Write less code

Here's some HTML

<pre></pre>

Then this bit of javascript

$('pre').text( JSON.stringify(mJ, null, "\t") );

It will render your JSON just like this

{
    "fID": "00202020243123",
    "name": "John Doe",
    "List": [
        "Father",
        "Brother",
        "Cousin"
    ]
}

Finally, you can use something like jQuery Snippet to make it look pretty

$('pre').snippet('javascript');