javascript - 根据单独的 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"
  }

我根据 the answer to a similar question 尝试了以下操作，但它不起作用:

我的尝试

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

有人可以建议如何做到这一点吗？

非常感谢，

凯蒂

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);