在 foreach 循環和 for 循環中檢索值

Question

我想在 forEach 循環內調用 function 來顯示數據，但問題是我必須在 forEach 循環內再次執行 for 循環以訪問其他元素，所以如果我將 function 的調用放在 forEach 循環內，不調用其他元素，如果我將 function 放在 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

這實際上取決於您希望它如何顯示。

將評級作為數組傳遞，然后將它們作為列表中的列表循環？

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>";
}

Answer 2

您可以使用模板文字和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>