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

8cdiaqws  于 2023-11-20  发布在  Java
关注(0)|答案(1)|浏览(95)

我试图通过JavaScript从Pakynewsapi获取数据。我收到的示例数据是:

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


但它只显示我的最后一个标题的数据,即在这里的“暴徒.”
需要做什么来检索所有的标题,如果有100的项目?

bf1o4zei

bf1o4zei1#

这很正常,你的代码有:

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

字符串
这意味着您不断地用新标题替换result的内容,因此在最后,您将显示最后一个标题。
您需要以某种方式连接数据,或者如果您只是想在对它们执行更多操作之前查看结果,则使用console.log

相关问题