Handling JSON with javascript

Have you ever thought about wanting to handle or use the JSON data? At least I have! But you might think “Michael, I thought you have been programming for many years, I thought that you knew these basic things!”. Well actually,  I’ve mainly been using java, C++, and PHP. I haven’t used javascript for years, so I totally forgot most of it! I will jot down some basic javascript about ways to access the URL, get the JSON, and output to the HTML with  XMLHttpRequest.

(1. Access the URL with XMLHttpRequest

First of all, you will need to create a XMLHttpRequest object to access the web.

  var ourRequest = new XMLHttpRequest();

(2. To get the data from a certain URL, you will have to set 2 arguments into the open(). You will set the GET as a first argument if you want to receive the data. If you want to send a data you will have to set ‘POST’. In the second argument, you will have to set the URL address that you want to access.

ourRequest.open(‘GET’,’https://www.sample.php/sample.json’);

(3. Call onload() and in the anonymous function, you can get the response(JSON data) with ourRequest.responseText. But remember that the data you get won’t be automatically converted to JSON, so always use JSON.parse() if you want to use the response as a JSON. By the way, what is the if condition doing? Don’t worry, it’s just an error handling.

ourRequest.onload = function() {
if (ourRequest.status >= 200 && ourRequest.status < 400) {
var ourData = JSON.parse(ourRequest.responseText);
console.log(ourData[0]);
} else {
console.log("Connected to the server but failed");
}
}

(4. Let’s send the request! Wait set the error handling before sending the request because what will you do if the server screws up? Just add an error handling method. And as you might know, dont use console.log for error handling because…you know, please think of some other solution.

ourRequest.onerror = function () {
console.log(“connection error”);
}
ourRequest.send();

(5. Handling the JSON data like a boss.

Now we got the following sample JSON data, so how do we get the data we want from this? I’ll show you now!

[{"name": "Michael","species": "human","foods": {}},]

What is the following code doing? Sorry, it might be hard to read my spagettie code… But what it’s doing is quite simple. First its looping through the entire JSON data and concatnating the output to the variable called htmlString so that it can be used later as a HTML element.

for (i = 0; i <ourData.length; i++) {
//concat to the string variable
htmlString += “<p>”+ourData[i].name+” is sa “+ourData[i].species+” that likes to eat “;
for (ii = 0; ii <ourData[i].foods.likes.length; ii++) {
    if (ii == 0) {
         htmlString+=ourData[i].foods.likes[ii];
    } else {
       htmlString+=” and “+ourData[i].foods.likes[ii];
}
}
//lets try to add the foods that you dislike to the string
  htmlString += “. Foods I dislike are “;
 for (dis = 0; dis <ourData[i].foods.dislikes.length; dis++) {

    htmlString +=ourData[i].foods.dislikes[dis];
}
    htmlString += “</p>”;
}

 

Leave a Reply

Your email address will not be published. Required fields are marked *