Make an Array from JSON object values with jQuery

Question

I have this simple JSON file (test.json):

{"personnes":[
 {
 "name":"Super",
 "firstname":"Mario",
 "adresse":["45 rue du poirier","6700","Strasbourg"],
 "departement": "bas-rhin",
 },
 {
 "name":"Super",
 "firstname":"Luigi",
 "adresse":["10 rue du muguet","6700","Strasbourg"],
 "departement": "eure",
 }
]}

For some reasons, I need to get each "departement" values to be stored in a single array like this :["bas-rhin","eure"]

I learned that $.makeArray() can do the job, but didn't find out how. Here is my jQuery :

$( document ).ready(function() {
 $.getJSON( "ajax/test.json", function( data ) {
 console.log('loaded');
 var departement;
 var departements = $.each(data.personnes, function (index, personne) {
 departement = personne.departement;
 var arr = $.makeArray(departement);
 console.log(arr)
 });
 });
});

With that code, I get 2 seperate arrays : ["eure"] and ["bas-rhin"].

Here is the question : How can I solve it and get these values in a single array ?

Answer 1

Use map. It's much simpler:

var arr = data.personnes.map(function (el) {
 return el.departement;
});
console.log(arr); // ["bas-rhin", "eure"]

Alternatively, using jQuery's $.map:

var arr = $.map(data.personnes, function (el) {
 return el.departement;
});

Fiddle

If you need a polyfill for map:

if (!('map' in Array.prototype)) {
 Array.prototype.map = function (mapper, that /*opt*/) {
 var other = new Array(this.length);
 for (var i = 0, n = this.length; i < n; i++) {
 if (i in this) { other[i] = mapper.call(that, this[i], i, this); }
 }
 return other;
 };
}

• Jai: Its fine but ie8 is having issues with .map().
• jmsg1990: You could use $.map for a more compatible solution.

Answer 2

I think you should try like this:

$.getJSON( "ajax/test.json", function( data ) {
 console.log('loaded');
 var departement = []; // create array here
 $.each(data.personnes, function (index, personne) {
 departement.push(personne.departement); //push values here
 });
 console.log(departement); // see the output here
});

Answer 3

There are many to declare a array. choose any one:

var arr = $.makeArray();
or
var arr = [];
or
var arr = new Array();

There are listed three way to create array from json object:

1.

$.each(data.personnes, function (index, personne) {
 arr[index] = personne.departement;
});

2.

var arr = personnes.personnes.map(function (element) {
 return element.departement;
});

3.

for(var index = 0; index < data.personnes.length; index++) {
 arr[arr.length] = data.personnes[index].departement;
}

Now you have look on image :

enter image description here

Answer 4

Try this

$( document ).ready(function() {
 $.getJSON( "ajax/test.json", function( data ) {
 console.log('loaded');
 var departement_arr = [];
 var departements = $.each(data.personnes, function (index, personne) {
 departement_arr.push(personne.departement);
 });
 console.log(departement_arr);
 });
});

Answer 5

JavaScript does not have associative arrays; you can only push a value into an array. If you are looking for the following end result:

 ['abc','dg','erte']

// 0 1 2 <------- Index ( not 1 2 3 )

use .each

var arr= new Array();
$.each( personnes, function(i, obj) {
 arr.push( obj.personnes)
});

Or you could use .map

var arr = $.map( personnes, function( obj, i ) { return obj.personnes; } ); 

Answer 6

Here is a way to do it using simple array logic:

$( document ).ready(function() {
 $.getJSON( "ajax/test.json", function( data ) {
 console.log('loaded');
 var departements = [];
 $.each(data.personnes, function (index, personne) {
 departements[departements.length] = personne.departement;
 });
 console.log(arr);
 });
});