Conversion d'un objet JS en tableau à l'aide de jQuery


417

Mon application crée un objet JavaScript, comme suit:

myObj= {1:[Array-Data], 2:[Array-Data]}

Mais j'ai besoin de cet objet en tant que tableau.

array[1]:[Array-Data]
array[2]:[Array-Data]

J'ai donc essayé de convertir cet objet en tableau en itérant avec $.eachvia l'objet et en ajoutant l'élément à un tableau:

x=[]
$.each(myObj, function(i,n) {
    x.push(n);});

Existe-t-il une meilleure façon de convertir un objet en tableau ou peut-être en fonction?


1
Les indices du tableau doivent-ils être les mêmes que les clés de l'objet d'origine? Le premier index d'un tableau est toujours 0, mais votre propre code et la plupart des réponses (y compris celle acceptée) semblent l'ignorer; vous avez quand même rétabli ma modification au résultat d'exemple souhaité.
Imre

1
Oui, vous avez raison: le premier élément du tableau commence par 0. Mais j'ai annulé votre modification, car il n'était pas cohérent à mes yeux de garder cet exemple aussi simple que possible, car le changement myObj= {1:[Array-Data]en myObj= {0:[Array-Data]ne faisait pas partie de votre modification (si je me souviens bien)
Le Bndr

3
Utilisez la commande jQuery $ .makeArray (obj) pour cette api.jquery.com/jQuery.makeArray
DevlshOne

@DevlshOne la documentation que vous avez fournie indique: "Transformez un objet jQuery en tableau" Je ne pense pas que cela rentre dans la question OP
Alex

Réponses:


429
var myObj = {
    1: [1, 2, 3],
    2: [4, 5, 6]
};

var array = $.map(myObj, function(value, index) {
    return [value];
});


console.log(array);

Production:

[[1, 2, 3], [4, 5, 6]]

8
@Dogbert, pourriez-vous expliquer cela $.map? Chaque recherche que j'essaie de faire sur cela révèle juste beaucoup de liens vers jQuery ou la méthode de carte des tableaux.
crantok

21
Oh! Ignorez mon commentaire. Je n'avais pas remarqué la balise jQuery sur cette question.
crantok

8
existe-t-il un moyen de conserver les clés dans le nouveau tableau? chaque réponse sur le www que je vois n'a pas la conversion des clés.
TD_Nijboer le

55
Vous pouvez également le faire sans jQuery: Object.keys (myObject) .map (function (val) {return [val]});
Kris Erickson

3
@TD_Nijboer Oui, utilisez à la value.key = index; return [value];place dereturn [value];
Simon Arnold

742

Si vous recherchez une approche fonctionnelle:

var obj = {1: 11, 2: 22};
var arr = Object.keys(obj).map(function (key) { return obj[key]; });

Résulte en:

[11, 22]

La même chose avec une fonction de flèche ES6:

Object.keys(obj).map(key => obj[key])

Avec ES7, vous pourrez utiliser à la Object.valuesplace ( plus d'informations ):

var arr = Object.values(obj);

Ou si vous utilisez déjà Underscore / Lo-Dash:

var arr = _.values(obj)


3
Insatisfait de la réponse du haut, je viens d'écrire cette fonction presque exacte, je suis revenu pour la poster comme une réponse, j'ai fait défiler vers le bas, vu 170. Réalisé, mec Si je n'avais pas abandonné, je n'aurais pas eu à réfléchir :) devrait être au sommet. OP pls sélectionner comme réponse.
j03m

1
pour ceux pour qui cela n'est pas évident, les clés n'ont pas besoin d'être séquentielles (c'est-à-dire que dans cet exemple, elles sont 1 et 2 - mais elles pourraient tout aussi bien être une clé de chaîne ou un numéro non séquentiel
Simon_Weaver

Pour le premier paragraphe de code, il me manque un point-virgule. Pas certain de pourquoi.
JohnnyBizzle

@JohnnyBizzle Je suppose que votre linter nécessite d'écrire "return obj [key];" avec un point-virgule à la fin. JavaScript ne le fait pas cependant.
Joel Richard

30

Je pense que vous pouvez utiliser for inmais vérifier si la propriété n'est pas inerithed

myObj= {1:[Array-Data], 2:[Array-Data]}
var arr =[];
for( var i in myObj ) {
    if (myObj.hasOwnProperty(i)){
       arr.push(myObj[i]);
    }
}

EDIT - si vous le souhaitez, vous pouvez également conserver les index de votre objet, mais vous devez vérifier s'ils sont numériques (et vous obtenez des valeurs indéfinies pour les index manquants:

function isNumber(n) {
  return !isNaN(parseFloat(n)) && isFinite(n);
}

myObj= {1:[1,2], 2:[3,4]}
var arr =[];
for( var i in myObj ) {
    if (myObj.hasOwnProperty(i)){
        if (isNumber(i)){
            arr[i] = myObj[i];
        }else{
          arr.push(myObj[i]);
        }
    }
}

1
Vous auriez dû tester le code. $.maps'aplatira Array-Data.
Marko Dumic

vous avez raison, je ne l'ai pas testé avec un tableau et une carte l'aplatit! j'ai modifié la réponse
Nicola Peluchetti

@Nicola Peluchetti $ .makeArray () sonne bien, mais ce n'est pas ce que je cherchais, car il place simplement l'objet dans un élément de tableau: [{1:[Array-Data], 2:[Array-Data]}]et $.map()n'a pas non plus l'air réussi. Il semble que toutes les données de sous-tableau sont fusionnées en un seul tableau. array.lengthdevrait retourner 2 (car 2 éléments existent), mais il retourne 67 qui est le nombre de tous les éléments dans tous ["Array-Data"].
Le Bndr

@The Bndr j'ai posté une autre solution, mais vous pouvez utiliser la carte comme suggéré par dogbert
Nicola Peluchetti

Je pense que vous devez spécifier explicitement l'index du tableau ... comme arr[+i] = myObj[i];parce que (i) for(...in...)n'est pas garanti de retourner des propriétés dans n'importe quel ordre (ii) dans l'exemple de OP, les propriétés commencent à 1, pas à 0.
Salman A

30

Faites simplement

Object.values(obj);

C'est tout!


11
Object.values ​​est une méthode ES2017 qui n'est pas prise en charge dans Safari, IE, Node 6.
Phil Ricketts

25

Si vous connaissez l'index maximum dans votre objet, vous pouvez effectuer les opérations suivantes:

var myObj = {
    1: ['c', 'd'],
    2: ['a', 'b']
  },
  myArr;

myObj.length = 3; //max index + 1
myArr = Array.prototype.slice.apply(myObj);
console.log(myArr); //[undefined, ['c', 'd'], ['a', 'b']]


1
Il serait préférable que le code qui génère l'objet définisse également la longueur ou en fasse un tableau en premier lieu. Je ne m'attends pas à ce que ce soit possible, donc cette réponse pour moi n'est pas utile.
user2000095-tim

myObj.length = Object.keys(myObj).length
baldrs

19

Puisque ES5 Object.keys () renvoie un tableau contenant les propriétés définies directement sur un objet (à l'exclusion des propriétés définies dans la chaîne de prototype):

Object.keys(yourObject).map(function(key){ return yourObject[key] });

ES6 va encore plus loin avec les fonctions fléchées:

Object.keys(yourObject).map(key => yourObject[key]);

1
Pour l'ES5 actuel (bien que j'apprécie ES6): Object.keys (yourObject) .map (function (key) {return yourObject [key]});
David Zorychta

18

De nos jours, il existe un moyen simple de le faire: Object.values ​​() .

var myObj = {
    1: [1, 2, 3],
    2: [4, 5, 6]
};

console.log(Object.values(myObj));

Production:

[[1, 2, 3], [4, 5, 6]]

Cela ne nécessite pas jQuery, il a été défini dans ECMAScript 2017.
Il est pris en charge par tous les navigateurs modernes (oubliez IE).


si je fais quelque chose comme var state = { ingredient: { salad: 1, bacon: 1, } }, puis var HariOm = Object.values(state);suivi par console.log(typeof HariOM)elle affiche le type comme un objet. Ne devrait-il pas l'afficher sous forme de tableau?
iRohitBhatia

C'est tout à fait normal, vérifiez la référence ici: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… - Vous pouvez utiliserArray.isArray(HariOM)
Stopi

16

La meilleure méthode serait d'utiliser une fonction javascript uniquement:

var myArr = Array.prototype.slice.call(myObj, 0);

@Qwerty quel navigateur?
test30

Chrome. Testé avecvar myObj = {1:[1,2,3],2:[4,5,6]};
Qwerty

Notez que cette méthode fonctionne pour convertir des "objets de type tableau", ce qui signifie qu'ils doivent avoir une propriété "length" et des propriétés énumérées comptant à partir de 0. Donc, pour que l'exemple de @ Qwerty fonctionne, essayez ceci: {0: [1 , 2,3], 1: [4,5,6], longueur: 2}. Expérimentez avec les valeurs d'index et les valeurs de longueur, c'est un peu clément. Voici une bonne lecture sur le sujet: nfriedly.com/techblog/2009/06/… Passer à "Objets de type tableau".
Matt

15
x = [];
for( var i in myObj ) {
    x[i] = myObj[i];
}

10
Vous devriez utiliser push, sinon vous pourriez finir par créer un objet
Nicola Peluchetti

Peut-être que c'est une meilleure force pour int l'index. var bbb = {'1': 'a', '3': 'b'}; var x = []; for (var i in bbb) { x[parseInt(i)] = bbb[i];} console.log(x);
tres.14159

15

ECMASCRIPT 5:

Object.keys(myObj).map(function(x) { return myObj[x]; })

ECMASCRIPT 2015 ou ES6:

Object.keys(myObj).map(x => myObj[x])

13

Que diriez-vous jQuery.makeArray(obj)

Voici comment je l'ai fait dans mon application.


2
Cela renvoie [Object] pour l'exemple ci-dessus.
Kris Erickson du

1
juste une question d'ajouter [0] index et vous m'avez sauvé la vie :)
Raheel

6

La résolution est très simple

var my_obj = {1:[Array-Data], 2:[Array-Data]}
Object.keys(my_obj).map(function(property_name){ 
    return my_obj[property_name]; 
});


3

Fiddle Demo

Extension à la réponse de bjornd .

var myObj = {
    1: [1, [2], 3],
    2: [4, 5, [6]]
}, count = 0,
    i;
//count the JavaScript object length supporting IE < 9 also
for (i in myObj) {
    if (myObj.hasOwnProperty(i)) {
        count++;
    }
}
//count = Object.keys(myObj).length;// but not support IE < 9
myObj.length = count + 1; //max index + 1
myArr = Array.prototype.slice.apply(myObj);
console.log(myArr);


Référence

Array.prototype.slice ()

Function.prototype.apply ()

Object.prototype.hasOwnProperty ()

Object.keys ()


Je peux me tromper, mais devrait-il être préférable pour myObj d'être un énumérable à partir de 0? Sinon quoi, il me semble que nous avons là des problèmes où notre tableau serait: [undefined, [1, [2], 3]] (La première partie n'est pas définie car elle ne trouve pas myObj ['0'] et la dernière partie myObj ['2'] étant éjectée parce qu'après avoir lu .length, elle s'arrête à myObj ['1']?
Alex Werner

2

Si vous souhaitez conserver le nom des propriétés de l'objet en tant que valeurs. Exemple:

var fields = {
    Name: { type: 'string', maxLength: 50 },
    Age: { type: 'number', minValue: 0 }
}

Utilisez Object.keys(), Array.map()et Object.assign():

var columns = Object.keys( fields ).map( p => Object.assign( fields[p], {field:p} ) )

Résultat:

[ { field: 'Name', type: 'string', maxLength: 50 }, 
  { field: 'Age', type: 'number', minValue: 0 } ]

Explication:

Object.keys()énumère toutes les propriétés de la source; .map()applique la =>fonction à chaque propriété et renvoie un tableau; Object.assign()fusionne le nom et la valeur de chaque propriété.


1

J'ai fait une fonction personnalisée:

    Object.prototype.toArray=function(){
    var arr=new Array();
    for( var i in this ) {
        if (this.hasOwnProperty(i)){
            arr.push(this[i]);
        }
    }
    return arr;
};

0

Après quelques tests, voici un convertisseur général d'objet en fonction de tableau:

Vous avez l'objet:

var obj = {
    some_key_1: "some_value_1"
    some_key_2: "some_value_2"
};

La fonction:

function ObjectToArray(o)
{
    var k = Object.getOwnPropertyNames(o);
    var v = Object.values(o);

    var c = function(l)
    {
        this.k = [];
        this.v = [];
        this.length = l;
    };

    var r = new c(k.length);

    for (var i = 0; i < k.length; i++)
    {
        r.k[i] = k[i];
        r.v[i] = v[i];
    }

    return r;
}

Utilisation de la fonction:

var arr = ObjectToArray(obj);

Vous obtenez:

arr {
    key: [
        "some_key_1",
        "some_key_2"
    ],
    value: [
        "some_value_1",
        "some_value_2"
    ],
    length: 2
}

Ainsi, vous pouvez atteindre toutes les clés et valeurs comme:

for (var i = 0; i < arr.length; i++)
{
    console.log(arr.key[i] + " = " + arr.value[i]);
}

Résultat dans la console:

some_key_1 = some_value_1
some_key_2 = some_value_2

Éditer:

Ou sous forme de prototype:

Object.prototype.objectToArray = function()
{
    if (
        typeof this != 'object' ||
        typeof this.length != "undefined"
    ) {
        return false;
    }

    var k = Object.getOwnPropertyNames(this);
    var v = Object.values(this);

    var c = function(l)
    {
        this.k = [];
        this.v = [];
        this.length = l;
    };

    var r = new c(k.length);

    for (var i = 0; i < k.length; i++)
    {
        r.k[i] = k[i];
        r.v[i] = v[i];
    }

    return r;
};

Et puis utilisez comme:

console.log(obj.objectToArray);

0

Vous pouvez créer une fonction simple pour effectuer la conversion de objectvers array, quelque chose comme ça peut faire le travail pour vous en utilisant du javascript pur:

var objectToArray = function(obj) {
  var arr = [];
  if ('object' !== typeof obj || 'undefined' === typeof obj || Array.isArray(obj)) {
    return obj;
  } else {
    Object.keys(obj).map(x=>arr.push(obj[x]));
  }
  return arr;
};

ou celui-ci:

var objectToArray = function(obj) {
  var arr =[];
  for(let o in obj) {
    if (obj.hasOwnProperty(o)) {
      arr.push(obj[o]);
    }
  }
  return arr;
};

et appelez et utilisez la fonction comme ci-dessous:

var obj = {1:'a', 2:'b', 3:'c', 4:'d', 5:'e'};
objectToArray(obj); // return ["a", "b", "c", "d", "e"]

Également à l'avenir, nous aurons quelque chose appelé Object.values(obj), similaire à Object.keys(obj)qui renverra toutes les propriétés pour vous sous forme de tableau, mais pas encore pris en charge dans de nombreux navigateurs ...

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.