在reactJS中转换嵌套的json对象？答案

【问题标题】：Convert nested json object in reactJS?在reactJS中转换嵌套的json对象？
【发布时间】：2020-08-02 10:18:48
【问题描述】：

我一直在玩 json 对象和使用 ReactJS。由变量“res”表示的 json 对象之一。如何将“res”转换为“b”。我还从 api 获取我的 json 对象“res”。

我已通过此链接解决了我的问题：https://codesandbox.io/s/epic-leaf-sznhx?file=/src/App.js

const [res, setResult] = useState();
  useEffect(() => {
    (async () => {
      axios.get("https://corona.lmao.ninja/v2/countries").then(response => {
        setResult(response.data);
      });
    })();
  }, []);

如何转换：


        const a = 
        {
          "menu_1": {
            "id": "1",
            "menuitem": [{
              "value": "0",
              "onclick": "0()"
            }, {
              "value": "0",
              "onclick": "0()"
            }]
          },
          "menu_2": {
            "id": "2",
            "menuitem": [{
              "value": "2",
              "onclick": "2()"
            }]
          }
        }

进入这个 json 对象：

const b =

    {
      "popup": {
        "menuitem": [
          {
            "value": "0",
            "onclick": "0()"
          },
          {
            "value": "0",
            "onclick": "0()"
          },
          {
            "value": "2",
            "onclick": "2()"
          }
        ]
      }
    }

【问题讨论】：

标签： javascript json reactjs nested

【解决方案1】：

您可以执行以下操作：

const a = {
  menu_1: {
    id: "1",
    menuitem: [{
      value: "1",
      onclick: "1()",
    }, ],
  },
  menu_2: {
    id: "2",
    menuitem: [{
      value: "2",
      onclick: "2()",
    }, ],
  },
};

let b = Object.keys(a).reduce(
  (p, c) => {
    for (let item of a[c].menuitem) {
      p.popup.menuitem.push(item);
    }
    return p;
  }, {
    popup: {
      menuitem: []
    }
  }
);

console.log(b);

我假设对象 a 在数组中可能有多个 menuitem。

【讨论】：

我收到这个错误：TypeError: Invalid尝试迭代不可迭代的实例。为了可迭代，非数组对象必须有一个 [Symbol.iterator]() 方法。
我的 console.log 打印了这个{ "popup": { "menuitem": [] } }
你能打印出你在Object.keys()里面传递了什么

【解决方案2】：

你可以这样使用reduce

const a = {
  "menu_1": {
    "id": "1",
    "menuitem": [{
      "value": "0",
      "onclick": "0()"
    }, {
      "value": "0",
      "onclick": "0()"
    }]
  },
  "menu_2": {
    "id": "2",
    "menuitem": [{
      "value": "2",
      "onclick": "2()"
    }]
  }
}

const res = Object.values(a).reduce((all, {
  menuitem
}) => {
  all.popup.menuitem = [...all.popup.menuitem, ...menuitem]

  return all
}, {
  popup: {
    menuitem: []
  }
})

console.log(res)

【讨论】：

我的 console.log 打印出这个 { "popup": { "menuitem": [] } }
我刚刚添加了一个沙盒链接和更多信息以供参考
你应该创建一个辅助函数，然后你在获取数据时可以调用它来格式化数据，然后将其置于状态