如何从多级数组中检索变量 - Vue.js

Posted 2023-02-22

【中文标题】如何从多级数组中检索变量 - Vue.js

【英文标题】：How to retrieve variable from multi-level array - Vue.js

【发布时间】：2021-12-27 19:45:33

【问题描述】：

我只是在 Vue.js 中做一个练习项目，我将循环浏览来自 NHL 的团队页面并输出每个球员的姓名。

我在这里有一个 API 端点； https://statsapi.web.nhl.com/api/v1/teams/21?expand=team.roster

我正在尝试穿越关卡，但在名册上“迷路”了。我可以输出整个花名册，但似乎无法深入挖掘。

我将整个 JSON 响应的内容存储在一个名为“hockeyData”的变量中。

这就是我用来输出花名册的东西（这可行）

 hockeyData[0].roster 

现在，当我尝试获取玩家姓名时，我正在这样做，但它不起作用

 hockeyData[0].roster.roster[0].person.fullName 

我确定这很简单，但尽我所能尝试我只是没有得到要输出的名称。

非常感谢任何帮助！

【问题讨论】：

你遇到了什么错误？

我收到一个控制台错误“TypeError: Cannot read properties of undefined (reading 'roster')”

只需添加逻辑语句this.hockeyData && this.hockeyData[0].roster.roster[0].person.fullName 或this.hockeyData[0]?.roster.roster[0].person.fullName 即可解决TypeError。这是因为在创建组件时， hockeyData 可能没有数据（因此在您的情况下它为 null 或未定义）。

【参考方案1】：

根据您的数据，这是一个有效的example on Codepen。

您尚未发布任何代码，因此我无法确定，但您的问题可能是时间问题。确保这些值在从模板请求时可用。

在我的示例中，我有一个v-if，用于检查数据是否可用（例如，我只检查名册是否可用，我应该检查所有孩子，但这是一个示例。 .).

    <div v-if="roster && roster.length">
        First:  roster[0].person.fullName 
    </div>