如何将 JSON 中的数据检索到列表中？答案

【问题标题】：how to retrieve data from JSON into list?如何将 JSON 中的数据检索到列表中？
【发布时间】：2017-08-26 01:04:52
【问题描述】：

我有一个包含 4 个项目的简单 JSON。我只想将项目 2、3、4 导入 html 中的li。使用我的代码导入所有项目。我是 JavaScript 新手。

你能给我一些可能的解决方法吗？

item.json：

[
  {
    "content": "nopic",
  },
  {
    "content": "pic1.jpg",
  },
  {
    "content": "pic2.jpg",
  },
  {
    "content": "pic3.jpg",
  }
]

HTML：

<div>
    <ul>

    </ul>
</div>

脚本：

<script>
$(document).ready( function(){

        $.getJSON('item.json', function(data) {
            $.each(data, function (i, f) {
                $("ul").append("<li><img src=" + f.content + "/></li>");
            });
  });
});
</script>

【问题讨论】：

你的代码有什么问题？请阅读How to Ask。
你的代码看起来不错..
这段代码会将所有项目导入ul，但我不想先导入。
在追加到 ul 之前要如何编辑数据？

标签： javascript jquery arrays json list

【解决方案1】：

如果您只想删除第一个，您可以使用Array.slice() 函数，如下所示：

$(document).ready( function(){
  $.getJSON('./item.json', function(data) {
    var dataWithoutFirst = data.slice(1);
    $.each(dataWithoutFirst, function (i, f) {
      $("ul").append("<li><img src=" + f.content + "/></li>");
    });
  });
});

如果你想删除所有nopic，你可以这样做：

$(document).ready( function(){
  $.getJSON('./item.json', function(data) {
    $.each(data, function (i, f) {
      if(f.content != "nopic"){
        $("ul").append("<li><img src=" + f.content + "/></li>");
      }
    });
  });
});

在这里执行：https://plnkr.co/edit/WKYRZb0933rZBzKRyIzE

【讨论】：

【解决方案2】：

使用数组shift()或if声明

<script>
    $(document).ready( function(){

    $.getJSON('item.json', function(data) {
        data.shift();
        $.each(data, function (i, f) {
            $("ul").append("<li><img src=" + f.content + "/></li>");
        });
     });
   });
</script>

if声明

$.each(data, function (i, f) {
   if(f.content != "nopic"){
      $("ul").append("<li><img src=" + f.content + "/></li>");
   }
});

【讨论】：

【解决方案3】：

您的代码看起来不错。如果您正在寻找跳过第一条记录并仅显示 2,3 和 4 的方法，请进行以下更改：

$.getJSON('item.json', function(data) {
        $.each(data, function (i, f) {
            if(i>0){
                $("ul").append("<li><img src=" + f.content + "/></li>");
            }

        });
   });
});

【讨论】：

【解决方案4】：

在你的情况下，我建议使用Array.slice:

slice() 方法将数组的一部分的浅拷贝返回到从开始到结束（不包括结束）选择的新数组对象中。原数组不会被修改。

var data = [
  {
      "content": "nopic",
  },
  {
      "content": "pic1.jpg",
  },
  {
      "content": "pic2.jpg",
  },
  {
      "content": "pic3.jpg",
  }
];
//$.getJSON('item.json', function(data) {
  $.each(data.slice(1), function (i, f) {
      $("ul").append("<li><img src=" + f.content + "/>" + f.content + "</li>");
  });
//});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div>
  <ul>

  </ul>
</div>

【讨论】：

【解决方案5】：

使用您的代码示例，您可以在 (ES6) 上执行此操作

let arr = [
  {
    "content": "nopic",
  },
  {
    "content": "pic1.jpg",
  },
  {
    "content": "pic2.jpg",
  },
  {
    "content": "pic3.jpg",
  }
];

arr.map((item,i) => {
   if(item.content != "nopic"){
    return (
      "<li><img src='"+item.content+"' /></li>"
    );
   }
});

on ES5

$.getJSON('item.json', function(data) {
   $.each(data, function (i, f) {
       if(f.content != "nopic"){
          $("ul").append("<li><img src=" + f.content + "/></li>");
       }
   });
});

希望对你有帮助

【讨论】：