jQueryを使用してJSオブジェクトを配列に変換する


417

私のアプリケーションは、次のようなJavaScriptオブジェクトを作成します。

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

しかし、私はこのオブジェクトを配列として必要とします。

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

そのため、オブジェクト全体を反復処理し$.each、要素を配列に追加することで、このオブジェクトを配列に変換しようとしました。

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

オブジェクトを配列またはおそらく関数に変換するより良い方法はありますか?


1
配列のインデックスは元のオブジェクトのキーと同じである必要がありますか?配列の最初のインデックスは常に0ですが、独自のコードとほとんどの回答(受け入れられたものを含む)はそれを無視しているようです。それでも、あなたは私の編集を望ましい例の結果に戻しました。
Imre

1
はい、あなたは正しいです。最初の配列要素は0で始まります。しかし、変更myObj= {1:[Array-Data]myObj= {0:[Array-Data]編集の一部ではなかったので(そのことを覚えているように)、その例をできるだけ単純にすることは私の目には一貫していなかったため、編集を元に戻しました。
Bndr 2014

3
そのapi.jquery.com/jQuery.makeArrayに jQuery $ .makeArray(obj)コマンドを使用します
DevlshOne

@DevlshOneあなたが提供したドキュメントには、「jQueryオブジェクトを配列に変換する」と書かれています。これはOPの質問には当てはまりません
Alex

回答:


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

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


console.log(array);

出力:

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

8
@Dogbert、説明してもらえます$.mapか?私がこれでやろうとするすべての検索は、jQueryまたは配列のmapメソッドへの多くのリンクを見つけるだけです。
crantok 14

21
やった!コメントを無視します。この質問のjQueryタグに気づかなかった。
クラントック2014

8
新しい配列でキーを維持する方法はありますか?wwwでのすべての回答には、キーの変換が欠けています。
TD_Nijboer 14

55
jQueryなしでこれを行うこともできます。Object.keys(myObject).map(function(val){return [val]});
クリスエリクソン2014

3
@TD_Nijboerはい、value.key = index; return [value];代わりに使用しますreturn [value];
Simon Arnold

742

機能的なアプローチを探している場合:

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

結果:

[11, 22]

ES6の矢印関数でも同じです。

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

ES7 Object.valuesでは、代わりに使用できます(詳細):

var arr = Object.values(obj);

または、すでにアンダースコア/ローダッシュを使用している場合:

var arr = _.values(obj)


3
一番上の答えに不満だったので、私はこのほぼ正確な関数を書き、答えとして投稿に戻って、下にスクロールして、170を表示しました。実現しました。一番上になるはずです。OP plsが回答として選択します。
j03m 2016

1
これが明らかでない人にとっては、キーは連続的である必要はありません(つまり、この例では、キーは1と2ですが、文字列キーまたは非連続番号
でもかまいません

コードの最初の段落で、セミコロンが欠落しています。なぜだかわかりません。
JohnnyBizzle

@JohnnyBizzleあなたのリンターが「return obj [key];」を書く必要があると思います。最後にセミコロンを付けます。JavaScriptはしません。
Joel Richard

30

私はあなたが使うことができると思いますがfor in、プロパティが無理ではないかどうかを確認します

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

編集-必要に応じてオブジェクトのインデックスを保持することもできますが、それらが数値であるかどうかを確認する必要があります(不足しているインデックスに対して未定義の値を取得します:

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
コードをテストする必要があります。$.map平らになりArray-Dataます。
Marko Dumic '28

あなたは正しい、私はそれを配列でテストしなかったし、マップはそれを平坦化した!私は答えを変更しました
ニコラ・ペルチェッティ

@Nicola Peluchetti $ .makeArray()が良いに聞こえるが、それは単に配列要素にオブジェクトを置くので、私が探していたものではありません。[{1:[Array-Data], 2:[Array-Data]}]そして、$.map()また成功は見えません。これにより、すべてのサブ配列データが1つの配列にマージされます。array.length(要素が2つ存在するため)2を返す必要がありますが、すべての["Array-Data"]内のすべての要素の数である67を返します。
Bndr

@The Bndr私は別のソリューションを投稿しましたが、dogbertによって提案されたマップを使用できます
Nicola Peluchetti '28

私はあなたが明示的のような...配列のインデックスを指定する必要がありますと思いますarr[+i] = myObj[i];(私は)ので、for(...in...)任意の順序(ⅱ)OPの例では、プロパティは1から開始し、0でないに戻りプロパティに保証するものではありません
サルマンA

30

単に行う

Object.values(obj);

それで全部です!


11
Object.valuesはサファリ、IE、ノード6でサポートされていないES2017方法である
フィル・リケッツ

25

オブジェクトの最大インデックスがわかっている場合は、次の操作を実行できます。

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
オブジェクトを生成しているコードが長さを設定するか、最初に配列にすることははるかに優れています。どちらも可能だとは思わないので、この答えは役に立ちません。
user2000095-tim 2013

myObj.length = Object.keys(myObj).length
はげ頭16

19

ES5のObject.keys()は、オブジェクトで直接定義されたプロパティを含む配列を返します(プロトタイプチェーンで定義されたプロパティを除く)。

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

ES6は、矢印関数でさらに一歩進んでいます:

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

1
現在のES5の場合(私はES6を楽しんでいますが):Object.keys(yourObject).map(function(key){return yourObject [key]});
David Zorychta、2015

18

今日、これを行う簡単な方法があります:Object.values()

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

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

出力:

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

これはjQueryを必要とせず、ECMAScript 2017で定義されてい
ます。すべての最新のブラウザー(IEを除く)でサポートされています。


私が次のようなことをするvar state = { ingredient: { salad: 1, bacon: 1, } }と、 var HariOm = Object.values(state);その後console.log(typeof HariOM)にタイプがオブジェクトとして表示されます それを配列として表示するべきではありませんか?
iRohitBhatia

それは完全に正常です、ここでリファレンスを確認してください:developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…-使用できますArray.isArray(HariOM)
Stopi

16

最善の方法は、javascriptのみの関数を使用することです。

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

@Qwertyどのブラウザ?
test30 2014

クロム。テスト済みvar myObj = {1:[1,2,3],2:[4,5,6]};
Qwerty 2014

このメソッドは「配列のようなオブジェクト」を変換するために機能することに注意してください。つまり、それらは「length」プロパティと0からカウントアップする列挙されたプロパティを持つ必要があるということです。 、2,3]、1:[4,5,6]、長さ:2}。インデックス値と長さの値を試してみてください。少し寛大です。トピックに関する良い読み物を以下に示します:nfriedly.com/techblog/2009/06/… 「配列のようなオブジェクト」にスキップしてください。
マット

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

10
プッシュを使用する必要があります。そうしないと、オブジェクトを作成してしまう可能性があります
Nicola Peluchetti '28

多分それはインデックスをintするためのいくつかのより良い力です。var bbb = {'1': 'a', '3': 'b'}; var x = []; for (var i in bbb) { x[parseInt(i)] = bbb[i];} console.log(x);
tres.14159 2016



6

解決は非常に簡単です

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

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


参照

Array.prototype.slice()

Function.prototype.apply()

Object.prototype.hasOwnProperty()

Object.keys()


私は間違っているかもしれませんが、myObjが0から始まる列挙可能である方が良いでしょうか?それ以外に、配列が次のような問題があるように思われます:[undefined、[1、[2]、3]](myObj ['0']が見つからないため、最初の部分は未定義ですそして、最後の部分myObj ['2']は、.lengthを読み取った後、myObj ['1']で停止するために排出されますか?
Alex Werner

2

オブジェクトのプロパティの名前を値として保持する場合。例:

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

使用しObject.keys()Array.map()そしてObject.assign()

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

結果:

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

説明:

Object.keys()ソースのすべてのプロパティを列挙します。関数を各プロパティに.map()適用し=>、配列を返します。Object.assign()各プロパティの名前と値をマージします。


1

カスタム関数を作成しました:

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

0

いくつかのテストの後、配列関数コンバーターへの一般的なオブジェクトを次に示します。

あなたはオブジェクトを持っています:

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

関数:

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

関数の使用:

var arr = ObjectToArray(obj);

あなたが得る:

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

したがって、次のようなすべてのキーと値に到達できます。

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

コンソールの結果:

some_key_1 = some_value_1
some_key_2 = some_value_2

編集:

またはプロトタイプ形式:

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

そして、次のように使用します:

console.log(obj.objectToArray);

0

からobjectへの変換を行う単純な関数を作成できますarray。次のようなものは、純粋なJavaScriptを使用して処理を実行できます。

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

またはこれ:

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

そして、以下のように関数を呼び出して使用します。

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

また、将来的には、と呼ばれるものがありますObject.values(obj)に似て、Object.keys(obj)配列としてあなたのためのすべてのプロパティを返します。これを、まだ多くのブラウザでサポートされていません...

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.