Bokchee 88 Bokchee 88 - 1 month ago 6
Javascript Question

Loading JSON file with plain JavaScript, no framework, no jQuery

I am trying to get my head over JSON file, to load and access properties with native js and display them on html.

This is my JSON file/

{
"London": [
{
"Manchester": [
{
"id": 1,
"isFurnished": true,
"price": "1300",
"hasBalcony": true,
"bedRooms": 2,
"type": "Long term",
"features": {
"security": "Secure Gated Parking",
"access": "Close To Schools & Doctors"
}
},
{
"id": 2,
"isFurnished": true,
"price": "1300",
"hasBalcony": true,
"bedRooms": 2,
"type": "Long term",
"features": {
"security": "Secure Gated Parking",
"access": "Close To Schools & Doctors"
}
},
"Manchester Area",
[
{
"id": "Manchester Science Park",
"isFurnished": false,
"price": "739",
"hasBalcony": false,
"bedRooms": 1,
"type": "Moderate term",
"features": {
"fun": "On-site cafe",
"parking": "Options for car parking",
"meeting": "Free informal meeting space"
}
},
{
"id": "Manchester Science Park",
"isFurnished": false,
"price": "739",
"hasBalcony": false,
"bedRooms": 1,
"type": "Moderate term",
"features": {
"fun": "On-site cafe",
"parking": "Options for car parking",
"meeting": "Free informal meeting space"
}
},
{
"id": "Manchester Science Park",
"isFurnished": false,
"price": "739",
"hasBalcony": false,
"bedRooms": 1,
"type": "Moderate term",
"features": {
"fun": "On-site cafe",
"parking": "Options for car parking",
"meeting": "Free informal meeting space"
}
}
]
]
}
]
}


Okey, here is my JSON. As you can see, i want to build real estate for me and to have some project as a portfolio.

For example when page loads, I want to show every listing for specific city. For example. In my JSON i have Manchester, but i will have more cities. So, page loads and every city is shown Manchester, LOndon, Chelsea etc.
So when item Manchester is clicked, to display every object under Manchester array.

How the hell to do that?

Answer

In this example I make use of ajax to read a json file and return it as a Javascript object. XMLHTTPrequest will go out and grab our json file reading it as plain text and our JSON.parse() method will turn the json in to a javascript object. From there you can do with the data as you please.

    function getJsonObject(cb){
            // read text from URL location
            var request = new XMLHttpRequest();
            request.open('GET', 'js/yourjson.json', true);
            request.send(null);
            request.onreadystatechange = function () {
                if (request.readyState === 4 && request.status === 200) {
                    var type = request.getResponseHeader('Content-Type');

                           try {
                             cb(JSON.parse(request.responseText);
                           }catch(err) {
                             cb(err);
                           }
                }
            }
        }

Now to access the jsonObject you are trying to reach invoke function by passing a callback function that takes the object as an argument in to the getJsonObject function.

getJsonObject(function(object){
     //Do what you want with the object here
     console.log(object);
});