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

如何解决在 foreach 循环和 for 循环中检索值

我想在 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,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>

解决方法

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

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

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

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

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

function init_resto(name,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>";
}

,

您可以使用 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,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>