Question

我的代码如下：

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

我想使用json数据

将一些项目附加到列表中

 $.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)});

但没有任何反应，我的错误在哪里？

Answer 1

您的方法

只要data.json中的JSON结构采用以下格式，您的代码就可以正常工作 -

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

建议的方法

如果你的JSON在这个结构中 -

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

使其工作的JavaScript将是 -

$(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)
    });
});

这将在您的DOM中生成以下HTML -

<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

使用测试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)});

在for循环中的

我打印始终创建的属性，因为只有一个查询元素

我所处理的json部分是以下

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

在你的情况下，问题是json的url进行重定向。

在this中测试（然后点击“提出请求”）网站并查看此消息错误，解释您的问题

我们无法成功提出请求   http://myjtest.altervista.org/tagcloud/data.json

这可能是因为跨站点HTTP请求和您的服务器   没有适当的Access-Control-Allow-Origin和   Access-Control-Allow-Methods标题。

Answer 3

看起来您的json文件无效也许你使用单引号而不是双引号或其他东西。检查您的data.json文件。
根据您的js代码，您的文件data.json应该是这样的：

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

Jquery：如何在带有json数据的现有<ul>中添加<li> </ul> </li>

3 个答案: