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?

Bndr
sumber
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]]
Dogbert
sumber
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)
Joel Richard
sumber
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]);
        }
    }
}
Nicola Peluchetti
sumber
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!

Pila
sumber
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']]

bjornd
sumber
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]);
Maxdow
sumber
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).

Stopi
sumber
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);
Friedrich
sumber
@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];
}
tak seorangpun
sumber
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])
Aditya Singh
sumber
13

Bagaimana tentang jQuery.makeArray(obj)

Ini adalah bagaimana saya melakukannya di aplikasi saya.

Sankalp Singha
sumber
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]; 
});
Ivan Fretes
sumber
6

Cara ES8 menjadi mudah :

Dokumentasi resmi

    const obj = { x: 'xxx', y: 1 };
    let arr = Object.values(obj); // ['xxx', 1]
    console.log(arr);

Mamba hitam
sumber
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 ()

Tushar Gupta - curioustushar
sumber
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.

Supersharp
sumber
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;
};
mailmindlin
sumber
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);
Kostas
sumber
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 ...

Alireza
sumber