Question

创建 JS 对象

2020-07-22

47

javascript object

我正在使用 Wordpress REST API 从网站检索一些标签。也许我没有在 SO 上正确搜索，但我正在尝试使用我的 data 并创建我的 dataSet 变量。但我收到一条错误消息，说它无法识别 for 循环标记。我对 Javascript 还很陌生，所以我不知道如何解决这个问题。

这是我的代码：

var req = new XMLHttpRequest();
var pieChart = document.getElementById('pie_chart_1');

req.open("GET", "http://example.org/wp-json/wp/v2/tags?per_page=10")
req.onload = function() {
  if (req.status >= 200 && req.status < 400) {
      var data = JSON.parse(req.responseText);
     
    } else {
      console.log("Returning an error");
    }

};

req.onerror = function() {
   console.log("Connection error");
 };

req.send();


var dataSet = [
  for(i = 0; i < data.length; i++) {
    {legendLabel: data[i].name, magnitude:data[i].count, link: "http://example.com/tag" + data[i].slug},
  }
];

Answer 1

您在方括号内使用 for 循环来定义数组，但语法不正确。由于您使用 WordPress REST API 获取标签，因此响应将是一个 JSON 对象，其中包含包含结果的 tags 属性。您的 link 值中似乎也缺少 / 。

假设 data.tags 的值为 -

[{
  display_name: 'Test Name',
  slug: 'test-name',
}];

为此目的正确使用 for 循环 -

const dataSet = [];
const tags = data.tags;
for (let i=0; i<tags.length; i+=1) {
  dataSet.push({
     legendLabel: tags[i].display_name, 
     link: "http://example.com/tag" + tags[i].slug,
  });
}

从原始 JSON 对象数组创建 JSON 对象数组的更好方法是使用 Array.map() 将第一个数组中的每个元素“映射”到新数组中的新元素 -

const dataSet = data.tags.map(function (element) {
  return { 
     legendLabel: element.display_name,
     link: "http://example.com/tag/" + element.slug,
  };
});

更进一步，您可以使用箭头函数、对象参数解构、显式返回，字符串模式等，以获得具有相同功能的更紧凑的语法 -

const dataSet = data.tags.map(({ display_name: displayName, slug }) => ({
  legendLabel: displayName,
  link: `http://example.com/tag/${slug}`,
});

Answer 2

首先，在大多数情况下，最好使用 fetch API

在 JS 中没有 for 推导式，因此最后一块代码可以重构如下：

const dataSet = data.map(({ name, count, slug }) => ({
  legendLabel: name,
  magnitude: count,
  link: `http://example.com/tag${slug}`
}));