在 foreach 循环和 for 循环中检索值

Question

我想在 forEach 循环内调用一个函数来显示数据，但问题是我必须在 forEach 循环内再次执行一个 for 循环才能访问其他元素，所以如果我将函数的调用放在forEach 循环，不会调用其他元素，如果我将函数放在 for 循环内（即在 foreach 循环内），则元素会显示两次。请你帮助我好吗 ？ 这是我的代码：

const data = [{
    "restaurantName": "Bronco",
    "address": "39 Rue des Petites Écuries, 75010 Paris",
    "lat": 48.8737815,
    "long": 2.3501649,
    "ratings": [{
        "stars": 4,
        "comment": "Un excellent restaurant, j'y reviendrai !Par contre il vaut mieux aimer la viande."
      },
      {
        "stars": 5,
        "comment": "Tout simplement mon restaurant préféré !"
      }
    ]
  },
  {
    "restaurantName": "Babalou",
    "address": "4 Rue Lamarck, 75018 Paris",
    "lat": 48.8865035,
    "long": 2.3442197,
    "ratings": [{
        "stars": 5,
        "comment": "Une minuscule pizzeria délicieuse cachéejuste à côté du Sacré choeur !"
      },
      {
        "stars": 3,
        "comment": "J'ai trouvé ça correct, sans plus"
      }
    ]
  }
]


data.forEach((element) => {
  const name = element.restaurantName;
  const address = element.address;

  for (let i = 0; i < data.length; i++) {
    const comment = element.ratings[i].comment;
    const stars = element.ratings[i].stars;

  }
  init_resto(name, address, comment, stars);

})



var list_group = document.getElementById('list-group');

function init_resto(name, address, comment, stars) {
  var liElt = document.createElement('li');

  liElt.innerHTML =
    "<li class=\"list-group-item\">" + name + "</li>" +
    "<li class=\"list-group-item\">" + address + "</li>" +
    "<li class=\"list-group-item\">" + comment + "</li>" +
    "<li class=\"list-group-item\">" + stars + "</li>";
  list_group.appendChild(liElt);
}

<ul id="list-group"></ul>

Answer 1

您可以使用template literals 和map

const data = [{ "restaurantName": "Bronco", "address": "39 Rue des Petites Écuries, 75010 Paris", "lat": 48.8737815, "long": 2.3501649, "ratings": [{ "stars": 4, "comment": "Un excellent restaurant, j'y reviendrai !Par contre il vaut mieux aimer la viande." }, { "stars": 5, "comment": "Tout simplement mon restaurant préféré !" } ] }, { "restaurantName": "Babalou", "address": "4 Rue Lamarck, 75018 Paris", "lat": 48.8865035, "long": 2.3442197, "ratings": [{ "stars": 5, "comment": "Une minuscule pizzeria délicieuse cachéejuste à côté du Sacré choeur !" }, { "stars": 3, "comment": "J'ai trouvé ça correct, sans plus" } ] } ];

const formatData = data => {
  document.getElementById('list-group').innerHTML = data
    .map(({restaurantName,address,ratings}) => // only take these 3 members of the array
    `<li class="list-group-item">${restaurantName}</li>
     <li class="list-group-item">${address}</li>
     <li class="list-group-item">
       <ul>
         ${ratings                   // embedded variable 
          .map(({stars,comment}) =>  // map 
            `<li>${comment}</li>     // with nested template literals
            <li>${"*****".slice(-stars)}</li>`
          ).join("")}
       </ul>
     </li>`
   ).join(""); // map returns an array, so join using empty string
};
 
//fetch("http://localhost/ApiMap/data.json")
// .then((response) => response.json())
// .then(formaData(data));
formatData(data); // remove and uncomment above when happy

ul {
  list-style: none;
}

<ul id="list-group"></ul>

Answer 2

这实际上取决于您希望它如何显示。

将评级作为数组传递，然后将它们作为列表中的列表循环？

data.forEach((element) => {
    const name = element.restaurantName;
    const address = element.address;
    const ratings = element.ratings;

    init_resto(name, address, ratings);
    
});

确保评级有一个默认值（只是封装）

function init_resto(name, address, ratings = []) {
  var liElt = document.createElement('li');

  liElt.innerHTML =
    "<li class=\"list-group-item\">" + name + "</li>" +
    "<li class=\"list-group-item\">" + address + "</li>" +
    "<li class=\"list-group-item\">" + init_ratings(ratings) + "</li>"
  list_group.appendChild(liElt);
}

function init_ratings(ratings) {
    var styledRatings = ratings.map(rating => {
        return "<li class=\"list-group-item\">" + rating.comment + "</li>" 
            + "<li class=\"list-group-item\">" + rating.stars + "</li>" 
      })
    return "<ul>" + styledRatings.join('') + "</ul>";
}