web-dev-qa-db-ja.com

lodashを使ってオブジェクトを配列に変換する

Lodashで大きなobjectをarrayに変換するにはどうすればいいですか？

例：

var obj = {
    22: {name:"John", id:22, friends:[5,31,55], works:{books:[], films:[],}
    12: {name:"Ivan", id:12, friends:[2,44,12], works:{books:[], films:[],}
}

// transform to 
var arr = [{name:"John", id:22...},{name:"Ivan", id:12...}]

ありがとうございます。

javascriptarraysobjectlodash
133
siavolt

できるよ

var arr = _.values(obj);

ドキュメントについては こちら を参照してください。

217
Daniel Schmidt
_.toArray(obj);

として出力：

[
  {
    "name": "Ivan",
    "id": 12,
    "friends": [
      2,
      44,
      12
    ],
    "works": {
      "books": [],
      "films": []
    }
  },
  {
    "name": "John",
    "id": 22,
    "friends": [
      5,
      31,
      55
    ],
    "works": {
      "books": [],
      "films": []
    }
  }
]"
34
Jivings

私にとっては、これはうまくいった：

_.map(_.toPairs(data), d => _.fromPairs([d]));

回る

{"a":"b", "c":"d", "e":"f"}

に

[{"a":"b"}, {"c":"d"}, {"e":"f"}]
19
NoNine

誰かが興味を持っているなら現代のネイティブソリューション：

const arr = Object.keys(obj).map(key => ({ key, value: obj[key] }));

改善してくれてありがとう@KoushikChatterjee

18
Dominic

キー（この場合はid）を各配列項目のプロパティとして保持したい場合は、次のようにします。

const arr = _(obj) //wrap object so that you can chain lodash methods
            .mapValues((value, id)=>_.merge({}, value, {id})) //attach id to object
            .values() //get the values of the result
            .value() //unwrap array of objects
11
Sello Mkantjwa

2017年の更新： Object.values 、lodash values および toArray します。そしてキーを保存するために マップ そして スプレッド演算子 ナイスで遊ぶ：

// import { toArray, map } from 'lodash'
const map = _.map

const input = {
  key: {
    value: 'value'
  }
}

const output = map(input, (value, key) => ({
  key,
  ...value
}))

console.log(output)
// >> [{key: 'key', value: 'value'}])
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.js"></script>
7
Vladimir Chervanev

プレーンなJavaScriptの（ECMAScript-2016） Object.values を使ってオブジェクトを配列に変換する：

var obj = {
    22: {name:"John", id:22, friends:[5,31,55], works:{books:[], films:[]}},
    12: {name:"Ivan", id:12, friends:[2,44,12], works:{books:[], films:[]}}
}

var values = Object.values(obj)

console.log(values);

キーも保持したい場合は、次のように Object.entries および Array#map を使用してください。

var obj = {
    22: {name:"John", id:22, friends:[5,31,55], works:{books:[], films:[]}},
    12: {name:"Ivan", id:12, friends:[2,44,12], works:{books:[], films:[]}}
}

var values = Object.entries(obj).map(([k, v]) => ({[k]: v}))

console.log(values);
7
BlackBeard

var arr = _.map(obj)

lodashと一緒に（underscoreとobjectの両方の）_.map関数を使用することもできます。これは内部的にそのケースを処理し、各値およびキーを反復対象で反復し、最後に配列を返します。実際には、値の配列だけが必要な場合は、反復対象なし（単に​​_.map(obj)）で使用することができます。良いところは、その間に何らかの変換が必要な場合は、一度にそれを実行できることです。

例：

var obj = {
    key1: {id: 1, name: 'A'},
    key2: {id: 2, name: 'B'},
    key3: {id: 3, name: 'C'}
};

var array1 = _.map(obj, v=>v);
console.log('Array 1: ', array1);

/*Actually you don't need the callback v=>v if you
are not transforming anything in between, v=>v is default*/

//SO simply you can use
var array2 = _.map(obj);
console.log('Array 2: ', array2);
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.js"></script>

ただし、オブジェクトを変換したい場合は、キーを保持する必要がある場合でも、mapに追加の引数を付けてそれを実行し（_.map(obj, (v, k) => {...}）、必要に応じて使用することができます。

しかし、これに対する他のVanilla JSソリューションがあります（すべてのlodashソリューションが純粋なJSバージョンであるはずです）。

  • Object.keys、次にmapを値に
  • Object.values（ES-2017）
  • 各キー/値ペアにObject.entries、次にmap（ES-2017）
  • for...inループし、各キーを値の取得に使用します

そしてもっとたくさん。しかし、この質問はlodashに対するものであり（そして既に誰かがそれを使っていると仮定します）、バージョン、メソッドのサポート、そしてそれらが見つからない場合のエラー処理について考える必要はありません。

_.values（特定の目的のためにより読みやすい）のような他のlodashの解決策、またはペアを取得してからマップすることなどがあります。しかし、keysを保持したり値を少し変換したりする必要があるため、コードに将来更新できるような柔軟性が必要な場合は、この回答で紹介したように単一の_.mapを使用することが最善の解決策です。読みやすさもそれほど難しくありません。

5
Koushik Chatterjee

あなたが期待している結果を得るにはかなりの数の方法があります。それらをカテゴリに分けてみましょう：

ES6値のみ：

これの主な方法は Object.values です。しかし Object.keys と Array.map を使えば期待どおりの結果になります。

Object.values(obj)
Object.keys(obj).map(k => obj[k])

var obj = {
  A: {
    name: "John"
  },
  B: {
    name: "Ivan"
  }
}

console.log('Object.values:', Object.values(obj))
console.log('Object.keys:', Object.keys(obj).map(k => obj[k]))

ES6キーと値：

MapとES6を使う 動的/計算済み プロパティと 破壊 できるキーを保持してマップからオブジェクトを返します。

Object.keys(obj).map(k => ({[k]: obj[k]}))
Object.entries(obj).map(([k,v]) => ({[k]:v}))

var obj = {
  A: {
    name: "John"
  },
  B: {
    name: "Ivan"
  }
}

console.log('Object.keys:', Object.keys(obj).map(k => ({
  [k]: obj[k]
})))
console.log('Object.entries:', Object.entries(obj).map(([k, v]) => ({
  [k]: v
})))

Lodash値のみ：

このために設計されたメソッドは _.values ですが、 _.mapのような「ショートカット」があります。 とユーティリティメソッド _.toArray は、からの値のみを含む配列も返します。オブジェクト。 _.mapを介して_.keysを作成し、obj[key]表記を使用してオブジェクトから値を取得することもできます。

注：_.mapは、オブジェクトを渡すときに、 baseMap ハンドラーを使用します。これは基本的にオブジェクトのプロパティに対するforEachです。

_.values(obj)
_.map(obj)
_.toArray(obj)
_.map(_.keys(obj), k => obj[k])

var obj = {
  A: {
    name: "John"
  },
  B: {
    name: "Ivan"
  }
}

console.log('values:', _.values(obj))
console.log('map:', _.map(obj))
console.log('toArray:', _.toArray(obj))
console.log('keys:', _.map(_.keys(obj), k => obj[k]))
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.10/lodash.min.js"></script>

Lodash Key＆Value：

// Outputs an array with [[KEY, VALUE]]
_.entries(obj)
_.toPairs(obj)

// Outputs array with objects containing the keys and values
_.map(_.entries(obj), ([k,v]) => ({[k]:v}))
_.map(_.keys(obj), k => ({[k]: obj[k]}))
_.transform(obj, (r,c,k) => r.Push({[k]:c}), [])
_.reduce(obj, (r,c,k) => (r.Push({[k]:c}), r), [])

var obj = {
  A: {
    name: "John"
  },
  B: {
    name: "Ivan"
  }
}

// Outputs an array with [KEY, VALUE]
console.log('entries:', _.entries(obj))
console.log('toPairs:', _.toPairs(obj))

// Outputs array with objects containing the keys and values
console.log('entries:', _.map(_.entries(obj), ([k, v]) => ({
  [k]: v
})))
console.log('keys:', _.map(_.keys(obj), k => ({
  [k]: obj[k]
})))
console.log('transform:', _.transform(obj, (r, c, k) => r.Push({
  [k]: c
}), []))
console.log('reduce:', _.reduce(obj, (r, c, k) => (r.Push({
  [k]: c
}), r), []))
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.10/lodash.min.js"></script>

上記の例ではES6が使用されていることに注意してください（矢印関数と動的プロパティ）。 ES6が問題になる場合は、lodash _.fromPairs などのメソッドを使用してオブジェクトを構成できます。

3
Akrion

Objectの配列をオリジナルのArray.prototype.mapのようにカスタムマッピングしたい場合は、_.forEachを使用できます。

let myObject = {
  key1: "value1",
  key2: "value2",
  // ...
};

let myNewArray = [];

_.forEach(myObject, (value, key) => {
  myNewArray.Push({
    someNewKey: key,
    someNewValue: value.toUpperCase() // just an example of new value based on original value
  });
});

// myNewArray => [{ someNewKey: key1, someNewValue: 'VALUE1' }, ... ];

_.forEachのlodashのドキュメントを参照してください https://lodash.com/docs/#forEach

3
Gil Epshtain