从一个单独的json对象中的值在React.js中创建一个新对象

Question

我有一个json对象，我想从中提取一些值来在React.js中创建一个新对象。然而，无论我尝试什么，我都会遇到与值或键未定义有关的错误。

Json

{
"meat":{"drink":"Bovril", "courses":{ "main":"chicken", "pudding":"jelly" },
"vegetarian":{"drink":"milkshake", "courses":{"main":"cheese","pudding":"ice cream"},
"vegan":{"drink":"spinach juice", "courses":{"main":"lettuce","pudding":"apple"}
}

所需结果

我想动态创建一个名为defaultValues的对象，如果我对其进行硬编码，它将匹配以下内容。正如你所看到的，这是根据上面json文件中的值创建的：

const defaultValues: {
meat: "chicken",
vegetarian: "cheese",
vegan: "lettuce"
}

根据类似问题的答案，我尝试了以下方法，但不起作用：

我的尝试

const json = Json; //this contains the contents of my json file above
const defaultValues = {};
Object.keys(json).forEach(function(key) {
defaultValues[key.meat].push([key.courses.main]);
});

错误

我一直得到以下错误：

×TypeError: Cannot read property 'push' of undefined

有人能就如何做到这一点提出建议吗？

非常感谢，

Katie

Answer 1

首先，我更正了您的json。之后，我迭代json对象的键来创建defaultValues对象。在您的尝试中，您一直将对象视为数组。只有数组具有push方法。

const json = {
"meat": {
"drink":"Bovril", 
"courses":{ 
"main":"chicken", 
"pudding":"jelly" 
}
},
"vegetarian":{
"drink":"milkshake", 
"courses":{
"main":"cheese",
"pudding":"ice cream"
}
},
"vegan":{
"drink":"spinach juice", 
"courses":{
"main":"lettuce",
"pudding":"apple"
}
}
};
const defaultValues = {};
Object.keys(json).forEach(e => {
defaultValues[e] = json[e]["courses"].main;
});
console.log(defaultValues);

Answer 2

出现错误的原因是在对象上使用数组方法。您的defaultValues是一个对象｛｝

另一个问题是json是一个字符串，您需要首先将该字符串解析为一个对象。在您的一些json中，还缺少结束大括号。

这是我对你的代码的看法：

const json = `{
"meat": {
"drink": "Bovril", "courses": { "main": "chicken", "pudding": "jelly" }},
"vegetarian": {
"drink": "milkshake", "courses": { "main": "cheese", "pudding": "ice cream" }},  
"vegan": {
"drink": "spinach juice", "courses": { "main": "lettuce", "pudding": "apple" }}
}`;
const menu = JSON.parse(json)
const defaultValues = {};
Object.entries(menu).forEach(function (entry) {
defaultValues[entry[0]] = entry[1].courses.main;
});
console.log(defaultValues) // -> Object {meat: "chicken", vegetarian: "cheese", vegan: "lettuce"}

Object.entries返回一个包含对象键长度的数组，以及一个包含键和值的数组。因此，只需要使用条目[0]作为键，条目[1]作为值，将这些值映射到defaultValues。

编辑：添加一个关于codesandbox 的工作示例

Answer 3

不完全确定我是否正确阅读了您的问题，但如果您正在尝试生成

const defaultValues: {
meat: "chicken",
vegetarian: "cheese",
vegan: "lettuce"
}

从这个json对象-(通过验证器进行验证，结果不太好，这是更正后的格式(

const Json= {
"meat": {"drink": "Bovril","courses": {"main": "chicken","pudding": "jelly"}},
"vegetarian": {"drink": "milkshake","courses": {"main": "cheese","pudding": "ice cream"}},
"vegan": {"drink": "spinach juice","courses": {"main": "lettuce","pudding": "apple"}}
}

然后下面的应该工作

const json = Json; //this contains the contents of my json file above
const defaultValues = {};
Object.keys(json).forEach(function(key) {
defaultValues[key] = json[key].courses.main;
});