Best way to properly store data in a JSON?

I’m studying about JSON and its use cases. Suppose I have a recipe book and I have the following JSON to store recipes (I apologize if anything is wrong before hand, I’m just starting with this)

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'
                }
            ] 
        }
    ]
}

Say I wanted to add a third recipe, or add a new ingredient to a recipe…I’m wondering what is the best option (code-wise) to add new data into this JSON.

Answer

First, JSON vs. JS Objects

JSON isn’t to be confused with generic objects in JavaScript. JSON is a “lightweight data-interchange format” that does its best to be both easy for humans to read and edit, yet also easy for computers to parse and generate. One of the main differences is that JSON has stricter syntax requirements than generic JS objects do.

What you’ve written is simply an object declaration in Javascript, rather than standard JSON. A JSON equivalent to your example data would look like this:

{
  "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
        }
      ]
    }
  ]
}

The specific distinctions here:

• All property names are enclosed in double quotes "
• All strings are enclosed in double quotes " rather than single '
• Trailing commas that aren’t followed by another key/ value pair or data structure aren’t allowed

You could choose to omit the recipes property and keep just the array without the enclosing object, this would still be valid.

Also worth noting that prop = value is not allowed in either syntax, JS object declaration nor JSON.

A description of the full JSON spec is here if you’re interested.

Manipulating JS Data

You asked what the best option code-wise is to add data to this JSON. Since JSON is just a format, it’s not actually super relevant here, since it’s primarily used for data storage and transport, and not for manipulation.

To work with data stored as JSON in Javascript, you can parse it in with the JSON.parse(string) method, which will read a JSON string and return an equivalent Javascipt object. You can then use standard object/ array manipulation methods and techniques on that resulting object, in this case using push() to add a new recipe onto the array.