Question

我有一个包含4个项目的简单JSON。我想在html中将项目2,3,4导入int *datahalf = data+512;。用我的代码导入所有项目。我是JavaScript的新手。

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

item.json：

li

HTML：

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

脚本：

<div>
    <ul>

    </ul>
</div>

Answer 1

使用您的代码示例，您可以在（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>");
       }
   });
});

希望有所帮助

Answer 2

在您的情况下，我建议使用Array.slice：

slice（）方法将数组的一部分的浅表副本返回到从头到尾选择的新数组对象（不包括结尾）。原始数组不会被修改。

＆＃13;

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>");
  });
//});

＆＃13;

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

＆＃13;

Answer 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>");
            }

        });
   });
});

Answer 4

使用数组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>");
   }
});

Answer 5

如果您只想删除第一个，可以使用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

如何从JSON检索数据到列表？

5 个答案: