Me gustaría llamar a una función dentro de un bucle forEach para mostrar datos, pero el problema es que debo volver a hacer un bucle for dentro del bucle forEach para acceder a otros elementos y, por lo tanto, si pongo la llamada my de la función dentro del bucle forEach, no se llaman otros elementos y si pongo la función dentro del bucle for (que está dentro del bucle foreach), los elementos se muestran dos veces. Me podría ayudar ? Aquí está mi código:

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>
-1
user14620717 27 feb. 2021 a las 10:39

3 respuestas

La mejor respuesta

Realmente depende de cómo quieras que se muestre.

¿Pasar las calificaciones como una matriz y luego recorrerlas como una lista dentro de una lista?

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

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

Asegúrese de que las calificaciones tengan un valor predeterminado (solo encajar)

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>";
}
1
Monofuse 27 feb. 2021 a las 07:58

Puede usar literales de plantilla y mapa

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}) => 
    `<li class="list-group-item">${restaurantName}</li>
     <li class="list-group-item">${address}</li>
     <li class="list-group-item">
       <ul>
         ${ratings
          .map(({stars,comment}) => 
            `<li>${comment}</li>
            <li>${"*****".slice(-stars)}</li>`
          ).join("")}
       </ul>
     </li>`
   ).join("");
};
 
//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>
1
mplungjan 27 feb. 2021 a las 08:05

Está ejecutando el segundo bucle for hasta data.length, en lugar de hacerlo, debe ejecutar hasta elements.ratings.length, luego obtendrá todos los comentarios y estrellas para ese restaurante en particular.

`fetch("http://localhost/ApiMap/data.json")
.then((response) => response.json())
.then(function(data) {
   
    data.forEach((element) => {
        const name = element.restaurantName;
        const address = element.address;

        for(let i = 0; i < element.ratings.length; i++) {
            const comment = element.ratings[i].comment;
            const stars = element.ratings[i].stars;
            
        }
        init_resto(name, address, comment, stars);
        
    });

})`
-1
Gaurav Pandey 27 feb. 2021 a las 07:48