Mengonversi objek JS ke array menggunakan jQuery


417

Aplikasi saya membuat objek JavaScript, seperti berikut ini:

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

Tapi saya butuh objek ini sebagai array.

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

Jadi saya mencoba untuk mengkonversi objek ini ke array dengan mengulangi $.eachmelalui objek dan menambahkan elemen ke array:

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

Apakah ada cara yang lebih baik untuk mengonversi objek ke array atau mungkin fungsi?


1
Haruskah indeks array sama dengan kunci pada objek asli? Indeks pertama dalam array selalu 0, tetapi kode Anda sendiri dan sebagian besar jawaban (termasuk yang diterima) tampaknya mengabaikannya; namun, Anda telah mengembalikan hasil edit saya ke hasil contoh yang diinginkan.
Imre

1
Ya, Anda benar: pertama Array elemen dimulai dengan 0. Tapi saya dikembalikan mengedit Anda, karena tidak konsisten dalam mata saya untuk menjaga bahwa contoh sederhana mungkin, karena mengubah myObj= {1:[Array-Data]ke myObj= {0:[Array-Data]bukan bagian dari suntingan Anda (seperti yang saya ingat benar)
The Bndr

3
Gunakan perintah jQuery $ .makeArray (obj) untuk api.jquery.com/jQuery.makeArray
DevlshOne

@DevlshOne dokumentasi yang Anda berikan mengatakan: "Ubah objek jQuery menjadi array" Saya tidak berpikir ini cocok dengan pertanyaan OP
Alex

Jawaban:


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

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


console.log(array);

Keluaran:

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

8
@Dogbert, tolong bisakah Anda menjelaskannya $.map? Setiap pencarian yang saya coba lakukan pada ini hanya menghasilkan banyak tautan ke jQuery atau metode peta array.
crantok

21
Doh! Abaikan komentar saya. Saya belum memperhatikan tag jQuery pada pertanyaan ini.
crantok

8
apakah ada cara untuk mempertahankan kunci dalam array baru? setiap jawaban di www yang saya lihat tidak memiliki konversi kunci.
TD_Nijboer

55
Anda juga dapat melakukan ini tanpa jQuery: Object.keys (myObject) .map (function (val) {return [val]});
Kris Erickson

3
@TD_Nijboer Ya, gunakan value.key = index; return [value];sebagai gantireturn [value];
Simon Arnold

742

Jika Anda mencari pendekatan fungsional:

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

Hasil dalam:

[11, 22]

Sama dengan fungsi panah ES6:

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

Dengan ES7 Anda akan dapat menggunakan Object.values( informasi lebih lanjut ):

var arr = Object.values(obj);

Atau jika Anda sudah menggunakan Underscore / Lo-Dash:

var arr = _.values(obj)


3
Tidak puas dengan jawaban teratas, saya hanya menulis fungsi yang hampir tepat ini, kembali mempostingnya sebagai jawaban, menggulir ke bawah, melihat 170. Sadar, man Jika saya tidak menyerah saya tidak akan harus berpikir :) Ini harus di atas. OP mohon pilih sebagai jawaban.
j03m

1
untuk siapa saja yang tidak jelas, kunci tidak perlu berurutan (yaitu dalam contoh ini adalah 1 dan 2 - tetapi mereka bisa juga menjadi kunci string atau nomor tidak berurutan
Simon_Weaver

Untuk paragraf pertama kode saya kehilangan titik koma. Tidak yakin kenapa.
JohnnyBizzle

@JohnnyBizzle Saya kira linter Anda perlu menulis "return obj [key];" dengan titik koma pada akhirnya. JavaScript tidak melakukannya.
Joel Richard

30

Saya pikir Anda dapat menggunakan for intetapi memeriksa apakah properti tidak inerithed

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

EDIT - jika Anda mau, Anda juga bisa menyimpan indeks objek Anda, tetapi Anda harus memeriksa apakah itu numerik (dan Anda mendapatkan nilai yang tidak ditentukan untuk indeks yang hilang:

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
Anda harus menguji kodenya. $.mapakan rata Array-Data.
Marko Dumic

Anda benar saya tidak mengujinya dengan array dan memetakannya rata! saya mengubah jawabannya
Nicola Peluchetti

@Nicola Peluchetti $ .makeArray () kedengarannya bagus, tapi bukan itu yang saya cari, karena itu hanya menempatkan objek ke elemen array: [{1:[Array-Data], 2:[Array-Data]}]Dan $.map()juga tidak terlihat berhasil. Terlihat bahwa semua data Sub-Array digabung menjadi satu larik. array.lengthharus mengembalikan 2 (karena 2 elemen ada), tetapi mengembalikan 67 yang merupakan jumlah semua elemen dalam semua ["Array-Data"].
Bndr

@The Bndr saya memposting solusi lain, tetapi Anda dapat menggunakan peta seperti yang disarankan oleh dogbert
Nicola Peluchetti

Saya pikir Anda harus secara eksplisit menentukan indeks array ... seperti arr[+i] = myObj[i];karena (i) for(...in...)tidak dijamin untuk mengembalikan properti dalam urutan apa pun (ii) dalam contoh OP properti mulai dari 1, bukan 0.
Salman A

30

Lakukan saja

Object.values(obj);

Itu saja!


11
Object.values ​​adalah metode ES2017 yang tidak didukung di Safari, IE, Node 6.
Phil Ricketts

25

Jika Anda tahu indeks maksimum di objek Anda, Anda dapat melakukan hal berikut:

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
Akan jauh lebih baik untuk kode yang menghasilkan objek untuk juga mengatur panjang atau memang membuatnya menjadi array di tempat pertama. Saya tidak berharap keduanya mungkin, jadi jawaban ini bagi saya tidak membantu.
user2000095-tim

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

19

Karena ES5 Object.keys () mengembalikan array yang berisi properti yang didefinisikan langsung pada objek (tidak termasuk properti yang didefinisikan dalam rantai prototipe):

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

ES6 membawanya selangkah lebih maju dengan fungsi panah:

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

1
Untuk ES5 saat ini (walaupun saya menikmati ES6): Object.keys (yourObject) .map (function (key) {return yourObject [key]});
David Zorychta

18

Saat ini, ada cara sederhana untuk melakukan ini: Object.values ​​() .

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

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

Keluaran:

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

Ini tidak diperlukan jQuery, sudah didefinisikan dalam ECMAScript 2017.
Ini didukung oleh setiap browser modern (lupakan IE).


jika saya melakukan sesuatu seperti var state = { ingredient: { salad: 1, bacon: 1, } }dan kemudian var HariOm = Object.values(state);diikuti console.log(typeof HariOM)itu menampilkan tipe sebagai objek. Tidakkah seharusnya menampilkannya sebagai array?
iRohitBhatia

Itu benar-benar normal, periksa rujukannya di sini: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… - Anda dapat menggunakanArray.isArray(HariOM)
Stopi

16

Metode terbaik adalah menggunakan fungsi javascript -hanya:

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

@Qwerty browser yang mana?
test30

Chrome. Diuji denganvar myObj = {1:[1,2,3],2:[4,5,6]};
Qwerty

Perhatikan bahwa metode ini berfungsi untuk mengonversi "objek mirip array", yang berarti mereka harus memiliki properti "panjang" dan properti enumerasi dihitung dari 0. Jadi, untuk membuat contoh karya @ Qwerty, coba ini: {0: [1 , 2,3], 1: [4,5,6], panjang: 2}. Bereksperimen dengan nilai indeks dan nilai panjang, ini sedikit toleran. Berikut ini adalah bacaan yang bagus tentang topik ini: nfriedly.com/techblog/2009/06/... Lewati ke "Array-like Objects".
Matt

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

10
Anda harus menggunakan dorongan, jika tidak, Anda mungkin akan menciptakan objek
Nicola Peluchetti

Mungkin ini adalah kekuatan yang lebih baik untuk memasuki indeks. 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 atau ES6:

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

13

Bagaimana tentang jQuery.makeArray(obj)

Ini adalah bagaimana saya melakukannya di aplikasi saya.


2
Ini mengembalikan [Objek] untuk contoh di atas.
Kris Erickson

1
hanya masalah menambahkan indeks [0] dan Anda menyelamatkan hidup saya :)
Raheel

6

Pemecahannya sangat sederhana

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

Perluasan untuk menjawab 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);


Referensi

Array.prototype.slice ()

Function.prototype.apply ()

Object.prototype.hasOwnProperty ()

Object.keys ()


Saya mungkin salah, tetapi haruskah lebih baik untuk myObj menjadi enumerable mulai dari 0? Kalau tidak, menurut saya ada masalah di mana Array kita adalah: [tidak terdefinisi, [1, [2], 3]] (Bagian pertama tidak terdefinisi karena tidak menemukan myObj ['0'] dan bagian terakhir myObj ['2'] dikeluarkan karena setelah membaca. panjangnya berhenti di myObj ['1']?
Alex Werner

2

Jika Anda ingin menyimpan nama properti objek sebagai nilai. Contoh:

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

Gunakan Object.keys(), Array.map()dan Object.assign():

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

Hasil:

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

Penjelasan:

Object.keys()menyebutkan semua properti dari sumber; .map()menerapkan =>fungsi untuk setiap properti dan mengembalikan Array; Object.assign()menggabungkan nama dan nilai untuk setiap properti.


1

Saya membuat fungsi khusus:

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

0

Setelah beberapa tes, berikut ini adalah objek umum untuk fungsi array konverter:

Anda memiliki objek:

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

Fungsi:

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

Fungsi Gunakan:

var arr = ObjectToArray(obj);

Anda mendapatkan:

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

Jadi, Anda dapat menjangkau semua kunci & nilai seperti:

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

Hasil di konsol:

some_key_1 = some_value_1
some_key_2 = some_value_2

Edit:

Atau dalam bentuk prototipe:

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

Dan kemudian gunakan seperti:

console.log(obj.objectToArray);

0

Anda dapat membuat fungsi sederhana untuk melakukan konversi dari objectke array, sesuatu seperti ini dapat melakukan pekerjaan untuk Anda menggunakan javascript murni:

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

atau yang ini:

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

dan panggil dan gunakan fungsi seperti di bawah ini:

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

Juga di masa depan kami akan memiliki sesuatu yang disebut Object.values(obj), mirip dengan Object.keys(obj)yang akan mengembalikan semua properti untuk Anda sebagai array, tetapi belum didukung di banyak browser ...

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.