JavaScript JSON

JSON Syntax

JSON data is written as name/value pairs (aka key/value pairs).

A name/value pair consists of a field name (in double quotes), followed by a colon, followed by a value:

JSON names require double quotes.

JSON Utilities Formatters

JSON Data

Given a JSON string and the task is to convert the JSON string to the array of JSON objects. This array contains the values of JavaScript object obtained from the JSON string with the help of JavaScript.
There are two approaches to solve this problem which are discussed below:
Approach 1: First convert the JSON string to the JavaScript object using JSON.Parse() method and then take out the values of the object and push them into the array using push() method.

What is JSON? JSON is a way to store, persist data in a structure which is easy to read and easy to access.
JSON stands for JavaScript Object Notation, which machine can understand and generate.
JSON structure provides a human-readable collection of information to explain and understand the logical representation of data.

JSON Array Example

 {
   "Actors": [
     {
       "name": "Tom Cruise",
       "age": 56,
       "Born At": "Syracuse, NY",
       "Birthdate": "July 3, 1962",
       "photo": "https://jsonformatter.org/img/tom-cruise.jpg"
     },
     {
       "name": "Robert Downey Jr.",
       "age": 53,
       "Born At": "New York City, NY",
       "Birthdate": "April 4, 1965",
       "photo": "https://jsonformatter.org/img/Robert-Downey-Jr.jpg"
     }
   ]
 }
 

Example with all the JSON Data Type.

 {
   "Actors": [
     {
       "name": "Tom Cruise",
       "age": 56,
       "Born At": "Syracuse, NY",
       "Birthdate": "July 3, 1962",
       "photo": "https://jsonformatter.org/img/tom-cruise.jpg",
       "wife": null,
       "weight": 67.5,
       "hasChildren": true,
       "hasGreyHair": false,
       "children": [
         "Suri",
         "Isabella Jane",
         "Connor"
       ]
     },
     {
       "name": "Robert Downey Jr.",
       "age": 53,
       "Born At": "New York City, NY",
       "Birthdate": "April 4, 1965",
       "photo": "https://jsonformatter.org/img/Robert-Downey-Jr.jpg",
       "wife": "Susan Downey",
       "weight": 77.1,
       "hasChildren": true,
       "hasGreyHair": false,
       "children": [
         "Indio Falconer",
         "Avri Roel",
         "Exton Elias"
       ]
     }
   ]
 }
 

Codepen

Work in Progress Codepen

Objective: Using a JSON data file converted to an HTML Table using Convert JSON

Other Approaches

Another Example in Codepen

Key Factors

1. Known Good Formatted JSON Tested Json Formatter
2. Then Parsed to a JavaScript Object! not Array at this Point
3. This and That
4. And a Few Others
5. More Notes Here

Legit Known Good Tested Wednesday July 07 2021 0845 AM

  '{"name":"John", "age":30, "city":"New York"}'

  const obj = JSON.parse('{"name":"John", "age":30, "city":"New York"}');
  obj

JavaScript JSON Stringify

1. a Json Beautifier
2. b
3. c
4. d
5. e

  console.log(JSON.stringify({ x: 5, y: 6 }));
  // expected output: "{"x":5,"y":6}"
  
  console.log(JSON.stringify([new Number(3), new String('false'), new Boolean(false)]));
  // expected output: "[3,"false",false]"
  
  console.log(JSON.stringify({ x: [10, undefined, function(){}, Symbol('')] }));
  // expected output: "{"x":[10,null,null,null]}"
  
  console.log(JSON.stringify(new Date(2006, 0, 2, 15, 4, 5)));
  // expected output: ""2006-01-02T15:04:05.000Z""
  

  

  JSON.stringify({});                    // '{}'
  JSON.stringify(true);                  // 'true'
  JSON.stringify('foo');                 // '"foo"'
  JSON.stringify([1, 'false', false]);   // '[1,"false",false]'
  JSON.stringify([NaN, null, Infinity]); // '[null,null,null]'
  JSON.stringify({ x: 5 });              // '{"x":5}'
  
  JSON.stringify(new Date(2006, 0, 2, 15, 4, 5))
  // '"2006-01-02T15:04:05.000Z"'
  
  JSON.stringify({ x: 5, y: 6 });
  // '{"x":5,"y":6}'
  JSON.stringify([new Number(3), new String('false'), new Boolean(false)]);
  // '[3,"false",false]'
  
  // String-keyed array elements are not enumerable and make no sense in JSON
  let a = ['foo', 'bar'];
  a['baz'] = 'quux';      // a: [ 0: 'foo', 1: 'bar', baz: 'quux' ]
  JSON.stringify(a);
  // '["foo","bar"]'
  
  JSON.stringify({ x: [10, undefined, function(){}, Symbol('')] });
  // '{"x":[10,null,null,null]}'
  
  // Standard data structures
  JSON.stringify([new Set([1]), new Map([[1, 2]]), new WeakSet([{a: 1}]), new WeakMap([[{a: 1}, 2]])]);
  // '[{},{},{},{}]'
  
  // TypedArray
  JSON.stringify([new Int8Array([1]), new Int16Array([1]), new Int32Array([1])]);
  // '[{"0":1},{"0":1},{"0":1}]'
  JSON.stringify([new Uint8Array([1]), new Uint8ClampedArray([1]), new Uint16Array([1]), new Uint32Array([1])]);
  // '[{"0":1},{"0":1},{"0":1},{"0":1}]'
  JSON.stringify([new Float32Array([1]), new Float64Array([1])]);
  // '[{"0":1},{"0":1}]'
  
  // toJSON()
  JSON.stringify({ x: 5, y: 6, toJSON(){ return this.x + this.y; } });
  // '11'
  
  // Symbols:
  JSON.stringify({ x: undefined, y: Object, z: Symbol('') });
  // '{}'
  JSON.stringify({ [Symbol('foo')]: 'foo' });
  // '{}'
  JSON.stringify({ [Symbol.for('foo')]: 'foo' }, [Symbol.for('foo')]);
  // '{}'
  JSON.stringify({ [Symbol.for('foo')]: 'foo' }, function(k, v) {
    if (typeof k === 'symbol') {
      return 'a symbol';
    }
  });
  // undefined
  
  // Non-enumerable properties:
  JSON.stringify( Object.create(null, { x: { value: 'x', enumerable: false }, y: { value: 'y', enumerable: true } }) );
  // '{"y":"y"}'
  
  // BigInt values throw
  JSON.stringify({x: 2n});
  // TypeError: BigInt value can't be serialized in JSON
  

w3 Schools JSON

Known Good JSON Data

  {
    "id": "0001",
    "type": "donut",
    "name": "Cake",
    "ppu": 0.55,
    "batters": {
      "batter": [
        {
          "id": "1001",
          "type": "Regular"
        },
        {
          "id": "1002",
          "type": "Chocolate"
        },
        {
          "id": "1003",
          "type": "Blueberry"
        },
        {
          "id": "1004",
          "type": "Devil's Food"
        }
      ]
    },
    "topping": [
      {
        "id": "5001",
        "type": "None"
      },
      {
        "id": "5002",
        "type": "Glazed"
      },
      {
        "id": "5005",
        "type": "Sugar"
      },
      {
        "id": "5007",
        "type": "Powdered Sugar"
      },
      {
        "id": "5006",
        "type": "Chocolate with Sprinkles"
      },
      {
        "id": "5003",
        "type": "Chocolate"
      },
      {
        "id": "5004",
        "type": "Maple"
      }
    ]
  }

Last Updated:

Sunday November 14 2021 0958 AM