jQuery的：如何添加 <li> 在现有的 <ul> 与json数据

Question

I have code that looks like this:

<div id="tags">
  <ul>
  </ul>
</div>

and I'd like to append some items to the list using json data

 $.getJSON("data.json", function (data) {
            var html = '';
            var len = data.tags.length;
            for (var i = 0; i < len; i++) {
                html += '<li><a href="#">' + data.tags[i].tag + '</a></li>';
            }

            $("#tags ul").append(html);


        })
        .done(function () {
            console.log("second success");
           })
       .fail(function(err){console.log(err)});

but nothing happens , where is my mistake?

Answer 1

Your Approach

Your code will work fine as long as the JSON structure in your data.json is in the following format -

{
"tags": [
    {
        "tag": "Tag1"
    },
    {
        "tag": "Tag2"
    },
    {
        "tag": "Tag3"
    },
    {
        "tag": "Tag4"
    }
]
}

Suggested Approach

If your JSON is in this structure -

{
"tags": [
    "Tag1",
    "Tag2",
    "Tag3",
    "Tag4"
]
}

The javascript to make it work would be -

$(document).ready(function(){
    $.getJSON( "data.json", function( data ) {
        var items = '';
        $.each( data.tags, function( key, val ) {
            items += '<li id="' + key + '"><a href="#">' + val + '</a></li>';
        });
        $("#tags ul").append(items);
    }).done(function () {
        console.log("Success");
    }).fail(function(err){
        console.log(err)
    });
});

This will generate the following HTML in your DOM -

<div id="tags">
    <ul>
        <li id="0"><a href="#">Tag1</a></li>
        <li id="1"><a href="#">Tag2</a></li>
        <li id="2"><a href="#">Tag3</a></li>
        <li id="3"><a href="#">Tag4</a></li>
    </ul>
</div>

Answer 2

working fiddle with test json

http://jsfiddle.net/BWM2E/1/

$.getJSON("http://query.yahooapis.com/v1/public/yql?q=select%20%2a%20from%20yahoo.finance.quotes%20WHERE%20symbol%3D%27WRC%27&format=json&diagnostics=true&env=store://datatables.org/alltableswithkeys&callback", function (data) {

    var html = '';
            var len = data.query.count;

    for (var i = 0; i < len; i++) {
                html += '<li><a href="#">' + data.query.created + '</a></li>';
            }

            $("#tags ul").append(html);


        })


        .done(function () {
            console.log("second success");
           })
       .fail(function(err){console.log(err)});

in for loop I print always created property because there is only one query element

the part of the json that I have treated is the following

{"query":{"count":1,"created":"2014-05-26T22:23:03Z"}}

in your case the problem is the url of json that make a redirect.

test it in this (then click on "make a request") site and see this message error that explain you the problem

We weren't able to successfully make a request to http://myjtest.altervista.org/tagcloud/data.json .

This is likely because of a Cross-site HTTP request and your server not having the appropriate Access-Control-Allow-Origin and Access-Control-Allow-Methods headers.

Answer 3

Looks like your json file is invalid.
Maybe you use single quotes instead of double quotes or something else. Check your data.json file.
According to your js code, your file data.json should be like this:

{
    "tags":[
        {"tag":"name1"},
        {"tag":"name2"},
        {"tag":"name3"}
    ]
}