TIL/2021–01–09&10

Day 28 and Day 29: Treehouse Full Stack JavaScript Techdegree

Today I learned about JSON.

These are my notes:

Introducing JSON

A web server commonly responds to AJAX requests with a text response, plain text or HTML

Two other common text formats are XML and JSON

JSON (JAVASCRIPT OBJECT NOTATION)

  • A way to use JavaScript to pass information around
  • Uses basic JavaScript arrays and objects to store data
  • Format JSON: Array notation or Object notation — or combine both
  • The problem with arrays is that we don’t really know what each value means
  • That’s why we use the object notation because it comes in key value pairs / property value pairs
  • Because object’s lets you add property names, it is much more easier to identify the different parts of an object

Object example in normal JavaScript:

{

name : “Renzo”,

age : 23,

}

There is a requirement for JSON formatted data

  • In regular JavaScript, object keys do not need to have quotations
  • In JSON, it requires double quotes to be around the key name

Object example in JSON:

To make sure our JSON is correctly formatted, we can use an online validator called JSONLint

https://jsonlint.com/

— — — -

Parsing JSON Data

To a web browser, the server’s response to an AJAX request is just a string of characters

To use JSON data, we need to take the string and convert it into JavaScript — which is called parsing

Let’s see what we get by retrieving the responseText (the data retrieved by the browser from the server)

We receive a JSON object

If we check the type

Its a big long string

We need to convert this string into JavaScript

By using JSON.parse(responseText from the server) — takes a string and converts it into a JavaScript object — this won’t work unless the string formatted is correct JSON

It is now an array of items that we can manipulate using JavaScript\

— —

Processing JSON Data

Challenge: Which rooms are available and which are full

Now we have to convert it into a JS object because it is currently a string

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store