Añadir la respuesta de ajax a una tabla HTML.

Tengo una función AJAX que devuelve esta matriz JSON cuando se carga la página. Lo que quiero es agregar solo la puntuación más alta y el nombre de usuario, pero no el UID en la tabla para que la tabla se llene una vez que se cargue la página.

{ "ydtd4EGwIgb9QAPekbzBUXq9ZXp2":{ "Highscore":1000, "username":"ash" }, "qo80G8bFPsRkujLm9qWtASz0TE32":{ "Highscore":900, "username":"pink" }, "oyWEgmEAMENvr8zTGd6gqCMyVPS2":{ "Highscore":800, "username":"orange" }, "acjqiNwlxqfZsSaRBYKoaVOqomh1":{ "Highscore":700, "username":"white" }, "IhnWPgRT1gVLrxLhD6ZvNn9migX2":{ "Highscore":"700", "username":"RED" }, "ZeGUezY38gcHX0NXaommRPR65cR2":{ "Highscore":600, "username":"blue" }, "A41jXf0wmQQqzUlAu6WAuaf04Nk2":{ "Highscore":600, "username":"mary" }, "Vm4jMNI83mSFdN4wYbfJ6C7ecEH3":{ "Highscore":500, "username":"green" }, "PtTdYXIWYAeMOrIPE8FBN66F9L32":{ "Highscore":400, "username":"gray" }, "OeUusBMYjBSYg6UJ8I3eze2TUHi2":{ "Highscore":300, "username":"yellow" }, "9xn2ZH9m63Rs34Erkz6N69kuE653":{ "Highscore":100, "username":"violet" } }

<table class="table table-borderless table-dark table-striped" id="records_table"> <tr> <th style="text-align: center;">Rank</th> <th style="text-align: center;">Username</th> <th style="text-align: center;">Highscore</th> </tr> </table>

Intenté hacer un bucle cada pero no puedo hacer que funcione, cualquier ayuda es apreciada.

davy.ai

June 18, 2023 at 9:19 pm

Para conseguir esto, puede analizar la respuesta JSON y luego recorrer las claves del objeto, agregando los valores del nombre de usuario y la puntuación alta a las filas de la tabla.

Aquí hay un fragmento de código de muestra que debería hacer el truco:

// asumiendo que su función AJAX se llama fetchScores()
fetchScores().then(scores => {
  const table = document.getElementById("records_table");
  let i = 1;

  // recorra cada objeto de puntuación
  for (const [uid, score] of Object.entries(scores)) {
    const row = document.createElement("tr");
    const rank = document.createElement("td");
    const username = document.createElement("td");
    const highscore = document.createElement("td");

    // agregue el número de fila (rango)
    rank.innerText = i++;

    // agregar el nombre de usuario
    username.innerText = score.username;

    // agregue la puntuación alta
    highscore.innerText = score.Highscore;

    // agregue las celdas a la fila
    row.appendChild(rank);
    row.appendChild(username);
    row.appendChild(highscore);

    // agregue la fila a la tabla
    table.appendChild(row);
  }
});

Este código primero recuperar las puntuaciones con una función AJAX y luego recorrer cada objeto de puntuación utilizando Object.entries(). Para cada puntuación, crea una nueva fila de tabla y agrega el rango (basado en el índice del bucle), el nombre de usuario y la puntuación alta a la fila. Finalmente, agrega la fila a la tabla.

Deberá asegurarse de que la función fetchScores () devuelve una promesa que se resuelve con la matriz JSON, y que llama a este código una vez que la página ha terminado de cargarse (por ejemplo, usando window.onload).

Answer

davy.ai

June 18, 2023 at 9:19 pm
Para conseguir esto, puede analizar la respuesta JSON y luego recorrer las claves del objeto, agregando los valores del nombre de usuario y la puntuación alta a las filas de la tabla.

Aquí hay un fragmento de código de muestra que debería hacer el truco:
```
// asumiendo que su función AJAX se llama fetchScores()
fetchScores().then(scores => {
  const table = document.getElementById("records_table");
  let i = 1;

  // recorra cada objeto de puntuación
  for (const [uid, score] of Object.entries(scores)) {
    const row = document.createElement("tr");
    const rank = document.createElement("td");
    const username = document.createElement("td");
    const highscore = document.createElement("td");

    // agregue el número de fila (rango)
    rank.innerText = i++;

    // agregar el nombre de usuario
    username.innerText = score.username;

    // agregue la puntuación alta
    highscore.innerText = score.Highscore;

    // agregue las celdas a la fila
    row.appendChild(rank);
    row.appendChild(username);
    row.appendChild(highscore);

    // agregue la fila a la tabla
    table.appendChild(row);
  }
});
```
Este código primero recuperar las puntuaciones con una función AJAX y luego recorrer cada objeto de puntuación utilizando Object.entries(). Para cada puntuación, crea una nueva fila de tabla y agrega el rango (basado en el índice del bucle), el nombre de usuario y la puntuación alta a la fila. Finalmente, agrega la fila a la tabla.

Deberá asegurarse de que la función fetchScores () devuelve una promesa que se resuelve con la matriz JSON, y que llama a este código una vez que la página ha terminado de cargarse (por ejemplo, usando window.onload).

Comments are closed.

es.davy.ai

¿Tienes una pregunta?

Añadir la respuesta de ajax a una tabla HTML.

Answer

davy.ai