通过JavaScript从REST API获取JSON数据显示部分数据

问题描述 投票:0回答:1

我正在尝试通过 JavaScript 从 alchemynewsapi 获取数据。我收到的样本数据是:

{
"status": "OK",
"totalTransactions": "68",
"result": {
    "docs": [
        {
            "id": "ODU1MjM4MjM0NnwxNDQ5MDk0Mzgy",
            "source": {
                "enriched": {
                    "url": {
                        "title": "North Scituate observatory hosts workshop on telescopes",
                        "url": "http://www.providencejournal.com/article/20151201/entertainmentlife/151209982"
                    }
                }
            },
        {
            "id": "ODEzMzYxODU5MHwxNDQ5MDYyMjM0",
            "source": {
                "enriched": {
                    "url": {
                        "title": "Mob Programming Workshop",
                        "url": "https://www.eventbrite.com/e/mob-programming-workshop-tickets-19710798529"
                    }
                }
            },
            "timestamp": 1449062234
        }
    ],
    "next": "MzY5OTc0NjQzNzI2MjMxNzM2N3xPREU1TnpnNU9EWXhPSHd4TkRRNU1EWTNPVFE1",
    "status": "OK"
   }
}

我正在尝试以下方法来检索数据的标题和 URL 字段:

var jsonData=getJSON('http://urlofapi').then(function(data) {
for(var i=0; i<data.result.docs.length; i++)
 {
     result.innerText = data.result.docs[i].source.enriched.url.title; //for retrieving the title field
 }
}, function(status) { //error detection....
alert('Something went wrong.');
});

getJSON
是我创建的一个函数:

var getJSON = function(url) {
return new Promise(function(resolve, reject) {
var xhr = new XMLHttpRequest();
xhr.open('get', url, true);
xhr.responseType = 'json';
xhr.onload = function() {
  var status = xhr.status;
  if (status == 200) {
    resolve(xhr.response);
  } else {
    reject(status);
  }
};
xhr.send();
});
};

但它只显示数据的最后一个标题,即这里的“Mob...”

如果有 100 个项目,需要做什么才能检索所有标题?

javascript json xmlhttprequest
1个回答
0
投票

这很正常,你的代码有:

result.innerText = data.result.docs[i].source.enriched.url.title; //for retrieving the title field

这意味着您不断用新标题替换

result
的内容,因此最后显示的是最后一个。

您需要以某种方式连接数据,或者如果您只是想在对结果进行更多操作之前查看结果,请使用

console.log

© www.soinside.com 2019 - 2024. All rights reserved.