json.parse() vs. response.json

- Use JSON.parse() to parse the response for AJAX.
   : AJAX works with callbacks, fetch with Promises. Use JSON.parse() to parse the response for AJAX.
- Use json() to parse the response for fetch.

 

---

json.parse()

1. method

2. Synchronous

2. parses a JSON string, constructing the JavaScript value or object described by the string.

3. An optional reviver function can be provided to perform a transformation on the resulting object before it is returned.

4. JSON.parse() does not allow trailing commas

5. JSON.parse() does not allow single quotes

 

Syntax

JSON.parse(text[, reviver])

text	The string to parse as JSON. See the JSON object for a description of JSON syntax.
revivier [optional]	If a function, this prescribes how the value originally produced by parsing is transformed, before being returned.

Return

: The Object, Array, string, number, boolean, or null value corresponding to the given JSON text.

 

---

Body.json()

1. method of the Body mixin takes a Response stream and reads it to completion.

2. Asynchronous

2. It returns a promise that resolves to a JavaScript object with the result of parsing the body text as JSON.

3. Use json() to parse the response for fetch. ▼

In our fetch json example (run fetch json live), 
1) we create a new request using the Request() constructor,
2) then use it to fetch a .json file.
3) When the fetch is successful, we read and parse the data using json(),
4) then read values out of the resulting objects as you'd expect
5) and insert them into list items to display our product data.

const myList = document.querySelector('ul');
const myRequest = new Request('products.json');

fetch(myRequest)
  .then(response => response.json())
  .then(data => {
    for (const product of data.products) {
      let listItem = document.createElement('li');
      listItem.appendChild(
        document.createElement('strong')
      ).textContent = product.Name;
      listItem.append(
        ` can be found in ${
          product.Location
        }. Cost: `
      );
      listItem.appendChild(
        document.createElement('strong')
      ).textContent = `£${product.Price}`;
      myList.appendChild(listItem);
    }
  })
  .catch(console.error);

 

Syntax

response.json().then(data => {
  // do something with your data
});

Return

: A Promise that resolves to a JavaScript object. 

: This object could be anything that can be represented by JSON — an object, an array, a string, a number.

 

Exception

: Throws a SyntaxError exception if the string to parse is not valid JSON.

---

https://www.rockyourcode.com/javascript-fetch-pitfall-json.parse-vs.-response.json/

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse

https://developer.mozilla.org/en-US/docs/Web/API/Body/json

https://stackoverflow.com/questions/48295439/json-parse-vs-json#:~:text=Body.,the%20resulting%20returned%20JavaScript%20object.