Лучший способ правильно хранить данные в JSON?

Question

Я изучаю около JSON и варианты его использования. Предположим, у меня есть книга рецептов, и у меня есть следующие JSON для хранения рецептов (прошу прощения, если что-то не так, я только начинаю с этого)

var recipeBook = 
{
    recipes: 
    [
        {
            name: 'Spaghetti',
            ingredients: 
            [
                {
                    ingredientName: 'Pasta',
                    requiredAmount: 1,
                },
                {
                    ingredientName: 'Tomato Sauce',
                    requiredAmount: 1,
                }
            ]
        },
        {
            name: 'Cereal',
            ingredients:
            [
                {
                    ingredientName = 'Cereal Box',
                    requiredAmount = 1
                },
                {
                    ingredientName = 'Milk',
                    requiredAmount = '1'
                }
            ] 
        }
    ]
}

Скажем, я хотел добавить третий рецепт, или добавить новый ингредиент в рецепт ... Мне интересно, как лучше всего (с точки зрения кода) добавить новые данные в этот JSON.

Answer 1

Во-первых, JSON против JS Объекты

JSON не следует путать с общими c объектами в JavaScript. JSON - это « облегченный формат обмена данными », который делает все возможное, чтобы его было легко читать и редактировать для людей, а также чтобы компьютеры могли его анализировать и генерировать. Одно из основных отличий заключается в том, что JSON имеет более строгие синтаксические требования, чем общие c JS объекты.

То, что вы написали, является просто объявлением объекта в Javascript, а не стандартным JSON. JSON эквивалент данных вашего примера будет выглядеть так:

{
  "recipes": [
    {
      "name": "Spaghetti",
      "ingredients": [
        {
          "ingredientName": "Pasta",
          "requiredAmount": 1
        },
        {
          "ingredientName": "Tomato Sauce",
          "requiredAmount": 1
        }
      ]
    },
    {
      "name": "Cereal",
      "ingredients": [
        {
          "ingredientName": "Cereal Box",
          "requiredAmount": 1
        },
        {
          "ingredientName": "Milk",
          "requiredAmount": 1
        }
      ]
    }
  ]
}

Специфические c различия здесь:

• Все имена свойств заключены в двойные кавычки "
• Все строки заключены в двойные кавычки ", а не одинарные '
• Конечные запятые, за которыми не следует другая пара ключ / значение или структура данных, не допускаются

Вы можете опустить свойство recipes и оставить только массив без охватывающего объекта, это все равно будет действительным.

Также стоит отметить, что prop = value не допускается в любом синтаксисе: JS объявление объекта или JSON.

Описание полного JSON spe c - здесь , если вам интересно.

Манипулирование JS данными

Вы спросили, какой вариант кода лучше всего добавить к этому JSON. Поскольку JSON - это просто формат, он здесь не особо актуален, поскольку он в основном используется для хранения и передачи данных, а не для манипуляций.

Для работы с данными, хранящимися как JSON в Javascript , вы можете проанализировать его с помощью метода JSON.parse(string), который прочитает строку JSON и вернет эквивалентный объект Javascipt. Затем вы можете использовать стандартные методы и приемы манипулирования объектами / массивами для полученного объекта, в данном случае используя push(), чтобы добавить новый рецепт в массив.

Answer 2

Я думаю, что, вероятно, функция, которую вы ищете, это https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/push, например

recipeBook.recipes.push({
        name: 'Soup',
        ingredients:
        [
            {
                ingredientNam: 'Water',
                requiredAmount: 1
            },
            {
                ingredientName: 'Potatoes',
                requiredAmount: 4
            }
        ] 
    })

А для новых ингредиентов это будет

recipeBook.recipes[0].ingredients.push(
            {
                ingredientName: 'Salt',
                requiredAmount: 1
            }
    )

Я бы порекомендовал вам использовать название рецепта в качестве ключа в рецептах, я имею в виду:

var recipeBook = 
{
    recipes: 
    {
        Spaghetti:
        {
            ingredients: 
            [
                {
                    ingredientName: 'Pasta',
                    requiredAmount: 1,
                },
                {
                    ingredientName: 'Tomato Sauce',
                    requiredAmount: 1,
                }
            ]
        },
        Cereal:
        {
            ingredients:
            [
                {
                    ingredientName: 'Cereal Box',
                    requiredAmount: 1
                },
                {
                    ingredientName: 'Milk',
                    requiredAmount: 1
                }
            ] 
        }
    }
}

Это помогает получить рецепт как

var spaghettiRecipe = recipeBook.recipes.Spaghetti

Answer 3

Создание экземпляра объекта включает создание объекта программным способом. Я упрощаю код, чтобы было проще:

var book = {}

function Recipe(name, ingredients) {
  this.name = name;
  this.ingredients = ingredients;
}

// instantiate it
var chicken_teriyaki = new Recipe('Teriyaki', ['new one', 'two', 'three'])
var fried_chicken = new Recipe('Fried Chicken', ['chicken', 'potato starch', 'oil'])


// add to book
book.chicken_teriyaki = chicken_teriyaki;
book.fried_chicken = fried_chicken;

// update recipe
book.chicken_teriyaki.ingredients.push('another yummy')

// view result
console.log('the book', book);

Answer 4

Вот пример кода для добавления данных к объекту

//add recipe
recipeBook.recipes.push(newRecipe);

//add ingredient to recipe by name
var recipe = recipeBook.recipes.find(r => r.name == recipeName);
if (recipe) recipe.ingredients.add(newIngredient);

Также ваш объект Cereal использует ingredientName = 'Cereal Box',, что является недопустимым синтаксисом javascript. Вам нужно использовать : , как в вашем объекте спагетти.