Konvertieren eines JS-Objekts in ein Array mit jQuery


417

Meine Anwendung erstellt ein JavaScript-Objekt wie folgt:

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

Aber ich brauche dieses Objekt als Array.

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

Also habe ich versucht, dieses Objekt in ein Array zu konvertieren, indem ich $.eachdas Objekt durchlaufen und das Element einem Array hinzugefügt habe:

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

Gibt es eine bessere Möglichkeit, ein Objekt in ein Array oder eine Funktion zu konvertieren?


1
Sollten die Array-Indizes mit den Schlüsseln im Originalobjekt identisch sein? Der erste Index in einem Array ist immer 0, aber Ihr eigener Code und die meisten Antworten (einschließlich des akzeptierten) scheinen ihn zu ignorieren. Trotzdem haben Sie meine Bearbeitung auf das gewünschte Beispielergebnis zurückgesetzt.
Imre

1
Ja, Sie haben Recht: Das erste Array-Element beginnt mit 0. Aber ich habe Ihre Bearbeitung zurückgesetzt, weil es in meinen Augen nicht konsistent war, dieses Beispiel so einfach wie möglich zu halten, weil das Ändern myObj= {1:[Array-Data]zu myObj= {0:[Array-Data]nicht Teil Ihrer Bearbeitung war (wie ich mich recht erinnere).
Die Bndr

3
Verwenden Sie den Befehl jQuery $ .makeArray (obj) für diesen api.jquery.com/jQuery.makeArray
DevlshOne

@ DevlshOne die Dokumentation, die Sie zur Verfügung gestellt haben, sagt: "Verwandeln Sie ein jQuery-Objekt in ein Array" Ich glaube nicht, dass dies auf OP-Frage passt
Alex

Antworten:


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

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


console.log(array);

Ausgabe:

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

8
@ Dogbert, bitte kannst du das erklären $.map? Bei jeder Suche, die ich hier versuche, werden nur viele Links zu jQuery oder der Kartenmethode von Arrays angezeigt.
Crantok

21
D'oh! Ignoriere meinen Kommentar. Ich hatte das jQuery-Tag bei dieser Frage nicht bemerkt.
Crantok

8
Gibt es eine Möglichkeit, die Schlüssel im neuen Array zu verwalten? Bei jeder Antwort im Internet fehlt die Konvertierung von Schlüsseln.
TD_Nijboer

55
Sie können dies auch ohne jQuery tun: Object.keys (myObject) .map (function (val) {return [val]});
Kris Erickson

3
@TD_Nijboer Ja, verwenden Sie value.key = index; return [value];anstelle vonreturn [value];
Simon Arnold

742

Wenn Sie nach einem funktionalen Ansatz suchen:

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

Ergebnisse in:

[11, 22]

Das gleiche gilt für eine ES6-Pfeilfunktion:

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

Mit ES7 können Sie Object.valuesstattdessen Folgendes verwenden ( weitere Informationen ):

var arr = Object.values(obj);

Oder wenn Sie bereits Underscore / Lo-Dash verwenden:

var arr = _.values(obj)


3
Unzufrieden mit der Top-Antwort, schrieb ich gerade diese fast exakte Funktion, kam zurück, um sie als Antwort zu posten, scrollte nach unten, sah 170. Realisiert, Mann Wenn ich nicht aufgegeben hätte, hätte ich nicht darüber nachdenken müssen :) Dies sollte oben sein. OP pls als Antwort auswählen.
j03m

1
Für alle, für die dies nicht offensichtlich ist, müssen die Schlüssel nicht sequentiell sein (dh in diesem Beispiel sind sie 1 und 2 - aber sie können genauso gut ein Zeichenfolgenschlüssel oder eine nicht fortlaufende Nummer sein
Simon_Weaver

Für den ersten Absatz des Codes fehlt ein Semikolon. Nicht sicher warum.
JohnnyBizzle

@JohnnyBizzle Ich denke, dein Linter muss schreiben "return obj [key];" mit einem Semikolon am Ende. JavaScript jedoch nicht.
Joel Richard

30

Ich denke, Sie können verwenden, for inaber überprüfen, ob die Eigenschaft nicht inerithed ist

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

BEARBEITEN - Wenn Sie möchten, können Sie auch die Indizes Ihres Objekts beibehalten. Sie müssen jedoch überprüfen, ob sie numerisch sind (und Sie erhalten undefinierte Werte für fehlende Indizes:

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
Sie sollten den Code getestet haben. $.mapwird abflachen Array-Data.
Marko Dumic

Sie haben Recht, ich habe es nicht mit einem Array getestet und die Karte flacht es ab! Ich habe die Antwort geändert
Nicola Peluchetti

@Nicola Peluchetti $ .makeArray () klingt gut, ist aber nicht das, wonach ich gesucht habe, weil es das Objekt einfach einem Array-Element zuordnet: [{1:[Array-Data], 2:[Array-Data]}]Und $.map()auch nicht erfolgreich aussieht. Es scheint, dass alle Sub-Array-Daten zu einem Array zusammengeführt werden. array.lengthsollte 2 zurückgeben (da 2 Elemente vorhanden sind), aber es wird 67 zurückgegeben, was die Anzahl aller Elemente in allen ["Array-Daten"] ist.
Die Bndr

@ The Bndr Ich habe eine andere Lösung gepostet, aber Sie können die Karte verwenden, wie von Dogbert vorgeschlagen
Nicola Peluchetti

Ich denke, Sie müssen den Array-Index explizit angeben ... wie, arr[+i] = myObj[i];weil (i) for(...in...)nicht garantiert wird, dass Eigenschaften in beliebiger Reihenfolge zurückgegeben werden. (Ii) In OPs Beispiel beginnen die Eigenschaften bei 1, nicht bei 0.
Salman A

30

Einfach machen

Object.values(obj);

Das ist alles!


11
Object.values ​​ist eine ES2017-Methode, die in Safari, IE, Knoten 6 nicht unterstützt wird.
Phil Ricketts

25

Wenn Sie den maximalen Index in Ihrem Objekt kennen, können Sie Folgendes tun:

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
Es wäre weitaus besser, wenn der Code, der das Objekt generiert, auch die Länge festlegt oder es überhaupt zu einem Array macht. Ich erwarte auch nicht, dass dies möglich ist, daher ist diese Antwort für mich nicht hilfreich.
user2000095-tim

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

19

Da ES5 Object.keys () ein Array zurückgibt, das die direkt für ein Objekt definierten Eigenschaften enthält (mit Ausnahme der in der Prototypkette definierten Eigenschaften):

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

ES6 geht mit Pfeilfunktionen noch einen Schritt weiter:

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

1
Für das aktuelle ES5 (obwohl mir ES6 gefällt): Object.keys (yourObject) .map (function (key) {return yourObject [key]});
David Zorychta

18

Heutzutage gibt es einen einfachen Weg, dies zu tun: Object.values ​​() .

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

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

Ausgabe:

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

Dies erfordert keine jQuery, es wurde in ECMAScript 2017 definiert.
Es wird von jedem modernen Browser unterstützt (IE vergessen).


Wenn ich so etwas mache var state = { ingredient: { salad: 1, bacon: 1, } }und dann var HariOm = Object.values(state);folgt console.log(typeof HariOM), wird der Typ als Objekt angezeigt. Sollte es nicht als Array angezeigt werden?
iRohitBhatia

Das ist völlig normal, überprüfen Sie die Referenz hier: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… - Sie können verwendenArray.isArray(HariOM)
Stopi

16

Die beste Methode wäre die Verwendung einer Javascript-only-Funktion:

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

@ Qwerty welcher Browser?
Test30

Chrom. Getestet mitvar myObj = {1:[1,2,3],2:[4,5,6]};
Qwerty

Beachten Sie, dass diese Methode zum Konvertieren von "Array-ähnlichen Objekten" funktioniert. Dies bedeutet, dass sie eine "Längen" -Eigenschaft und aufgezählte Eigenschaften haben müssen, die von 0 aufwärts zählen. Damit @ Qwertys Beispiel funktioniert, versuchen Sie Folgendes: {0: [1 , 2,3], 1: [4,5,6], Länge: 2}. Experimentieren Sie mit Indexwerten und Längenwerten, es ist ein wenig nachsichtig. Hier ist eine gute Lektüre zum Thema: nfriedly.com/techblog/2009/06/… Springe runter zu "Array-ähnliche Objekte".
Matt

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

10
Sie sollten Push verwenden, da Sie sonst möglicherweise ein Objekt erstellen
Nicola Peluchetti

Vielleicht ist es eine bessere Kraft, den Index zu int. 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 oder ES6:

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

13

Wie wäre es mit jQuery.makeArray(obj)

So habe ich es in meiner App gemacht.


2
Dies gibt [Objekt] für das obige Beispiel zurück.
Kris Erickson

1
Nur eine Frage des Hinzufügens von [0] Index und du hast mein Leben gerettet :)
Raheel

6

Das Lösen ist sehr einfach

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

Erweiterung zur Antwort von 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);


Referenz

Array.prototype.slice ()

Function.prototype.apply ()

Object.prototype.hasOwnProperty ()

Object.keys ()


Ich könnte mich irren, aber sollte es besser sein, wenn myObj ab 0 aufzählbar ist? Sonst scheint es mir, dass wir dort Probleme haben, bei denen unser Array wäre: [undefiniert, [1, [2], 3]] (Der erste Teil ist undefiniert, weil er myObj ['0'] nicht findet. und der letzte Teil myObj ['2'] wird ausgeworfen, weil es nach dem Lesen von .length bei myObj ['1'] aufhört?
Alex Werner

2

Wenn Sie den Namen der Objekteigenschaften als Werte beibehalten möchten. Beispiel:

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

Verwenden Sie Object.keys(), Array.map()und Object.assign():

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

Ergebnis:

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

Erläuterung:

Object.keys()listet alle Eigenschaften der Quelle auf; .map()wendet die =>Funktion auf jede Eigenschaft an und gibt ein Array zurück; Object.assign()führt Name und Wert für jede Eigenschaft zusammen.


1

Ich habe eine benutzerdefinierte Funktion erstellt:

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

0

Nach einigen Tests ist hier ein allgemeiner Objekt-zu-Array-Funktionskonverter:

Sie haben das Objekt:

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

Die Funktion:

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;
}

Funktionsgebrauch:

var arr = ObjectToArray(obj);

Du erhältst:

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

Dann können Sie alle Schlüssel und Werte erreichen wie:

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

Ergebnis in der Konsole:

some_key_1 = some_value_1
some_key_2 = some_value_2

Bearbeiten:

Oder in Prototypform:

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;
};

Und dann benutze wie:

console.log(obj.objectToArray);

0

Sie können eine einfache Funktion erstellen, um die Konvertierung von objectnach arraydurchzuführen. So etwas kann die Arbeit für Sie mit reinem Javascript erledigen:

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;
};

oder dieses:

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

und rufen Sie die folgende Funktion auf und verwenden Sie sie:

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

Auch in Zukunft werden wir etwas haben Object.values(obj), Object.keys(obj)das alle Eigenschaften für Sie als Array zurückgibt, aber in vielen Browsern noch nicht unterstützt wird ...

Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.