How to load external JSON with a variable defined

Question

How to load data from external json file(.json) which contains a variable defined in it.

var mainObject= {"main":[{key1:value2}, {key2:value2}]}

What is the method to call mainObject vaiable using jquery or javascript?

that's not JSON - that's simply javascript - load it using script tag — Jaromanda X, Jan 11 '16 at 05:29
Possible duplicate of [Get JSON data from external URL and display it in a div as plain text](http://stackoverflow.com/questions/9922101/get-json-data-from-external-url-and-display-it-in-a-div-as-plain-text) — , Jan 11 '16 at 05:30
Is that what the JSON looks like. Because that's not valid JSON. Like Jaromanda said, that's actual javascript. — Araymer, Jan 11 '16 at 05:30
sorry, is the line of "code" the content of the external file? — Jaromanda X, Jan 11 '16 at 05:30
QRaviprakash - Here it is function loadJSON() { var xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { var JSONObject = mainObject; // The JSONObject variable now contains the data structure and can be accessed as JSONObject.firstName and // JSONObject.lastName. Assign the object members to the DOM elements FirstName and LastName so that they get // displayed on the page document.getElementsByClassName("Wrapper").innerHTML = JSONObject; } } xmlhttp.open("GET","json.json",true); xmlhttp.send(); } — Jaideep, Jan 11 '16 at 05:31

score 0 · Answer 1 · answered Jan 11 '16 at 05:29

0

  var jsonData=JSON.parse(mainObject);

 var data=jsonData.main;
 console.log(data[0].key1);
 console.log(data[1].key2);

answered Jan 11 '16 at 05:29

Maheshvirus

But how to link it to .json file? Is it ok to give src in script tag? – Jaideep Jan 11 '16 at 05:39
No you cant read/Write external json file.U should store it in localstorage or u need to read it online. – Maheshvirus Jan 11 '16 at 05:46

score 0 · Answer 2 · answered Jan 11 '16 at 05:32

I assume you have json data in mainObject so calling in javascript like this

console.log(mainObject[0].key1);

As the jQuery API says: "Load JSON-encoded data from the server using a GET HTTP request."

http://api.jquery.com/jQuery.getJSON/ So you cannot load a local file with that function.

score 0 · Answer 3 · answered Jan 11 '16 at 05:37

0

Either $.ajax or $.get to grab a json file. Basically you can do something like:

$.ajax({
    url: 'file.json',
    method: 'GET'
}).success(function(data){
    var property = JSON.parse(data).property;
});

This is assuming that the json file is properly formatted. A valid JSON file with your data would look more like:

{
    "main": [
    {
        "key1": "value1"
    }, 
    {
        "key2": "value2"
    }]
}

answered Jan 11 '16 at 05:37

Vikk

But here I have to remove the variable isn't it? What if I want to call the variable iself? – Jaideep Jan 11 '16 at 05:41
In this scenario, the data variable is what you use. Basically ` data = {"main":[{key1:value2}, {key2:value2}]} ` inside of the success callback. It contains the array of objects you set in the JSON file. The mainObject you are showing, is not valid JSON, it is JavaScript, as others have said. To get an object in that format, you would have to use a module loader like RequireJS, which is more complex or load it via a script tag after the main logic. – Vikk Jan 11 '16 at 05:47

3 Answers3