mozilla

Question 1

What is JSON?

Answer 1

A text-based data format following JavaScript object syntax. A standard text-based format for representing structured data based on JavaScript object syntax.

Question 2

Who was JSON popularized by?

Answer 2

Douglas Crockford.

Question 3

What does JSON stand for?

Answer 3

JavaScript Object Notation.

Question 4

What is JSON commonly used for?

Answer 4

Transmitting data in web applications.

Question 5

Give an example of how JSON can be used to transmit data in web application.

Answer 5

Sending some data from the server to the client, so it can be displayed on a web page, or vice versa

Question 6

What does the JSON. parse() method do?

Answer 6

Constructs the JavaScript value or object described by the string.

Question 7

What should you note about JSON even though it closely resembles JavaScript object literal syntax?

Answer 7

It can be used independently from JavaScript, and many programming environments feature the ability to read (parse) and generate JSON.

Question 8

How does JSON exist?

Answer 8

As a string — useful when you want to transmit data across a network.

Question 9

What do you need to do if you want to access the JSON data?

Answer 9

Convert it to a native JavaScript object.

Question 10

Is converting JSON into a JavaScript object difficult?

Answer 10

No, JavaScript provides a global JSON object that has methods available for converting between the two.

Question 11

What is converting a string to a native object is called?

Answer 11

Deserialization.

Question 12

What is converting a native object to a string so it can be transmitted across the network is called?

Answer 12

Serialization.

Question 13

Where can a JSON object be stored?

Answer 13

In its own file, which is basically just a text file with an extension of .json, and a MIME type of application/json.

Question 14

What data types can you include in JSON?

Answer 14

The same basic data types as you can in a standard JavaScript object — strings, numbers, arrays, booleans, and other object literals.

Question 15

What’s one way JSON differs from a JavaScript object?

Answer 15

An array is also valid JSON.

Question 16

Does JSON contain anything other than data?

Answer 16

No, JSON is purely a data format — it contains only properties, no methods.

Question 17

What is something JSON requires?

Answer 17

Double quotes to be used around strings and property names. Single quotes are not valid.

Question 18

How can you validate JSON?

Answer 18

Using an application like JSONLint.

Question 19

Why is it a good idea to validate JSON using an application like JSONLint?

Answer 19

Because even a single misplaced comma or colon can cause a JSON file to go wrong, and not work. You should be careful to validate any data you are attempting to use (although computer-generated JSON is less likely to include errors, as long as the generator program is working correctly).

Question 20

What other forms can JSON take apart from arrays and objects?

Answer 20

Any data type that is valid for inclusion inside JSON. For example, a single string or number would be a valid JSON object.

Question 21

In JavaScript code,object properties may be unquoted. How does this differ to JSON?

Answer 21

Only quoted strings may be used as properties in JSON.

Question 22

What is a way of obtaining JSON?

Answer 22

Use an API called XMLHttpRequest (often called XHR).

Question 23

What is XMLHttpRequest (often called XHR)?

Answer 23

A very useful JavaScript object that allows us to make network requests to retrieve resources from a server via JavaScript (e.g. images, text, JSON, even HTML snippets).

Question 24

What advantage is there of making network requests to retrieve resources from a server via JavaScript?

Answer 24

We can update small sections of content without having to reload the entire page.

Question 25

Why is it better to use XHR to update small sections of content without having to reload the entire page?

Answer 25

It allows for more responsive web pages.

Question 26

What are the steps for using some JSON data on a website?

Answer 26

Store the URL of the JSON we want to retrieve in a variable. Create a request, we need to create a new request object instance from the XMLHttpRequest constructor, using the new keyword. Open the request using the open() method. Set the responseType to JSON, so that XHR knows that the server will be returning JSON, and that this should be converted behind the scenes into a JavaScript object. Then we send the request with the send() method. And lastly, wait for the response to return from the server, and deal with it.

Question 27

How would you store the URL of the JSON you want to retrieve in a variable?

Answer 27

let requestURL = 'https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json'

Question 28

How would you create a request, by creating a new request object instance from the XMLHttpRequest constructor, using the new keyword?

Answer 28

let request = new XMLHttpRequest();

Question 29

How would you open the request using the open() method?

Answer 29

request.open('GET', requestURL); This takes at least two parameters — there are other optional parameters available. You only need the two mandatory ones for a simple example.

Question 30

What are the parameters in this example? request.open('GET', requestURL);

Answer 30

The HTTP method to use when making the network request. In this case GET is fine, as we are just retrieving some simple data. The URL to make the request to — this is the URL of the JSON file that we stored earlier.

Question 31

How would you set the response type and and send the request?

Answer 31

request. responseType = 'json'; | request. send();

Question 32

How would you deal with the response from the server?

Answer 32

``` request.onload = function() { const superHeroes = request.response; populateHeader(superHeroes); showHeroes(superHeroes); } ```

Question 33

Where can we access the response of the request?

Answer 33

On the response property.

Question 34

What does the variable superHeroes contain in this code? ``` request.onload = function() { const superHeroes = request.response; populateHeader(superHeroes); showHeroes(superHeroes); } ```

Answer 34

The JavaScript object based on the JSON.

Question 35

What are we doing to the JavaScript object in this code? ``` request.onload = function() { const superHeroes = request.response; populateHeader(superHeroes); showHeroes(superHeroes); } ```

Answer 35

Passing that object to two function calls — the first one fills the with the correct data, while the second one creates an information card for each hero on the team, and inserts it into the .

Question 36

Why would you wrap the code in an event handler that runs when the load event fires on the request object?

Answer 36

Because the load event fires when the response has successfully returned; doing it this way guarantees that request.response will definitely be available when we come to try to do something with it.

Question 37

``` request.onload = function() { const superHeroes = request.response; populateHeader(superHeroes); showHeroes(superHeroes); } ``` Create two functions where the first one fills a with the correct data, while the second one creates an information card for each hero on the team, and inserts it into the

Answer 37

``` function populateHeader(jsonObj) { const myH1 = document.createElement('h1'); myH1.textContent = jsonObj['squadName']; header.appendChild(myH1); ``` ``` const myPara = document.createElement('p'); myPara.textContent = 'Hometown: ' + jsonObj['homeTown'] + ' // Formed: ' + jsonObj['formed']; header.appendChild(myPara); } ```

Question 38

Why was the parameter named jsonObj in this code? ``` function populateHeader(jsonObj) { const myH1 = document.createElement('h1'); myH1.textContent = jsonObj['squadName']; header.appendChild(myH1); ``` ``` const myPara = document.createElement('p'); myPara.textContent = 'Hometown: ' + jsonObj['homeTown'] + ' // Formed: ' + jsonObj['formed']; header.appendChild(myPara); } ```

Answer 38

To remind ourselves that this JavaScript object originated from JSON.

Question 39

Some code that displays the superhero cards:

Answer 39

``` function showHeroes(jsonObj) { const heroes = jsonObj['members']; ``` ``` for (let i = 0; i < heroes.length; i++) { const myArticle = document.createElement('article'); const myH2 = document.createElement('h2'); const myPara1 = document.createElement('p'); const myPara2 = document.createElement('p'); const myPara3 = document.createElement('p'); const myList = document.createElement('ul'); ``` myH2.textContent = heroes[i].name; myPara1.textContent = 'Secret identity: ' + heroes[i].secretIdentity; myPara2.textContent = 'Age: ' + heroes[i].age; myPara3.textContent = 'Superpowers:'; ``` const superPowers = heroes[i].powers; for (let j = 0; j < superPowers.length; j++) { const listItem = document.createElement('li'); listItem.textContent = superPowers[j]; myList.appendChild(listItem); } ``` ``` myArticle.appendChild(myH2); myArticle.appendChild(myPara1); myArticle.appendChild(myPara2); myArticle.appendChild(myPara3); myArticle.appendChild(myList); ``` section.appendChild(myArticle); } }

Question 40

What does the parse() method do?

Answer 40

Accepts a JSON string as a parameter, and returns the corresponding JavaScript object.

Question 41

What does the stringify() methods do?

Answer 41

Accepts an object as a parameter, and returns the equivalent JSON string form.

Question 42

What is noteworthy about the methods parse() and stringify()

Answer 42

A built-in JSON object is available in browsers, which contains these two methods.

Question 43

Show an example of how you would handle receiving raw JSON text.

Answer 43

request. open('GET', requestURL); request. responseType = 'text'; // now we're getting a string! request. send(); request.onload = function() { const superHeroesText = request.response; // get the string from the response const superHeroes = JSON.parse(superHeroesText); // convert it to an object populateHeader(superHeroes); showHeroes(superHeroes); }

Question 44

Show an example using stringify()

Answer 44

``` let myJSON = { "name": "Chris", "age": "38" }; let myString = JSON.stringify(myJSON); ```

Question 45

What is happening with this code? ``` let myJSON = { "name": "Chris", "age": "38" }; let myString = JSON.stringify(myJSON); ```

Answer 45

We're creating a JavaScript object, then converting it to a JSON string using stringify() and saving the return value in a new variable.