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",
  }
];

对于每个对象，我试图访问市场数组，并且只是在第一个＆＃34;市场＆＃34;领域。我尝试了以下以下但是出错了。

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

有没有办法实现这个目标？我知道我可以映射市场阵列，但我只想要第一个市场名称。在此先感谢您的帮助！

Answer 1

您的markets数组有时可能为空，导致undefined is not an object错误。你可以通过首先检查它的存在来解决这个问题，如果它不存在则返回undefined。然后过滤掉最后的所有未定义值：

＆＃13;

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)

＆＃13;

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

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

2 个答案: