オブジェクトの配列にマッピングするときにネストされた配列内の単一のオブジェクトにアクセスする

Question

混乱のタイトルに申し訳ありません！私は市場のアレイとその内だけで最初の「市場」フィールドにアクセスしようとしています各オブジェクトの

var listOfProductsToShow = [{ 
    "markets": [{ 
     "date": "2017-10-25", 
     "market": "Tribeca Farmer's Market", 
     "uid": "-KxcWsDKs584lSNbhN1t", 
     }, 
     { 
     "date": "2017-10-31", 
     "market": "Tribeca Farmer's Market", 
     "uid": "-KxcWtWatedeIHOZZ1Dk", 
     }, 
     { 
     "date": "2017-11-04", 
     "market": "Tribeca Farmer's Market", 
     "uid": "-KxcWuWq1c22V2NBh12q", 
     }, 
    ], 
    "price": "9.99", 
    "product": "Chicken Wings", 
    "uid": "-KyRAxDoma3vwKXCiNBU", 
    "unit": "lb", 
    "vendorName": "Bob's Beef", 
    }, 
    { 
    "markets": [{ 
     "date": "2017-10-25", 
     "market": "Tribeca Farmer's Market", 
     "uid": "-KxcWsDKs584lSNbhN1t", 
     }, 
     { 
     "date": "2017-10-31", 
     "market": "Tribeca Farmer's Market", 
     "uid": "-KxcWtWatedeIHOZZ1Dk", 
     }, 
     { 
     "date": "2017-11-04", 
     "market": "Tribeca Farmer's Market", 
     "uid": "-KxcWuWq1c22V2NBh12q", 
     }, 
    ], 
    "price": "9.99", 
    "product": "Burgers", 
    "uid": "-Kyax36Yo0Nr2fm01mgL", 
    "unit": "lb", 
    "vendorName": "Bob's Beef", 
    } 
]; 

：

これは私が反応にオーバーマッピングしています配列の小さな塊です。私は以下を試しましたが、エラーが発生します。

{listOfProductsToShow.map((product, idx) => (
    product.markets[0].market 
))} 

これを行う方法はありますか？私は市場の配列にマップすることができますが、私は最初の市場の名前が欲しいだけです。助けをあらかじめありがとう！

Answer 1

おそらくmarkets配列が空であり、undefined is not an objectエラーが発生することがあります。その存在を最初にチェックし、存在しなければundefinedを返すことで、この問題を回避できます。そして、最後に、すべての未定義の値をフィルタリング：最後のスニペットは私に権利についての見える

var myArray = [ 
 
    { 
 
    "markets": [ 
 
     { 
 
     "date": "2017-10-25", 
 
     "market": "Tribeca Farmer's Market", 
 
     "uid": "-KxcWsDKs584lSNbhN1t", 
 
     }, 
 
     { 
 
     "date": "2017-10-31", 
 
     "market": "Tribeca Farmer's Market", 
 
     "uid": "-KxcWtWatedeIHOZZ1Dk", 
 
     }, 
 
     { 
 
     "date": "2017-11-04", 
 
     "market": "Tribeca Farmer's Market", 
 
     "uid": "-KxcWuWq1c22V2NBh12q", 
 
     }, 
 
    ], 
 
    "price": "9.99", 
 
    "product": "Chicken Wings", 
 
    "uid": "-KyRAxDoma3vwKXCiNBU", 
 
    "unit": "lb", 
 
    "vendorName": "Bob's Beef", 
 
    }, 
 
    { 
 
    "markets": [ 
 
     { 
 
     "date": "2017-10-25", 
 
     "market": "Tribeca Farmer's Market", 
 
     "uid": "-KxcWsDKs584lSNbhN1t", 
 
     }, 
 
     { 
 
     "date": "2017-10-31", 
 
     "market": "Tribeca Farmer's Market", 
 
     "uid": "-KxcWtWatedeIHOZZ1Dk", 
 
     }, 
 
     { 
 
     "date": "2017-11-04", 
 
     "market": "Tribeca Farmer's Market", 
 
     "uid": "-KxcWuWq1c22V2NBh12q", 
 
     }, 
 
    ], 
 
    "price": "9.99", 
 
    "product": "Burgers", 
 
    "uid": "-Kyax36Yo0Nr2fm01mgL", 
 
    "unit": "lb", 
 
    "vendorName": "Bob's Beef", 
 
    }, 
 
    { 
 
    "markets": [] 
 
    } 
 
]; 
 

 
console.log(myArray) 
 

 
var result = myArray.map(x => x.markets[0] && x.markets[0].market).filter(Boolean) 
 
console.log(result)

Answer 2

let array = [ 
{ 
    "markets": [ 
    { 
     "date": "2017-10-25", 
     "market": "Tribeca Farmer's Market", 
     "uid": "-KxcWsDKs584lSNbhN1t", 
    }, 
    { 
     "date": "2017-10-31", 
     "market": "Tribeca Farmer's Market", 
     "uid": "-KxcWtWatedeIHOZZ1Dk", 
    }, 
    { 
     "date": "2017-11-04", 
     "market": "Tribeca Farmer's Market", 
     "uid": "-KxcWuWq1c22V2NBh12q", 
    }, 
    ], 
    "price": "9.99", 
    "product": "Chicken Wings", 
    "uid": "-KyRAxDoma3vwKXCiNBU", 
    "unit": "lb", 
    "vendorName": "Bob's Beef", 
}, 
{ 
    "markets": [ 
    { 
     "date": "2017-10-25", 
     "market": "Tribeca1 Farmer's Market", 
     "uid": "-KxcWsDKs584lSNbhN1t", 
    }, 
    { 
     "date": "2017-10-31", 
     "market": "Tribeca Farmer's Market", 
     "uid": "-KxcWtWatedeIHOZZ1Dk", 
    }, 
    { 
     "date": "2017-11-04", 
     "market": "Tribeca Farmer's Market", 
     "uid": "-KxcWuWq1c22V2NBh12q", 
    }, 
    ], 
    "price": "9.99", 
    "product": "Burgers", 
    "uid": "-Kyax36Yo0Nr2fm01mgL", 
    "unit": "lb", 
    "vendorName": "Bob's Beef", 
}, 
]; 

let values = Object.values(array) 
       .map(item => { return item.markets }) 
       .map(arrayIndexItem => arrayIndexItem.map(item2 => item2.market)) 
       .map(it => it[0]); 
console.log(values);