时间戳

首页 > 解决方案 > JavaScript - 将对象内的对象推送到全局数组

javascript - JavaScript - 将对象内的对象推送到全局数组

问题描述

原始问题

我正在尝试用 JavaScript 编写一个函数，该函数允许使用 XMLHTTPRequest 将来自另一个来源的文章加载到另一个页面上。

每篇文章都是一个 JavaScript 对象，包含链接、图片、摘要等。

每个请求将检索 5 篇文章，但我只想在每次按钮单击时显示 4 篇文章。因此，我想将文章（对象）推送到全局数组。

由于我在使用 XMLHTTPRequests 方面还很陌生，所以我找不到如何做到这一点。

一切正常，除了：

var i;
          for (i = 0; i < newArticles.length; i++) {
            articles.push(newArticles[i]);
          }

newArticles 是一个包含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();
  }

问题已解决！

标签： javascriptarraysfunctionxmlhttprequest

解决方案

您可以简单地使用 [spread operator][1] ...

articles.push(...Object.values(newArticles));


  [1]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax

推荐阅读