How can I use jQuery to push JSON data into an array?

Question

I'm new to jQuery, and I'm trying out the getJSON function. What I want to do is pull the "id" section of a JSON file and push it into an array called planes in jQuery. From there, the array is used in an autocomplete function to fill in the searchable IDs.

var planes = [];
$.getJSON('planes.json', function(data) {
    console.log('Filling array...');

//This is where I think the issue is occurring. 
//Is using the name of the section you want to use the correct syntax here?
    $.each(data.id, function (index, val) {
        planes.push(val.id);
        console.log('Pushed ' + index);
    });
});

// After getJSON, array should look something like this:
// var planes = [
//  'Alara',
//  'Fiora',
//  'Innistrad',
//  'Kamigawa',
//  'Lorwyn',
//  'Mirrodin',
//  'Ravnica',
//  'Shandalar',
//  'Zendikar'
// ];

The JSON file is arranged like so:

[ 
    {"id": "Ravnica"},
    {"id": "Lorwyn"},
    {"id": "Innistrad"},
    {"id": "Zendikar"},
    {"id": "Kamigawa"},
    {"id": "Mirrodin"},
    {"id": "Shandalar"},
    {"id": "Alara"},
    {"id": "Fiora"}
]

Plunker

Any help is much appreciated.

Btw, are you using mtgjson.com's dataset? If not, that could save you a lot of time for whatever your project is... — Fabio Beltramini
– Fabio Beltramini, Commented Jun 8, 2016 at 16:45

bitten · Accepted Answer · 2016-06-08 16:34:40Z

1

You almost have it, although you are looping through data.id which is not what you want to be doing. You should just loop through data, and push val.id.

If you wanted to loop through data.id, then you're json would have to be structured like so:

{
    "id": [
        "things",
        "to",
        "loop",
        "through"
    ]
}

..but it's not, so just loop through data.

answered Jun 8, 2016 at 16:34

bitten

2,5532 gold badges28 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Thassa Over a year ago

This was it! Thanks for your help. In addition, it looks like I could have structured my JSON differently to make this a bit easier.

Zeeshan · Accepted Answer · 2016-06-08 16:41:10Z

Please check following solution. I have hard coded plane data instead of getting from file but solution is same. You just need update your $.each line by iterating over data instead of data.id (this is you'r bug rest of code is fine).

var data = [{
  "id": "Ravnica"
}, {
  "id": "Lorwyn"
}, {
  "id": "Innistrad"
}, {
  "id": "Zendikar"
}, {
  "id": "Kamigawa"
}, {
  "id": "Mirrodin"
}, {
  "id": "Shandalar"
}, {
  "id": "Alara"
}, {
  "id": "Fiora"
}];
var planes = [];
//surround this each with your $.getJSON. I have just hardcoded json data instead of getting it from file
$.each(data, function(index, val) {
  planes.push(val.id);
});

console.log(planes);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Your update plunker link Plunker

Fabio Beltramini · Accepted Answer · 2016-06-08 16:43:40Z

0

You might also look into the native array map method, which saves you having to create an array and then push things onto it. It just returns a new array given the original array by applying the mapping function on each item.

$.getJSON("planes.json",function(data){
    console.log(data.map(function(plane){return plane.id;}))
}

However, this is not available in IE<=8 if I recall correctly.

answered Jun 8, 2016 at 16:43

Fabio Beltramini

2,5211 gold badge18 silver badges25 bronze badges

Collectives™ on Stack Overflow

How can I use jQuery to push JSON data into an array?

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related