将ajax响应附加到html表

Posted 2023-02-14

【中文标题】将ajax响应附加到html表

【英文标题】：Append ajax response to html table

【发布时间】：2022-01-08 21:15:03

【问题描述】：

我有一个 AJAX 函数，它在页面加载时返回这个 json 数组。

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

我想要的只是将高分和用户名而不是 uid 附加到表格中，以便在页面加载后填充表格。

<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>

我尝试了每个循环，但我无法让它工作，感谢任何帮助。

【参考方案1】：

这很简单。您只需要遍历每个对象。 像这样：

const data = 
   "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"
   
;

for (const key in data) 
  const Highscore, username, rank = "???" = data[key];
  document.querySelector('table > tbody').innerhtml += `
    <tr><td>$rank</td><td>$username</td><td>$Highscore</td></tr>`;

<table>
  <thead>
    <th style="text-align: center;">Rank</th>
    <th style="text-align: center;">Username</th>
    <th style="text-align: center;">Highscore</th>
  </thead>
  <tbody></tbody>
</table>

【参考方案2】：

var obj =
   "ydtd4EGwIgb9QAPekbzBUXq9ZXp2":
      "Highscore":1000,
      "username":"ash"
   ,
   "qo80G8bFPsRkujLm9qWtASz0TE32":
      "Highscore":900,
      "username":"pink"
   ,
  "OeUusBMYjBSYg6UJ8I3eze2TUHi2":
      "Highscore":1200,
      "username":"yellow"
   ,
   "9xn2ZH9m63Rs34Erkz6N69kuE653":
      "Highscore":100,
      "username":"violet"
   

var res = Object.keys(obj).map((data)=>
  var innerdata = obj[data];
  var score = innerdata.Highscore;
  var username = innerdata.username;
  return [score,username]
)
var result = res.sort((a,b)=> b[0]-a[0])
var final = Object.keys(result).map((rank)=>
  var Rank =Number(rank)+1;
  var score = result[rank][0];
  var name = result[rank][1]
 document.querySelector('table > tbody').innerHTML += `
    <tr><td>$Rank</td><td>$name</td><td>$score</td></tr>`;
)

【讨论】：

用于根据分数获得排名

感谢您的回复，但我仍然在表格中收到未定义的值

谢谢，我只是忘了解析 json，它现在可以工作了！

请查看ajax的响应

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。