时间戳

首页 > 解决方案 > 如何使用来自 REST API 的响应填充对象数组，其中每个对象内部都有一个数组？

javascript - 如何使用来自 REST API 的响应填充对象数组，其中每个对象内部都有一个数组？

问题描述

我连续大约一个小时都无法在谷歌上找到正确的解决方案，所以我从 API 中得到了如下所示的响应：

[
  {
    "Name": "name1",
    "Title": "Name One",
    "Children": [
      {
        "Name": "Name 1.1",
        "Title": "Name one point one"
      },
     ]

我需要它来适应这种“模具”，以便数据适合：

{
title: 'Name One',
value: 'name1',
key: '1',
children: [
  {
    title: 'Name one point one',
    value: 'Name 1.1',
    key: 'key1',
  },

我正在尝试使用 foreach 来实现这一点，但它没有按预期工作，因为我需要在一个 foreach 实例中完成这一切。这是我尝试过的（vue2）：

   created() {
    getData().then(response => {
      const formattedResponse = []
      response.forEach((el, key) => {
        formattedResponse.title = response.Title
        formattedResponse.name = response.Name
        formattedResponse.children = response.Children
      })
    })

标签： javascriptarraysforeachvuejs2

解决方案

map在主数组上使用并使用解构赋值children键提取属性，并重新标记它们，然后对数组执行完全相同的操作。然后返回更新的对象数组。

const data=[{Name:"name1",Title:"Name One",Children:[{Name:"Name 1.1",Title:"Name one point one"}]},{Name:"name2",Title:"Name Two",Children:[{Name:"Name 1.2",Title:"Name one point two"}]}];

const result = data.map((obj, key) => {

  const { Title: title, Name: value } = obj;
  
  const children = obj.Children.map(obj => {
    const { Title: title, Name: value } = obj;
    return { title, value, key: (key + 1).toString() };
  });
  
  return { title, value, children };
   
});

console.log(result);

推荐阅读