Создайте новый объект в React. js из значений в отдельном json объекте.

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

Кто-нибудь может посоветовать, как это сделать?

Большое спасибо,

Kat ie

Answer 1

Причина, по которой вы получаете ошибку, заключается в том, что вы используете метод массива для объекта. Ваше 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 возвращает массив с длиной объекта ключи и массив как ключ, так и значение. Так что это просто вопрос отображения их на defaultValues, используя запись [0] в качестве ключа и запись [1] в качестве значения.

Редактировать: добавление рабочего примера на codesandbox

Answer 2

Прежде всего, я исправил ваш json. После этого я перебираю ключи объекта json, чтобы создать объект defaultValues. В вашей попытке вы рассматривали объект как массив. Только массивы имеют метод pu sh.

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