current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Stack Overflow is a community of 4.7 million programmers, just like you, helping each other.

Join them; it only takes a minute:

Sign up
Join the Stack Overflow community to:
  1. Ask programming questions
  2. Answer and help your peers
  3. Get recognized for your expertise
up vote 0 down vote favorite
1

What is the best way to create javascript array from json file? I have four empty JavaScript array that I would like to populate with data imported from a json file.

var firstname = new Array();
var address= new Array();
var city = new Array();

File Json : "file.json"

[
{"name ": "John", "address": "350 Fifth Avenue", "city ": "New York"},
{"name ": "Mark", "address": "1101 Arch St", "city ": "Philadelphia"},
{"name ": "Jack", "address": "60th Street", "city ": "Chicago"}
]

I try:

$.getJSON('file.json',function (data) {   

    for (var i = 0; i < data.length; i++) {
        firstname.push.apply( firstname, data[i].firstname );
        address.push.apply( address, data[i].address );
        city.push.apply( city, data[i].city );
    }

});

but arrays are still empty. Thanks in advance

================================ SOLVED ===============================

$.ajax({
    async: false,
    url: 'file.json',
    data: "",
    accepts:'application/json',
    dataType: 'json',
    success: function (data) {
        for (var i = 0; i < data.length; i++) {
            firstname.push( data[i].firstname );
            address.push( data[i].address );
            city.push( data[i].city );
        }
    }
})
// Get arrays outside callback function
console.log('result: '+firstname.length); // result: 3
share|improve this question
up vote 0 down vote accepted

You have two or three problems.

Your JSON is invalid.

Remove the quotes from around the outside of it.

Seriously consider giving is a .json file extension, then you are more likely to get the right MIME type for JSON. (JSON data files are not JavaScript programs).

File Json : "data.json"

[
{"name ": "John", "address": "350 Fifth Avenue", "city ": "New York"},
{"name ": "Mark", "address": "1101 Arch St", "city ": "Philadelphia"},
{"name ": "Jack", "address": "60th Street", "city ": "Chicago"}
]

You are accessing your data in the wrong order

This is overly complicated and is accessing properties in the wrong order.

name.push.apply(name, data.name[i]);

Forget about using apply. You don't need it.

Then note that your JSON array contains the objects, not the other way around. You need to access the array index before the property name:

name.push(data[i].name);

Remember the A in Ajax

Finally - your code doesn't show how you are testing the result. Remember that Ajax is asynchronous, so that if you examine the values of your arrays outside the callback function, they might not have been populated yet.

share|improve this answer
1  
His AJAX is fine, q.v. this tutorial which presumably runs OK. – Tim Biegeleisen May 14 '15 at 11:21
    
@TimBiegeleisen — That doesn't seem to have anything to do with any of the points I mentioned. – Quentin May 14 '15 at 11:25
    
Thank you @TimBiegeleisen. I really appreciate your answer, very detailed and in particular the last point. How can I use arrays outside the callback function? – George_p May 14 '15 at 11:30
    
stackoverflow.com/questions/14220321/… – Quentin May 14 '15 at 11:30
    
@Quentin Thanks! Solved! – George_p May 14 '15 at 11:48
up vote 4 down vote

You seem to have the order wrong, data is the array so it's not

data.name[i]

but

data[i].name

and removing the strange apply it would be

$.getJSON('json.js',function (data) {   
    for (var i = 0; i < data.length; i++) {
        name.push( data[i].name );
        address.push( data[i].address );
        city.push( data[i].city );
    }
});

Also note that name is a bad choice for a variable name in the global context.

share|improve this answer
    
Thank you @adameo, and I apologize for the distraction. I corrected the code as you reported but arrays continue to be empty – George_p May 14 '15 at 11:17
up vote -2 down vote

If your data isn't already a json object:

var json = $.parseJSON(data);

Then in your loop (if 'data' is already a json object replace 'json' with 'data' below):

json.forEach(function(element){
    name.push(element.name);
    address.push(element.address);
    city.push(element.city);
});
share|improve this answer
    
Explaination for the down votes? – Taplar May 14 '15 at 10:57

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.