如何从 API 解析 JSON

Question

好吧，我已经创建了一个 API，Postman 中 http://localhost/lsapp4/public/api/articles 的输出如下：

{
"data": [
    {
        "id": 1,
        "title": "Demo Article-1",
        "body": "Happy Holidays1"
    },
    {
        "id": 2,
        "title": "Demo Article-2",
        "body": "Happy Holidays2"
    },
    {
        "id": 3,
        "title": "Demo Article-3",
        "body": "Happy Holidays3"
    }
],
"links": {
    "first": "http://lsapp4.test/api/articles?page=1",
    "last": "http://lsapp4.test/api/articles?page=2",
    "prev": null,
    "next": "http://lsapp4.test/api/articles?page=2"
},
"meta": {
    "current_page": 1,
    "from": 1,
    "last_page": 2,
    "path": "http://lsapp4.test/api/articles",
    "per_page": 3,
    "to": 3,
    "total": 4
}

}

如何迭代地解析标题和正文？我试着这样做：

$.getJSON("http://localhost/lsapp4/public/api/articles",function(regen){
    var i=0;
    $.each(regen,function(index,item)
    {
        alert(item[i].title);
        i=i+1;
    });
});

但它不起作用。

Answer 1

您的 API 正在返回一个对象，该对象在名为 data 的字段中包含一个数组。您需要对此数据字段执行$.each。您也不需要在对item.title 的调用中引用i。请参阅下面的示例代码：

var regen = {
  "data": [{
      "id": 1,
      "title": "Demo Article-1",
      "body": "Happy Holidays1"
    },
    {
      "id": 2,
      "title": "Demo Article-2",
      "body": "Happy Holidays2"
    },
    {
      "id": 3,
      "title": "Demo Article-3",
      "body": "Happy Holidays3"
    }
  ],
  "links": {
    "first": "http://lsapp4.test/api/articles?page=1",
    "last": "http://lsapp4.test/api/articles?page=2",
    "prev": null,
    "next": "http://lsapp4.test/api/articles?page=2"
  },
  "meta": {
    "current_page": 1,
    "from": 1,
    "last_page": 2,
    "path": "http://lsapp4.test/api/articles",
    "per_page": 3,
    "to": 3,
    "total": 4
  }
}

// Omitted $.getJSON for testing and demo purposes.
// Corrected code is also below. 
$.each(regen.data, function(index, item) {
  alert(item.title);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

更正$.getJSON 电话：

$.getJSON("http://localhost/lsapp4/public/api/articles",function(regen){
    $.each(regen.data, function(index,item)
    {
        alert(item.title);
    });
});