在對象數組上映射時訪問嵌套數組中的單個對象

Question

抱歉，標題令人迷惑！

這是我在React中映射的數組的一小部分：

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