如何在javascript上从json文件重写对象数组的索引

所以基本上

我有一个

content.json

文件

[
  {
    "content1": {
      "link": {
        "title": "lorem lorem",
        "url": "http://localhost"
      },
      "description": "lorem loremlorem loremlorem loremlorem loremlorem loremlorem loremlorem loremlorem lorem"
    }
  },
  {
    "content2": {
      "title": "loremloremloremloremloremlorem",
      "thumbnail": {
        "caption": "loremloremloremlorem",
        "image": {
          "desktop": "https://via.placeholder.com/900x500",
          "tablet": "https://via.placeholder.com/600x400",
          "mobile": "https://via.placeholder.com/320x320"
        }
      }
    }
  }
]

下面的代码可以工作，但正如您所见，我必须为每个父对象声明一个新变量

import React from "react";
import ReactDOM from "react-dom";
import jsonContent from "./data/content.json";
import Test1 from "./components/Test1.js";
import Test2 from "./components/Test2.js";

import "./styles.css";

function App() {
  const data1 = jsonContent.find(item => item.content1);
  const data2 = jsonContent.find(item => item.content2);

  return (
    <div className="App">
      <Test1 content={data1.content1} />
      <Test2 content={data2.content2} />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

这样我就可以一次脱氯并通过任何组件，如

<Test1 content={data.content1} />
<Test2 content={data.content2} />

我还创建了一个代码沙盒 所以你可以测试

---

谢谢…

这个JSON文件的格式很不幸。这里我将假设最外层数组中的每个对象最多有一个属性（

content1

，

content2

，等等），并且它引用一个对象

如果是这样，解析JSON后，重新格式化就相当简单了：

const reformatted = data.map(entry => entry[Object.keys(entry)[0]]);

获取每个对象包装器的一个属性所拥有的对象，并将其放入结果数组中。然后直接使用结果数组中的对象

实例：

const数据=[
{
“内容1”：{
“链接”：{
“头衔”：“lorem lorem”，
“url”：”http://localhost"
},
“描述”：“lorem loremlorem loremlorem loremlorem loremlorem loremlorem loremlorem loremlorem loremlorem loremlorem”
}
},
{
“内容2”：{
“头衔”：“知识宝库”，
“缩略图”：{
“说明”：“知识宝库”，
“图像”：{
“桌面”：https://via.placeholder.com/900x500",
“平板电脑”：https://via.placeholder.com/600x400",
“移动”：https://via.placeholder.com/320x320"
}
}
}
}
];
const reformatted=data.map（entry=>entry[Object.keys（entry）[0]]）；
console.log（重新格式化）
。作为控制台包装器{
最大高度：100%！重要；
}
为了将其转换为单个对象数据，您必须循环遍历所有条目，并获取第一个键并将其放入另一个对象中。下面是做同样事情的逻辑-

let json = [
  {
    "content1": {
      "link": {
        "title": "lorem lorem",
        "url": "http://localhost"
      },
      "description": "lorem loremlorem loremlorem loremlorem loremlorem loremlorem loremlorem loremlorem lorem"
    }
  },
  {
    "content2": {
      "title": "loremloremloremloremloremlorem",
      "thumbnail": {
        "caption": "loremloremloremlorem",
        "image": {
          "desktop": "https://via.placeholder.com/900x500",
          "tablet": "https://via.placeholder.com/600x400",
          "mobile": "https://via.placeholder.com/320x320"
        }
      }
    }
  }
];

let data = {};

json.forEach(row => {
  let keys = Object.keys(row);
  data[keys[0]] = row[keys[0]];
});

console.log(data);


实时操作-
您可以使用Array#reduce将对象数组转换为一个对象


const data=[{“content1”：{“link”：{“title”：“lorem lorem”，“url”：http://localhost“}，”描述“：“知识知识知识知识知识知识知识知识知识知识知识知识知识知识知识知识知识知识知识知识知识知识知识知识”}，{“内容2:{”标题“：“知识知识知识知识知识知识知识知识知识知识知识知识知识知识知识知识知识知识知识知识知识知识知识知识知识知识知识知识知识知识知识知识知识知识知识知识知识知识”}，{“桌面”："https://via.placeholder.com/900x500“平板电脑”：https://via.placeholder.com/600x400，“移动”：https://via.placeholder.com/320x320"}}}}];
const res=数据减少（（a，c）=>{
const key=Object.keys（c.shift（）；
a[键]=c[键]；
返回a；
}, {})
console.log（res）；
“只需返回一个类似于
[{content:Object}，{content2}]
“这还不清楚。您想要的确切、完整的结构是什么？”我还创建了一个codesandbox，以便您可以进行测试“对于可运行的示例，请使用现场堆栈片段，而不是场外资源。堆栈代码段支持React，包括JSX。这可以防止您无意中遗漏重要的细节，并且通过单击“复制代码片段以回答”按钮并进行编辑，人们可以很容易地帮助您。为什么最初的JSON有像
“contentX”
这样的键？它包装了所有其他内容，而且您还有一个数组，那么为什么不将对象直接放在数组中呢？content.json是一个数组。您可以通过数组索引（0和1）访问“content1”和“content2”.“content1”和“content2”属性有什么意义吗？我希望json文件看起来更像
[{name:“content1”，title:“something”}，{name:“content2”，title:“something”}]
，这样您就可以在json上做一个简单的循环，而不必为要添加的所有内容创建单独的变量和挂钩。这将更容易维护，并且完全消除您的问题。我认为您对OP的目标的猜测比我更好。但我必须说，当累加器从不改变时，我不喜欢使用reduce@T.J.Crowder这其实不是我第一次听说这件事。但是，如果没有外部变量，我看不到其他可能的解决方案。谢谢你的推特帖子，这很有意义。因为循环似乎被低估了。是的，我只是用一个循环。拥有变量不是问题。：-）
let json = [
  {
    "content1": {
      "link": {
        "title": "lorem lorem",
        "url": "http://localhost"
      },
      "description": "lorem loremlorem loremlorem loremlorem loremlorem loremlorem loremlorem loremlorem lorem"
    }
  },
  {
    "content2": {
      "title": "loremloremloremloremloremlorem",
      "thumbnail": {
        "caption": "loremloremloremlorem",
        "image": {
          "desktop": "https://via.placeholder.com/900x500",
          "tablet": "https://via.placeholder.com/600x400",
          "mobile": "https://via.placeholder.com/320x320"
        }
      }
    }
  }
];

let data = {};

json.forEach(row => {
  let keys = Object.keys(row);
  data[keys[0]] = row[keys[0]];
});

console.log(data);