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

const 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。