时间戳

首页 > 解决方案 > 将响应结果循环到 HTML 列表

javascript - 将响应结果循环到 HTML 列表

问题描述

我的目标是将所有内容放在 placeResult 中并将其加载到列表中。您的列表如下所示

  • 照片，formatted_address，评级
  • 照片，formatted_address，评级
  • 照片，formatted_address，评级

    • 每张照片上都有<li>来自阵列的新照片、来自阵列响应的新地址和评级。此处的示例 placeResult 响应：

    {formatted_address: "1111 Example Rd, CityName, State 33333, USA", name: "Ruby Tuesday", photos: Array(10), rating: 4.1},
{formatted_address: "2222 Example Rd, CityName, State 44444, USA", name: "McDonalds", photos: Array(10), rating: 3.1},
{formatted_address: "3333 Example Rd, CityName, State 55555, USA", name: "Burger King", photos: Array(10), rating: 2.1}

    我最好的猜测是我需要一个辅助循环来处理这个问题。目前它只是让我重复来自同一位置的同一张照片并填充<li>.

    代码

    if (placeResult.photos) {
    const ulList = document.createElement('ul');
    infoPane.append(ulList);
    const liList = document.createElement('li');
    ulList.append(liList);
    for (var i = 0; i < placeResult.name.length; i++) {
      console.log("PlaceResult", placeResult.formatted_address);
      const firstPhoto = placeResult.photos[0];
      const photo = document.createElement('img'); 
      photo.classList.add('hero');
      photo.src = firstPhoto.getUrl()
      liList.appendChild(photo);
    }
   }

    标签： javascriptnode.js

    解决方案

    您可能应该重写 8 行：

    const firstPhoto = placeResult[i].photos[0];

    或者你在循环退出条件中犯了一个错误，也许你的意思是：

    for (var i = 0; i < placeResult.length; i++) { .. } //iterate over places array
//or..
for (var i = 0; i < placeResult.photos.length; i++) { .. } // iterate over photos array

    推荐阅读