将多个 JSON 文件作为一个数组读取答案

【问题标题】：Read multiple JSON files as one array将多个 JSON 文件作为一个数组读取
【发布时间】：2019-12-02 14:01:05
【问题描述】：

目前我的数组需要读取两个 JSON 文件。有没有办法让我将它们作为一个数组读取？

我已经尝试将两者都放入一个常量变量中，但没有奏效。像这样显然不是解决方案：

const var = [{json_file_1}, {json_file_2}];

我也尝试过 lodash，但我仍然没有找到解决方案，但我还有一个 console.log 行用于上面的代码。

console.log(_.flattenDeep(ThisFunction(var)));

ThisFunction() 读取我的 json 的内容。

这是我当前的数组。它只读取一个 json 文件：


const option = json_file_1
   .map(group => (
    <div key={group.title}>
      <div>
        {group.title}
      </div>
      {group.child_one.map(object => (
        <div key={object.title}>
          {object.title}
        </div>
      ))
    </div>
));

两个 JSON 文件都是这样的：

[
 {
   "title": "this title",
   "child_one": [
      {
        "content_1",
        "content_2"
      }
   ],
   "child_two": [
    {
      "title" "this title",
      "something": "something else"
    },
    {
      "title" "this title",
      "something": "something else"
    }
   ]
 }
]

输出应将两个文件作为一个数组读取。完成此操作后，我是否能够集成更多 JSON 文件以供读取？

【问题讨论】：

标签： arrays json reactjs frontend

【解决方案1】：

你做不到的原因

const var = [{json_file_1}, {json_file_2}];

是您在数组中创建了两个对象。但是，您可以简单地使用扩展运算符。

所以你可以像这样使用它并将这个 var 传递给你的组件。

const var = [...json_file_1, ...json_file_2];

如果不能解释清楚，请说清楚，以便我可以更详细地描述。

【讨论】：

我试过了，它给出了一个错误，上面写着“.default is not iterable”
hmm，你可以在你导入后控制台记录你的json文件吗？
我做到了，它显示了我的 json 的内容。我也刚刚发布了一个答案。
我仍然收到一个错误，很可能是因为我正在使用 react 钩子并且我的语法可能是错误的。
好的，我看到了您的回答，并根据您的需要更新了我的回答。您不必使用 flatten 功能，因为如果您的数据不是太嵌套，扩展运算符会为您完成。

【解决方案2】：

我可能已经找到了解决方案，但我认为这不是最好的，因为我收到大量控制台错误，因为我的一些虚拟数据是相同的

const var = [{json_file_1}, {jsone_file_2}];

然后我将它传递给我的AutoComplete 输入

<AutoComplete onSearch={_.flattenDeep(ThisFunction(var))}></AutoComplete>

如上所述，ThisFunction() 读取我的 JSON 文件中的数组和嵌套数组

【讨论】：