原始问题
我正在尝试用JavaScript编写一个函数,该函数允许使用XMLHTTPRequest将来自另一个来源的文章加载到另一个页面上。
每篇文章都是一个JavaScript对象,其中包含链接,图像,摘要等。
每个请求将检索5篇文章,但是我只想在每次单击按钮时显示4篇文章。因此,我想将文章(对象)推送到全局数组。
由于我刚开始使用XMLHTTPRequests,所以我找不到执行该操作的方法。
除了:
var i;
for (i = 0; i < newArticles.length; i++) {
articles.push(newArticles[i]);
}
newArticles是一个对象,包含我要尝试将其推送到标题为articles的全局数组的5个文章(对象)。
我的代码:
var articles = [];
document.getElementById("fc-blog-button-loadmore").addEventListener("click", receiveNewArticles);
function receiveNewArticles() {
var http = new XMLHttpRequest();
var url = "thelinktothepagewith5newarticles.json";
http.onreadystatechange = function() {
if(http.readyState == 4 && http.status == 200) {
var newObj = JSON.parse(http.responseText);
var newArticles = (newObj.blog.articles);
console.log(newObj);
console.log(newArticles);
var i;
for (i = 0; i < newArticles.length; i++) {
articles.push(newArticles[i]);
}
console.log(articles);
}
}
http.open("GET", url, true);
http.send();
}
已解决
在提供有用的注释后,我的代码当前如下所示:
var articles = [];
document.getElementById("fc-blog-button-loadmore").addEventListener("click", receiveNewArticles);
function receiveNewArticles() {
var http = new XMLHttpRequest();
var url = "http://freshcotton-dev.webshopapp.com/nl/blogs/blog/page2.html?format=json";
http.onreadystatechange = function() {
if(http.readyState == 4 && http.status == 200) {
var newObj = JSON.parse(http.responseText);
var newArticles = (newObj.blog.articles);
console.log(newObj);
console.log(newArticles);
articles.push(...Object.values(newArticles))
console.log(articles);
}
}
http.open("GET", url, true);
http.send();
}
问题已解决!
答案 0 :(得分:0)
您只需使用[spread operator] [1] ...
即可解决该问题articles.push(...Object.values(newArticles));
[1]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax