在数组中迭代一个数组并显示 playerId、playerName 和 playerCategory答案

【问题标题】：iterate an array inside an array and display the playerId, playerName and playerCategory在数组中迭代一个数组并显示 playerId、playerName 和 playerCategory
【发布时间】：2019-09-14 03:46:37
【问题描述】：

更新 3：

调试后找到答案。提供以下解决方案

let values = {
  "sportsEntitties": [{
      "sportsEntityId": 30085585,
      "sportsEntityName": "490349903434903490",
      "sportsEntityStartDate": "7878787878",
      "sportsEntityEndDate": "erierioerioerioioe",
      "targetData": [{
          "playerName": "490349903434903490",
          "playerCategory": "hjuwerwewkwjke",
          "playerTaxId": "789347893489348934893489823",
          "relationshipStartDate": "2010-07-01"
        },
        {
          "playerName": "490349903434903490",
          "playerCategory": "hjuwerwewkwjke",
          "playerTaxId": "789347893489348934893489823",
          "relationshipStartDate": "2010-07-01"
        },
        {
          "playerName": "490349903434903490",
          "playerCategory": "hjuwerwewkwjke",
          "playerTaxId": "789347893489348934893489823",
          "relationshipStartDate": "2010-07-01"
        }
      ]
    },
    {
      "sportsEntityId": 30077252,
      "sportsEntityName": "uieruieuieruiuier",
      "sportsEntityStartDate": "7878787878",
      "sportsEntityEndDate": "erierioerioerioioe",
      "targetData": [{
          "playerId": 3478347834783478347878347834783478783484818,
          "playerName": "eruieruiiererui",
          "playerCategory": "uuiweruiwerweruiwfuiw",
          "playerTaxId": "789347893489348934893489760",
          "relationshipStartDate": "347834783478347834787834783478347878347-10-30"
        },
        {
          "playerId": 3478347834783478347878347834783478783493294,
          "playerName": "990we9090we90we90",
          "playerCategory": "uuiweruiwerweruiwfuiw",
          "playerTaxId": "789347893489348934893489760",
          "relationshipStartDate": "2010-06-30"
        },
        {
          "playerId": 3478347834783478347878347834783478783493779,
          "playerName": "uieruieuieruiuier",
          "playerCategory": "hjuwerwewkwjke",
          "playerTaxId": "789347893489348934893489760",
          "relationshipStartDate": "2010-07-01"
        }
      ]
    },
    {
      "sportsEntityId": 30085115,
      "sportsEntityName": "cvccvcvcvcvcv",
      "sportsEntityStartDate": "2010-06-30",
      "sportsEntityEndDate": "9999-12-31",
      "targetData": [{
        "playerId": 3478347834783478347878347834783478783493279,
        "playerName": "jkcvjkcdjkcvj",
        "playerCategory": "uuiweruiwerweruiwfuiw",
        "playerTaxId": "27-2695112",
        "relationshipStartDate": "2010-06-30"
      }]
    }

  ],
  "corporateEntityId": "wewewe",
  "corporateEntityName": "wewewewe"
}

let sportsExpnasionHeading = [];


sportsExpnasionHeading = values.sportsEntitties.map(obj => {
  return {
    sportsEntityName: obj.sportsEntityName,
    targetData: obj.targetData.map(obj =>
      ({
        label: `${obj.playerName} | ${obj.playerCategory}`,

        value: obj.playerTaxId,
        category: obj.playerCategory,
        checked: true
      })
    )
  }
});

console.log("sportsExpnasionHeading--->", sportsExpnasionHeading);

更新2：

现在我的数据被移动到 targetData 数组中。所以我的 json 结构发生了变化。
我使用了相同的代码并进行了迭代，但仍然没有得到值。
你能告诉我如何获取 playerName 和 playerCategory

const results = Object.values(others).map(obj => {
            return obj[0].playerName + '|' + obj[0].playerCategory
        });

{
  "sportsEntitties": [
    {
      "sportsEntityId": 30085585,
      "sportsEntityName": "490349903434903490",
      "sportsEntityStartDate": "7878787878",
      "sportsEntityEndDate": "erierioerioerioioe",
      "targetData": [
        {
          "playerName": "490349903434903490",
          "playerCategory": "Group",
          "playerTaxId": "789347893489348934893489823",
          "relationshipStartDate": "2010-07-01"
        }
      ]
    },
    {
      "sportsEntityId": 30077252,
      "sportsEntityName": "uieruieuieruiuier",
      "sportsEntityStartDate": "7878787878",
      "sportsEntityEndDate": "erierioerioerioioe",
      "targetData": [
        {
          "playerId": 3478347834783478347878347834783478783484818,
          "playerName": "eruieruiiererui",
          "playerCategory": "Facility",
          "playerTaxId": "789347893489348934893489760",
          "relationshipStartDate": "347834783478347834787834783478347878347-10-30"
        },
        {
          "playerId": 3478347834783478347878347834783478783493294,
          "playerName": "990we9090we90we90",
          "playerCategory": "Facility",
          "playerTaxId": "789347893489348934893489760",
          "relationshipStartDate": "2010-06-30"
        },
        {
          "playerId": 3478347834783478347878347834783478783493779,
          "playerName": "uieruieuieruiuier",
          "playerCategory": "Group",
          "playerTaxId": "789347893489348934893489760",
          "relationshipStartDate": "2010-07-01"
        }
      ]
    },
    {
      "sportsEntityId": 30085115,
      "sportsEntityName": "cvccvcvcvcvcv",
      "sportsEntityStartDate": "2010-06-30",
      "sportsEntityEndDate": "9999-12-31",
      "targetData": [
        {
          "playerId": 3478347834783478347878347834783478783493279,
          "playerName": "jkcvjkcdjkcvj",
          "playerCategory": "Facility",
          "playerTaxId": "27-2695112",
          "relationshipStartDate": "2010-06-30"
        }
      ]
    }

  ],
  "corporateEntityId": "wewewe",
  "corporateEntityName": "wewewewe"
}

更新1：

假设如果我们在一个数组中有更多的数组，我们是否可以在不给出索引的情况下进行迭代。
能否请您告诉我，因为它可以帮助我处理复杂的数据

{
            "sportsEntitties": [
                {
                    "sportsEntityId": 23232323,
                    "sportsEntityName": "wewewewewe",
                    "sportsEntityStartDate": "ewewwewewe",
                    "sportsEntityEndDate": "9999-12-31",
                    "bunessEntityProviders": [
                        {
                            "playerId": 23232323232323,
                            "playerName": "sdssdsdsd",
                            "playerCategory": "Facility",
                            "playerTaxId": "3233223",
                            "relationshipStartDate": "sdsdsdsdsd"
                        }
                    ],
                    "fddfjkjkdfjkdf": [
                        {
                            "playerId": 23232323232323,
                            "playerName": "sdssdsdsd",
                            "playerCategory": "Facility",
                            "playerTaxId": "3233223",
                            "relationshipStartDate": "sdsdsdsdsd"
                        }
                    ],
                    "a": [
                        {
                            "playerId": 23232323232323,
                            "playerName": "sdssdsdsd",
                            "playerCategory": "Facility",
                            "playerTaxId": "3233223",
                            "relationshipStartDate": "sdsdsdsdsd"
                        }
                    ],
                    "bc": [
                        {
                            "playerId": 23232323232323,
                            "playerName": "sdssdsdsd",
                            "playerCategory": "Facility",
                            "playerTaxId": "3233223",
                            "relationshipStartDate": "sdsdsdsdsd"
                        }
                    ],
                     "de": [
                        {
                            "playerId": 23232323232323,
                            "playerName": "sdssdsdsd",
                            "playerCategory": "Facility",
                            "playerTaxId": "3233223",
                            "relationshipStartDate": "sdsdsdsdsd"
                        }
                    ],
                     "jkljkllk": [
                        {
                            "playerId": 23232323232323,
                            "playerName": "sdssdsdsd",
                            "playerCategory": "Facility",
                            "playerTaxId": "3233223",
                            "relationshipStartDate": "sdsdsdsdsd"
                        }
                    ],

                }
            ],
                "corporateEntityId": "2323232323",
                    "corporateEntityName": "ssdsdsd"
        }

我正在尝试在一个数组中迭代一个数组并显示 playerId、playerName 和 playerCategory。
当我做第一张地图时，我得到的价值是
console.log('bunessEntityProvidersValues values ---->', bunessEntityProvidersValues);
但是当我在数组中执行下一个映射时，我得到了未定义。 console.log('combinedEntityProvidersValues values ---->', combinedEntityProvidersValues);
你能告诉我如何使用地图方法修复它
我调试了，但还是找不到。

样本数据：

{
            "sportsEntitties": [
                {
                    "sportsEntityId": 23232323,
                    "sportsEntityName": "wewewewewe",
                    "sportsEntityStartDate": "ewewwewewe",
                    "sportsEntityEndDate": "9999-12-31",
                    "bunessEntityProviders": [
                        {
                            "playerId": 23232323232323,
                            "playerName": "sdssdsdsd",
                            "playerCategory": "Facility",
                            "playerTaxId": "3233223",
                            "relationshipStartDate": "sdsdsdsdsd"
                        }
                    ]
                }
            ],
                "corporateEntityId": "2323232323",
                    "corporateEntityName": "ssdsdsd"
        }

代码 sn-p：

let bunessEntityProvidersValues = [];
let combinedEntityProvidersValues; //= [];



bunessEntityProvidersValues = values.data.sportsEntitties.map(obj => {
    return obj.bunessEntityProviders
})
console.log('bunessEntityProvidersValues values ---->', bunessEntityProvidersValues);
combinedEntityProvidersValues = bunessEntityProvidersValues.map(obj => {
    return obj.playerName + '|' + obj.playerCategory
})
console.log('combinedEntityProvidersValues values ---->', combinedEntityProvidersValues);

【问题讨论】：

标签： javascript html arrays json reactjs

【解决方案1】：

您的代码获得[ 'undefined|undefined' ] 的原因是，当您在values.data.sportsEntitties 上运行Array.map() 时，它实际上将结果返回到一个新数组中，每个元素都是该回调函数的结果你已经传入了。因此，bunessEntityProvidersValues 实际上是一个嵌套数组，因为你专门返回了包含一个数组的bunessEntityProviders。

你只需要选择bunessEntityProvidersValues的索引0，这是一个数组数组。

const combinedEntityProvidersValues = bunessEntityProvidersValues[0].map(obj => {
  return obj.playerName + '|' + obj.playerCategory
});

这是完整的演示。您可以运行它来查看打印结果。

const values = {
  "sportsEntitties": [{
    "sportsEntityId": 23232323,
    "sportsEntityName": "wewewewewe",
    "sportsEntityStartDate": "ewewwewewe",
    "sportsEntityEndDate": "9999-12-31",
    "bunessEntityProviders": [{
      "playerId": 23232323232323,
      "playerName": "sdssdsdsd",
      "playerCategory": "Facility",
      "playerTaxId": "3233223",
      "relationshipStartDate": "sdsdsdsdsd"
    }]
  }],
  "corporateEntityId": "2323232323",
  "corporateEntityName": "ssdsdsd"
}

const bunessEntityProvidersValues = values.sportsEntitties.map(obj => {
  return obj.bunessEntityProviders
});
//console.log(bunessEntityProvidersValues);

const combinedEntityProvidersValues = bunessEntityProvidersValues[0].map(obj => {
  return obj.playerName + '|' + obj.playerCategory
});
console.log(combinedEntityProvidersValues);

编辑：这是我们可以从您更新的数据中解决问题的方法。基本上，我们利用spread syntax 来执行object destructuring。首先，我们删除不需要的属性，例如sportsEntityId、sportsEntityName、sportsEntityStartDate、sportsEntityEndDate，并将其余的存储到一个名为others 的新对象中。然后，我们遍历它以打印所需的输出。

const values = {
  "sportsEntitties": [{
    "sportsEntityId": 23232323,
    "sportsEntityName": "wewewewewe",
    "sportsEntityStartDate": "ewewwewewe",
    "sportsEntityEndDate": "9999-12-31",
    "bunessEntityProviders": [{
      "playerId": 23232323232323,
      "playerName": "sdssdsdsd",
      "playerCategory": "Facility",
      "playerTaxId": "3233223",
      "relationshipStartDate": "sdsdsdsdsd"
    }],
    "fddfjkjkdfjkdf": [{
      "playerId": 23232323232323,
      "playerName": "sdssdsdsd",
      "playerCategory": "Facility",
      "playerTaxId": "3233223",
      "relationshipStartDate": "sdsdsdsdsd"
    }],
    "a": [{
      "playerId": 23232323232323,
      "playerName": "sdssdsdsd",
      "playerCategory": "Facility",
      "playerTaxId": "3233223",
      "relationshipStartDate": "sdsdsdsdsd"
    }],
    "bc": [{
      "playerId": 23232323232323,
      "playerName": "sdssdsdsd",
      "playerCategory": "Facility",
      "playerTaxId": "3233223",
      "relationshipStartDate": "sdsdsdsdsd"
    }],
    "de": [{
      "playerId": 23232323232323,
      "playerName": "sdssdsdsd",
      "playerCategory": "Facility",
      "playerTaxId": "3233223",
      "relationshipStartDate": "sdsdsdsdsd"
    }],
    "jkljkllk": [{
      "playerId": 23232323232323,
      "playerName": "sdssdsdsd",
      "playerCategory": "Facility",
      "playerTaxId": "3233223",
      "relationshipStartDate": "sdsdsdsdsd"
    }],

  }],
  "corporateEntityId": "2323232323",
  "corporateEntityName": "ssdsdsd"
}

const {
  sportsEntityId,
  sportsEntityName,
  sportsEntityStartDate,
  sportsEntityEndDate,
  ...others
} = values.sportsEntitties[0];

const results = Object.values(others).map(obj => {
  return obj[0].playerName + '|' + obj[0].playerCategory
});
/* 
const results = Object.values(others).map(list => {
  return list.map(obj => {
    return obj.playerName + '|' + obj.playerCategory
   })
}); 
*/

console.log(results);

【讨论】：

-感谢您的回复，假设如果我们在一个数组中有更多的数组，我们可以在不给出类似[0]的索引的情况下进行迭代。 - 你能告诉我吗，因为它会在复杂的数据中帮助我。 用复杂的数据更新了问题
我查看了 array.map 教程，但没有理解这一行 -> 它实际上将结果返回到一个新数组中，每个元素都是你拥有的回调函数的结果传入你能在我的代码中告诉我哪个是回调，你能通过在代码中给出cmets来解释吗
@zizi 是的，当然。只是为了检查一下，您想在最终输出中打印所有 obj.playerName 和 obj.playerCategory，对吗？
另外，我也看到了你的更新数据。你确定那是正确的吗？您似乎重复了两次bunessEntityProviders。另外，添加的属性a、bc等都是单独的属性。
我想我们创建一个原始对象的副本，并删除“sportsEntityId”、“sportsEntityName”、“sportsEntityStartDate”和“sportsEntityEndDate”等“不需要的”属性。然后我们再次迭代它。