【问题标题】:How do I properly access and output API object and array data?如何正确访问和输出 API 对象和数组数据?
【发布时间】:2019-08-14 14:02:16
【问题描述】:

我的问题可能很简单,但我是一个学习 Javascript 的完整初学者,并且我有一个项目,我应该通过从 API 获取数据来创建动漫信息 Web 应用程序。

我对“流派”类别有疑问。它被列为一个包含各种项目和项目名称的数组,我需要在我的页面上的“流派”列中显示这些项目和项目名称。 这是我需要检索的一些数据的示例。

流派数组数据:https://imgur.com/a/pApGU59

这是我当前输出的示例:

例如列输出:https://imgur.com/a/1rRwG5L

如果我应该通过 forEach 循环来完成此操作,那么正确的语法是什么?如果有另一种或更简单的方法,也将不胜感激。

这里是我如何通过 JavaScript 将数据打印到他们尊重的列中的示例。

<div className="col-md-8">
  <h2>${movie.title}</h2>
  <ul className="list-group">
    <li class="list-group-item">
      <strong>Japanese Title:</strong> ${movie.title_japanese}
    </li>
    <li class="list-group-item">
      <strong>Genres:</strong> ${movie.genres}
    </li>
    <li class="list-group-item">
      <strong>Type:</strong> ${movie.type}
    </li>
    <li class="list-group-item">
      <strong>Premiered:</strong> ${movie.premiered}
    </li>
    <li class="list-group-item">
      <strong>Episodes:</strong> ${movie.episodes}
    </li>
  </ul>
</div>;

当然,使用“movie.genres.name”会返回“未定义”,而仅使用“movies.genres”会将许多 [object Object] 结果打印到所述列中。

我只需要在加载页面时将流派数组的“名称”项自动填充到我的流派列中。

【问题讨论】:

  • ${movie.genres.map(x=&gt;x.name).join(",")} ??
  • @JaydipJadhav 这工作得很好。我只需要在“加入”逗号后添加一个空格。我以前从未使用过这种语法,所以我需要对“地图”及其作用进行一些研究。
  • 乐于助人!!

标签: javascript arrays javascript-objects


【解决方案1】:

movie.genres 是一个数组,你必须循环它来获取每个属性

let output = "";
for(let i=0;i< movie.genres.length; i++){
    output+=  movie.genres[i].name;
}

【讨论】:

  • 我相当肯定这会奏效,它确实让我更接近我需要的东西,因为它现在显示了每个节目正确数量的流派,但仍然存在两个问题。 [object Object] 仍然显示在我的专栏中,我的控制台给出了一个错误,提示“movie.genres is not defined”。
猜你喜欢
  • 2012-09-22
  • 2021-01-21
  • 1970-01-01
  • 2020-02-26
  • 2018-08-01
  • 1970-01-01
  • 1970-01-01
  • 2016-08-09
  • 2012-08-11
相关资源
最近更新 更多