This is the 24th day of my participation in the November Gwen Challenge. Check out the event details: The last Gwen Challenge 2021

Preface:

Review the previous article on the important data structure of JS JSON for understanding, often encountered, but sometimes on these data transfer or acquisition after processing, is also a more complex knowledge point, but also because often to deal with, so the next on some of the JSON processing skills to explore.

In the previous series of articles, we have studied some knowledge points of JavaScript, but also through THE JS implementation of classical algorithms for specific learning, summary more reading -list & classic sorting algorithm -list

JavaScript important data type JSON

MDN | (JSON) is used to structured data are expressed as the standard format of JavaScript object, is often used to said on the website and transmit data (for example from the server to the client to send some data, so it can be displayed on the web page

Request JSON data and display it on the page

Use of JSON: The steps to request an online JSON format (.json) data and display the relevant data on the page:

1. Define the path URL of the REQUESTED JSON file

.json file URL:

let requestJSONURL = 'https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json'
Copy the code

2. Create an HTTP request

Create an HTTP request object using the new constructor:

// New an HTTP request object
let request = new XMLHttpRequest()
Copy the code

3. Make a request through open()

Use the open() function to open a new request:

request.open('GET', requestURL)
Copy the code

4. Set the format of the request data return

Let the server know we want to return a JSON object by setting responseType to JSON, and send the request:

request.responseType = 'json'
request.send()
Copy the code

5. Process JSON data

After requesting returned data from the server, process the data:

request.onload = function () {
  let superHeroes = request.response
  populateHeader(superHeroes)
  showHeroes(superHeroes)
}
Copy the code

Save the request data (accessing the response property) in the superHeroes variable, which now contains JSON!

JSON data processing method:

  1. JSON.parse(dataText)

    .parse() takes a JSON object as a text string and returns the corresponding object.

request.onload = function () {
  var superHeroesText = request.response // get the string from the response
  var superHeroes = JSON.parse(superHeroesText) // convert it to an object
  populateHeader(superHeroes)
  showHeroes(superHeroes)
}
Copy the code

  1. JSON.stringify(myJSON)

    The.stringify() method takes an object as an argument and returns a corresponding JSON string.

let myJSON = { name: 'Ah Bai!'.age: '18' }

// Convert it to a JSON string with stringify()
let myString = JSON.stringify(myJSON)
// myString: '{"name":" age":"18"}'
Copy the code

Read more:

Classical sorting algorithm:

  • 【 jS-sort algorithm -sort()】,
  • 【JavaScript- sort algorithm – Hill sort 】
  • 【JS- sorting algorithm – merge sort 】,
  • 【JavaScript- sorting algorithm – counting sort 】
  • 【JS- sort algorithm – bubble sort 】
  • JS- Classical sorting algorithm – Selection sort,
  • 【JS implementation – classical sorting algorithm – insert sort 】
  • JS implementation – classical sorting algorithm -JS implementation of radixSort (radixSort)
  • Learn the classic sort algorithm -JS to implement quickSort
  • Learn sorting algorithm skills – three – way fast sorting

JavaScript learning and Improvement

  • 】 【 Array. The prototype. The map (),
  • JS- special symbol – bit operator
  • 【ES6 – for/of】,
  • JS- Logical operator – short circuit? ,
  • 【JS- arrow function 】
  • 】 【 JavaScript – forEach (),
  • 【JS- Important data type -JSON】