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

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

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 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 returns 一个包含对象键长度的数组以及一个包含键和值的数组。所以这只是使用 entry[0] 作为键和 entry[1] 作为值将它们映射到 defaultValues 的问题。

编辑：在 codesandbox

上添加一个工作示例

Answer 3

首先，我纠正了你的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);

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

Create a new object in React.js from the values in a separate json object

javascript

json

object

undefined

reactjs