Question

我想在列表中循环html json文件内容。

我的目标被放入测试字段的列表html内容

<ul>
<li>text 1 text 1</li>
<li>text 2 text 2</li>
<li>text 3 text 3</li>
<li>text 4 text 4</li>
</ul>

这是我的json文件（result.js）

{
    "news": [
        {
            "title": "text 1 text 1",
            "id": "1111"
        },
        {
            "title": "text 2 text 2",
            "id": "2222"
        },
        {
            "title": "text 3 text 3",
            "id": "3333"
        },
        {
            "title": "text 4 text 4",
            "id": "4444"
        }
    ]

}

这是我的函数getjson

的代码htnl

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){



$.ajax({     
    url: 'result.js',     
    dataType: 'json',     
    async: false,
    success: processJSON() 
}); 


function processJSON() {

    $.getJSON("result.js",function(result){

      $.each(result, function(i,val){
        HOW CAN CYCLE HERE title field?????????
      });
    });
}


});
</script>
</head>
<body>


<div id="box"></div>

</body>
</html>

Answer 1

第二个参数是当前值，因此您可以像这样访问它：

$.getJSON("result.js",function(result)
{
   $.each(result.news, function(i,val)
   {
      alert(val.title);
   });
});

http://api.jquery.com/jQuery.each/

正如Rocket在评论中指出的那样，你不需要$ .ajax和$ .getJSON。您的整个javascript代码段可能会变成以下内容：

$(document).ready(function() 
{
    $.getJSON("result.js",function(result)
    {
       $.each(result.news, function(i,val)
       {
          alert(val.title);
       });
    });
});

Answer 2

这是未经测试的，但希望你能得到这个想法。关键点是：

您的版本调用了两次ajax端点
您不需要将该函数和所有内容都包含在document.ready中，只需要初始的ajax调用
您需要将生成的json传递给成功函数
您需要遍历新闻属性

您可以使用object.property或object ['property']

访问属性

function processJSON(data) {
      var list = $('<ul />');
      $.each(data.news, function(i,val){
        list.append($('<li />').append(val.title));
      });
      $('#box').append(list);
}

$(document).ready(function(){
$.ajax({     
    url: 'result.js',     
    dataType: 'json',     
    async: false,
    success: processJSON 
}); 
});

</script>
</head>
<body>


<div id="box"></div>

</body>
</html>

Answer 3

首先，您为什么要求result.js两次？您有一个$.ajax来电，其回调功能为$.getJSON，没有理由两次获取数据。

其次，你需要循环遍历result.news，以获得每个项目。

第三，当使用函数作为变量时，丢失()。这将调用函数并使用其返回值，而不是函数本身。

$.ajax({
    url: 'result.js',
    dataType: 'json',
    success: processJSON
});

function processJSON(result){
    $.each(result.news, function(i, val){
        console.log(val.title); // Each news title
    });
}

或使用$ .getJSON

$.getJSON("result.js", processJSON);

function processJSON(result){
    $.each(result.news, function(i, val){
        console.log(val.title); // Each news title
    });
}

P.S。除非确实需要，否则请勿使用async: false。它将锁定浏览器，直到请求完成。

为什么getjson只返回1行

3 个答案: