在对象数组上映射时访问嵌套数组中的单个对象

Question

Sorry for the confusing title!

This is a small chunk of the array that I am mapping over in 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",
  }
];

For each Object I am trying to access the markets array and within that just the first "market" field. I tried the following below but get an error.

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

Is there any way to accomplish this? I know I can map over the markets array but I only want the first market name. Thanks in advance for any help!

Answer 1

Probably your markets array is sometimes empty, causing the undefined is not an object error. You can get around this by checking for it's existence first, and returning undefined if it's not there. Then filter out all the undefined values at the end:

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