从单独的 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

谁能建议如何做到这一点？

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

不完全确定我是否正确阅读了您的问题，但是如果您尝试生成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 aboveconst defaultValues = {};Object.keys(json).forEach(function(key) {  defaultValues[key] = json[key].courses.main;});

Answer 3

您收到错误的原因是因为您在对象上使用了数组方法。您的 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 返回一个包含对象键长度的数组以及一个包含键和值的数组。因此，只需使用 entry[0] 作为键和 entry[1] 作为值将它们映射到 defaultValues。