如何使用 Vanilla Js 格式化嵌套的 Json答案

【问题标题】：How to fomat nested Json using Vanilla Js如何使用 Vanilla Js 格式化嵌套的 Json
【发布时间】：2021-07-23 21:30:10
【问题描述】：

我想将输入 JSON 转换为输出对象数组，使用输入 JSON 数组并仅使用 vanilla Javascript，循环遍历 JSON 对象。我尝试了 foreach 功能，但遇到了一些问题。打印输出如下所示

let Input ={
       details:[
          {
             "id":"Country_name",
             "values":[
                "India",
                "England",
                "Germany"
             ]
          },
          {
             "id":"Country_capital",
             "values":[
                "Delhi",
                "London",
                "Berlin"
             ]
          }
       ],
       metadata:[
          {
             "id":"Country_name",
             "label":"Country"
          },
          {
             "id":"Country_capital",
             "label":"Capital"
          }
       ]
    }
    let Output =[
       {
          "Country":"India",
          "Capital":"Delhi"
       },
       {
          "Country":"England",
          "Capital":"London"
       },
       {
          "Country":"Germany",
          "Capital":"Berlin"
       }
    ]
    
Object.keys(input).forEach(function(value, key) {
  
   input[value].forEach(function(v, k) {
    console.log(v.id)
 })
})

【问题讨论】：

您应该将您尝试过的代码添加到您的问题中。
请提供您尝试改进的代码，以便我们看到问题

标签： javascript json frontend

【解决方案1】：

你可以试试这样的

const input = {
  details: [{
      "id": "Country_name",
      "values": [
        "India",
        "England",
        "Germany"
      ]
    },
    {
      "id": "Country_capital",
      "values": [
        "Delhi",
        "London",
        "Berlin"
      ]
    }
  ],
  metadata: [{
      "id": "Country_name",
      "label": "Country"
    },
    {
      "id": "Country_capital",
      "label": "Capital"
    }
  ]
};

function transform(input) {
  const ids = {};
  for (const detail of input.details) {
    ids[detail.id] = detail.values;
  }
  const meta = {};
  for (const m of input.metadata) {
    meta[m.id] = m.label;

  }
  const idsKeys = Object.keys(ids);

  const out = [];
  for (let i = 0; i < ids[idsKeys[0]].length; i++) {
    const obj = {};
    for (const key of idsKeys) {
      obj[meta[key]] = ids[key][i];
    }
    out.push(obj);
  }
  return out;
}

console.log(transform(input));

【讨论】：

未维护插入顺序，输出未显示插入顺序

【解决方案2】：

我更改了顶部的输入和变量

这可能对你有用，也可能不适合

let input ={
       details:[
          {
             "id":"Country_name",
             "values":[
                "India",
                "England",
                "Germany"
             ]
          },
          {
             "id":"Country_capital",
             "values":[
                "Delhi",
                "London",
                "Berlin"
             ]
          }
       ],
       metadata:[
          {
             "id":"Country_name",
             "label":"Country"
          },
          {
             "id":"Country_capital",
             "label":"Capital"
          }
       ]
    }
    let Output =[
       {
          "Country":"India",
          "Capital":"Delhi"
       },
       {
          "Country":"England",
          "Capital":"London"
       },
       {
          "Country":"Germany",
          "Capital":"Berlin"
       }
    ]
    
Object.keys(input).forEach(function(value, key) {
  
   input[value].forEach(function(v, k) {
    console.log(v.id)
 })
})

如果您有任何疑问或问题，我很乐意为您提供帮助

【讨论】：

【解决方案3】：

国家在Input.details[0].values
大写字母在Input.details[1].values

只需在第一次通过国家时创建一个包含国家的对象，然后在第二次通过首都时为每个对象添加资本

let Input = {
  details: [{
      "id": "Country_name",
      "values": [
        "India",
        "England",
        "Germany"
      ]
    },
    {
      "id": "Country_capital",
      "values": [
        "Delhi",
        "London",
        "Berlin"
      ]
    }
  ],
  metadata: [{
      "id": "Country_name",
      "label": "Country"
    },
    {
      "id": "Country_capital",
      "label": "Capital"
    }
  ]
};
let Output = [{
    "Country": "India",
    "Capital": "Delhi"
  },
  {
    "Country": "England",
    "Capital": "London"
  },
  {
    "Country": "Germany",
    "Capital": "Berlin"
  }
];

const newOutput = [];

const countries = Input.details[0].values;
countries.forEach(country => {
  console.log(country);
  newOutput.push({"Country": country});
});

const capitals = Input.details[1].values;
capitals.forEach((capital, i) => {
  console.log(capital);
  newOutput[i]["Capital"] = capital;
});

console.log(newOutput);

【讨论】：

【解决方案4】：

一种速记方法是映射input 的数据数组：

let input ={
       details:[
          {
             "id":"Country_name",
             "values":[
                "India",
                "England",
                "Germany"
             ]
          },
          {
             "id":"Country_capital",
             "values":[
                "Delhi",
                "London",
                "Berlin"
             ]
          }
       ],
       metadata:[
          {
             "id":"Country_name",
             "label":"Country"
          },
          {
             "id":"Country_capital",
             "label":"Capital"
          }
       ]
    }
    let Output =[
       {
          "Country":"India",
          "Capital":"Delhi"
       },
       {
          "Country":"England",
          "Capital":"London"
       },
       {
          "Country":"Germany",
          "Capital":"Berlin"
       }
    ]


 let data = input.details
 let countries = data[0].values
 let capitals = data[1].values

 const output = countries.map((el, index) => ({"country": el, "capital": capitals[index]}))
 console.log(output)

但是，在您的代码中，您将 Input 对象称为 input ，这是两个不同的变量

【讨论】：