数组内的数组在javascript中获取对象答案

【问题标题】：Array inside array get object in javascript数组内的数组在javascript中获取对象
【发布时间】：2021-06-02 01:03:06
【问题描述】：

你好朋友，我有下面的数组，我想获取显示名称有迪拜的区域数组项我尝试使用下面的代码但不工作

this.props = {
  countryListData: [
    {
      "country": {
        "countryCode": "AE",
        "displayName": "United Arab Emirates",
        "repositoryId": "AE"
      },
      "regions": [
        {
          "regionCode": "AE-FU",
          "displayName": "Fujairah",
          "repositoryId": "AE-FU",
          "abbreviation": "FU"
        },
        {
          "regionCode": "AE-DU",
          "displayName": "Dubai",
          "repositoryId": "AE-DU",
          "abbreviation": "DU"
        },
        {
          "regionCode": "AE-UQ",
          "displayName": "Umm al-Quwain",
          "repositoryId": "AE-UQ",
          "abbreviation": "UQ"
        },
        {
          "regionCode": "AE-AJ",
          "displayName": "Ajman",
          "repositoryId": "AE-AJ",
          "abbreviation": "AJ"
        },
        {
          "regionCode": "AE-AZ",
          "displayName": "Abu Dhabi",
          "repositoryId": "AE-AZ",
          "abbreviation": "AZ"
        },
        {
          "regionCode": "AE-RK",
          "displayName": "Ras al-Khaimah",
          "repositoryId": "AE-RK",
          "abbreviation": "RK"
        },
        {
          "regionCode": "AE-SH",
          "displayName": "Sharjah",
          "repositoryId": "AE-SH",
          "abbreviation": "SH"
        }
      ],
      "repositoryId": "100003"
    }
  ]
};

for (let index = 0; index < this.props.countryListData.length; index++) {
  for (let j = 0; j < this.props.countryListData[index].regions.length; j++) {
    console.log("Region Name --->", this.props.countryListData[index].regions[j].displayName);

  }
}

我收到错误，例如区域未定义任何人帮助我如何获得

【问题讨论】：

为什么countryListData 只包含一个元素？它可以包含更多元素吗？您想搜索所有包含的元素吗？可以重复吗？

标签： javascript arrays dictionary filter

【解决方案1】：

您可以使用映射来获取显示名称为“迪拜”的区域数组项

        this.props.countryListData.map((it) =>
            it.regions.map((Arr) => {
              if (Arr.displayName === "Dubai"){
                 console.log(Arr);
                } 
             })
          )

【讨论】：

【解决方案2】：

您可以使用以下函数链：

this.props = {
  countryListData: [
    {
      "country": {
        "countryCode": "AE",
        "displayName": "United Arab Emirates",
        "repositoryId": "AE"
      },
      "regions": [
        {
          "regionCode": "AE-FU",
          "displayName": "Fujairah",
          "repositoryId": "AE-FU",
          "abbreviation": "FU"
        },
        {
          "regionCode": "AE-DU",
          "displayName": "Dubai",
          "repositoryId": "AE-DU",
          "abbreviation": "DU"
        },
        {
          "regionCode": "AE-UQ",
          "displayName": "Umm al-Quwain",
          "repositoryId": "AE-UQ",
          "abbreviation": "UQ"
        },
        {
          "regionCode": "AE-AJ",
          "displayName": "Ajman",
          "repositoryId": "AE-AJ",
          "abbreviation": "AJ"
        },
        {
          "regionCode": "AE-AZ",
          "displayName": "Abu Dhabi",
          "repositoryId": "AE-AZ",
          "abbreviation": "AZ"
        },
        {
          "regionCode": "AE-RK",
          "displayName": "Ras al-Khaimah",
          "repositoryId": "AE-RK",
          "abbreviation": "RK"
        },
        {
          "regionCode": "AE-SH",
          "displayName": "Sharjah",
          "repositoryId": "AE-SH",
          "abbreviation": "SH"
        }
      ],
      "repositoryId": "100003"
    }
  ]
};

this.props.countryListData.map(c => c.regions.filter((r)=> r.displayName === 'Dubai')).flat()[0]

【讨论】：

【解决方案3】：

您可以使用Array.prototype.find：

const list = [
    {
        "country": {
            "countryCode": "AE",
            "displayName": "United Arab Emirates",
            "repositoryId": "AE"
        },
        "regions": [
            {
                "regionCode": "AE-FU",
                "displayName": "Fujairah",
                "repositoryId": "AE-FU",
                "abbreviation": "FU"
            },
            {
                "regionCode": "AE-DU",
                "displayName": "Dubai",
                "repositoryId": "AE-DU",
                "abbreviation": "DU"
            },
            {
                "regionCode": "AE-UQ",
                "displayName": "Umm al-Quwain",
                "repositoryId": "AE-UQ",
                "abbreviation": "UQ"
            },
            {
                "regionCode": "AE-AJ",
                "displayName": "Ajman",
                "repositoryId": "AE-AJ",
                "abbreviation": "AJ"
            },
            {
                "regionCode": "AE-AZ",
                "displayName": "Abu Dhabi",
                "repositoryId": "AE-AZ",
                "abbreviation": "AZ"
            },
            {
                "regionCode": "AE-RK",
                "displayName": "Ras al-Khaimah",
                "repositoryId": "AE-RK",
                "abbreviation": "RK"
            },
            {
                "regionCode": "AE-SH",
                "displayName": "Sharjah",
                "repositoryId": "AE-SH",
                "abbreviation": "SH"
            }
        ],
        "repositoryId": "100003"
    }
];
console.log(list[0].regions.find(r => r.displayName === "Dubai"));

外部数组容器有原因吗？考虑到数据结构，这似乎是多余的。

【讨论】：