Parse Method

• The JSON.parse() method can be used on any JSON data you want to convert to JS, whether it was received from a server, or it was stored in the JS code.
• The first requirement of the parse method is that the JSON data must be wrapped in a string by placing single quotes around the entirety of the data

Example

• For example, say we declare a new JSON object on the next line like so:

let studentJSON = 
  { "firstName" : "Millie", "lastName" : "Brown", "grade" : 10 };

• If we tried to use the parse method on studentJSON as it is, and then print the last name attribute, nothing will be printed to the console :

let studentJS = JSON.parse(studentJSON);
console.log(studentJS.lastName);

Example

• The parameter of the JSON.parse() method must be a string

studentJSON = 
  '{"firstName" : "Millie", "lastName" : "Brown", "grade" : 10}';

• Reassigning the value of studentJSON to the string of JSON data now allows us to successfully implement the parse method:

let student = JSON.parse(studentJSON);
console.log(student.firstName);

JS to JSON

• Remember that JSON is useful for exchanging data from AND to a web server.
• In the event that we want to convert JS data and SEND JSON data to a web server, we essentially perform the opposite action of the JSON.parse method
• Fortunately, there is also a method that makes this task easy for us, called Stringify.

Stringify Method

• Declare a new variable to store the string returned by the Stringify method:

let newString;

• Set the new variable equal to the Stringify method with the JavaScript object passed in as a parameter:

newString = JSON.stringify(student);

Exceptions

• The string is now ready to be sent to a server, which will read the JSON text
• exceptions:
  • Remember that JSON does not support functions, dates, or undefined values.
  • if it has a date, function, or undefined value, JSON will alter the object according to the unsupported data type.

dates & functions

• Dates are simply converted to a string. Let’s look at an example:
  

let obj = { name: "John", today: new Date(), city : "New York" };
let myJSON = JSON.stringify(obj);
console.log(myJSON);

• Functions are removed from the object entirely unless the return value of a function is converted to a string before the stringify method is implemented

Looping

• How do we loop over the data?
• Looping is extremely useful when working with larger JSON data sets; for example when populating a table of the JSON data instead of having to manually enter each cell
• Looping through JSON data is something that will look familiar, as it just uses a simple for-in loop
  

For-in loop

• used to loop through the properties of an object; in this case, we’re looping through the properties of a JSON object
• For JSON data, we can loop through and print each key like so:
  

television = { "brand":"Samsung", "model":"QF Series", "make":"QN82Q6FNAFXZA", "price":2999};
for (key in television) {
  console.log(key);
}

for-in

• Note that the iterator, key, can be named anything. It could be i, x, etc. The name is irrelevant
• To loop through the JSON data and retrieve the values of the key:value pairs, we use bracket notation like so:
  

for (key in television) {
    console.log(television[key]);
}

Nesting

• Sometimes you want to store a JSON object within a JSON object.
• For example, if we’re making a list of our friends and their respective attributes, such as hair color, eye color, age, name, etc. all of these keys typically require one value
  

Nesting

• we use nesting for more complex data, such as pets
  

friend = {
  "name":"Kate",
  "age":21,
  "hairColor": "Blonde",
  "eyeColor": "Brown",
  "pets": {
    "bird": "Mack",
    "iguana": "Beemer",
    "cat": "Ozzy",
    "hamster": "Retsuko"
  }
}

Nesting

• Nested JSON data is simply accessed using dot or bracket notation like so:

console.log(friend.pets.hamster);

• or:

let pet2 = friend.pets["iguana"];
console.log(pet2);

Exercises

back