オブジェクトの配列をマッピングし、それらのオブジェクトの別の配列を取得し、重複を取り除く

Question

私はAPIからオブジェクトの配列を取得する関数を開発しています。それらのオブジェクトの配列はタグの配列ですこれらのオブジェクトのすべてのタグを戻して、マークアップ内の選択フィールドに値を設定します。これまでのところ、私がやっているすべてのマップと混乱するようになってきています。値も返されますが、オブジェクトの元の配列と同じ長さを返し、重複を取り除きます。私は間違っているか、これを行うより良い方法です、そして私はロダッシュを使用していますか？

renderOptions(){ 
     let dataRef = this.props.designs.items, 
      tagArray = [], 
      newArr = [] 
     return(_.map(dataRef, (design) => { 
      let tags = design.tags, 
       finalArr 
      return(_.map(tags, (tag) =>{ 
        tagArray.push(tag) 
        newArr = [ ...new Set(tagArray) ] 
        return(_.map(newArr, (item) => { 
         console.log(item) 
         return(<li><h1>{item}</h1></li>) 
        })) 
       }) 
      ) 
     })) 
    } 

Answer 1

、私はコードをより簡潔行ったreduceを使用してJS Bin上の作業バージョンがあります。あなたはそれをフレームワークに入れるためにそれを適応させる必要があります（それはReactですか？）。

良いヒントは、ロダッシュメソッドの戻り値の型を調べることです。 メソッドreduceは配列を返します。つまり、値を保持するために一時配列を作成する必要はなく、すぐにtags_arrayに割り当てられます。

// assuming your data is something like this... 
var objects = [ 
    { 
    name: 'a', 
    tags: ['a', 'b', 'c'] 
    }, 
    { 
    name: 'b', 
    tags: ['b', 'c', 'd'] 
    }, 
    { 
    name: 'c', 
    tags: ['a', 'c', 'd', 'e'] 
    } 
] 


var tags_array = _.uniq(    // returns a unique array. 
    _.reduce(objects, function(i, o){  // iterates through objects and 
    return o.tags;      // returns o.tags each time 
    }) 
); 

console.log(tags_array); 
// #=> ["a", "c", "d", "e"] 

だからあなたの関数は、このような何かをうまくいくかもしれない、私は推測している：

renderOptions(){ 
    let dataRef = this.props.designs.items; 
    var tags_array = _.uniq(    // returns unique. 
     _.reduce(dataRef, function(i, o){  // iterates through objects and 
     return o.tags;      // returns o.tags each time 
     }) 
    ); 
    return tags_array; 
} 

を次に、あなたのビューで配列を反復処理、またはLiのHTML要素を返すようにrenderOptions機能を適応させることができ代わりに。

reduce方法は下記Palermoとしてあまりにも使用することができます。

let tags_array = objects.reduce((i, o) => { return o.tags; }); 

のでlodashが必要とされていません。

Answer 2

これを行うにはロダッシュは必要ありません。これを行うにはもっとクリーンな方法があります

let tags_array = dataRef.reduce((i, o) => { return o.tags; });