使用 Javascript 将具有动态变量的对象键值转换为 HTML [重复]

Question

我是开发 Web 应用程序的新手，使用 Javascript 将 JSON 数据发送到 HTML 时遇到困难。

假设我来自 API 的 JSON 数据如下所示。

{"Tool1_qty": 1, "Tool1_loc": "aaa", "Tool1_note": "aaa",
 "Tool2_qty": 2, "Tool2_loc": "bbb", "Tool2_note": "bbb",
 "Tool3_qty": 3, "Tool3_loc": "ccc", "Tool3_note": "ccc",
 "Tool4_qty": 4, "Tool4_loc": "ddd", "Tool4_note": "ddd"}

有没有办法像下面这样获取 JSON 值？ 代码就像伪代码。

<script>
async function load(){
  let link = 'https://abcd.com/get';
  let data = await fetch(link);
  let obj = await data.json();

  var temp = "";
     for(var b=1; b<3; b++){
        temp += "<tr>";
        temp += "<td>"obj.Tool[b]_qty"</td>";
        temp += "<td>"obj.Tool[b]_loc"</td>";
        temp += "<td>"obj.Tool[b]_note"</td>";
     }

  document.getElementByID("Where_it_displayed").innerHTML = temp;
}
</script>

让结果变成这样。

1 aaa aaa
2 bbb bbb
3 ccc ccc
4 ddd ddd

你有什么想法可以让我做出这样的结果吗？

谢谢！！

---

我更新了我的代码示例。我删除了循环语句。

我意识到这是不必要的。

Answer 1

你没有正确连接字符串......它应该看起来像这样

const data = {
  Tool1_qty: 1, Tool1_loc: "aaa", Tool1_note: "aaa",
  Tool2_qty: 2, Tool2_loc: "bbb", Tool2_note: "bbb",
  Tool3_qty: 3, Tool3_loc: "ccc", Tool3_note: "ccc",
  Tool4_qty: 4, Tool4_loc: "ddd", Tool4_note: "ddd"
};

var temp = "<table><tbody>";
for (var a = 1; a <= 4; a++) {
    temp += "<tr>";
    temp += `<td>${data[`Tool${a}_qty`]}</td>`;
    temp += `<td>${data[`Tool${a}_loc`]}</td>`;
    temp += `<td>${data[`Tool${a}_note`]}</td>`;
    temp += `</tr>`;
}
temp += "</tbody></table>";
document.getElementById("app").innerHTML = temp;

<div id="app"></div>

Answer 2

您需要在对象键名中使用变量。鉴于您的示例，一种可能的方法可能是：

const data = {"Tool1_qty": 1, "Tool1_loc": "aaa", "Tool1_note": "aaa",
 "Tool2_qty": 2, "Tool2_loc": "bbb", "Tool2_note": "bbb",
 "Tool3_qty": 3, "Tool3_loc": "ccc", "Tool3_note": "ccc",
 "Tool4_qty": 4, "Tool4_loc": "ddd", "Tool4_note": "ddd"};

const rows = [];

for (let i = 1; i <= 4; i++) {
    const row = [
      data[`Tool${i}_qty`],
      data[`Tool${i}_loc`],
      data[`Tool${i}_loc`]
    ];
  
  rows.push(`<tr><td>${row.join('</td><td>')}</td></tr>`);
}

document.getElementById("Where_it_displaye").innerHTML = rows.join('');

在这里演示：https://jsfiddle.net/rozklad/p3sw89hb/6/

Answer 3

您不能使用obj.Tool[b]_qty 访问对象节点，而必须使用obj['Tool' + b + '_qty'] 访问相同的对象节点。这也可以使用下面提到的语法访问。

obj[`Tool${b}_qty`]

const Tool = {
  "Tool1_qty": 1, "Tool1_loc": "aaa", "Tool1_note": "aaa",
  "Tool2_qty": 2, "Tool2_loc": "bbb", "Tool2_note": "bbb",
  "Tool3_qty": 3, "Tool3_loc": "ccc", "Tool3_note": "ccc",
  "Tool4_qty": 4, "Tool4_loc": "ddd", "Tool4_note": "ddd"
}
var temp = "";
for (var a = 1; a <= 4; a++) {
  temp += "<tr>";
  ['_qty', '_loc', '_note'].forEach((key) => {
    temp += "<td>" + Tool[`Tool${a}${key}`] + "</td>";
  })
}
document.getElementById("Where_it_displaye").innerHTML = temp;

<table id="Where_it_displaye"></table>

Answer 4

这是你的解决方案

let array=[{"Tool1_qty": 1, "Tool1_loc": "aaa", "Tool1_note": "aaa"},
 {"Tool2_qty": 2, "Tool2_loc": "bbb", "Tool2_note": "bbb"},
 {"Tool3_qty": 3, "Tool3_loc": "ccc", "Tool3_note": "ccc"},
 {"Tool4_qty": 4, "Tool4_loc": "ddd", "Tool4_note": "ddd"}]
 function temp(){
 var temp = "";

for(var a=0; a<4; a++){
 

 let b=a+1;
      
      temp += "<tr>";
      temp += "<td>"+array[a]["Tool"+b+"_qty"]+"</td>";
      temp += "<td>"+array[a]["Tool"+b+"_loc"]+"</td>";
      temp += "<td>"+array[a]["Tool"+b+"_note"]+"</td>";
 
   
   
}
console.log(temp)
}

temp();

Answer 5

你需要括号符号

temp += "<td>"+obj["Tool"+b+"_qty"]+"</td>";

但根据您的对象，我们可以简化

const obj = {"Tool1_qty": 1, "Tool1_loc": "aaa", "Tool1_note": "aaa", "Tool2_qty": 2, "Tool2_loc": "bbb", "Tool2_note": "bbb", "Tool3_qty": 3, "Tool3_loc": "ccc", "Tool3_note": "ccc", "Tool4_qty": 4, "Tool4_loc": "ddd", "Tool4_note": "ddd"};

const html =  Object.values(obj)
  .map((val,i) =>  `${i > 0 && i % 3 === 0 ?  "</tr><tr>":""}<td>${val}</td>`)
  .join("");
console.log(`<tr>${html}</tr>`);
document.getElementById("tb").innerHTML = `<tr>${html}</tr>`;

<table>
<tbody id="tb"></tbody></table>

如果你的对象是一个数组：

const arr =  [{"Tool_qty": 1, "Tool_loc": "aaa", "Tool_note": "aaa"},
    { "Tool_qty": 2, "Tool_loc": "bbb", "Tool_note": "bbb"},
    { "Tool_qty": 3, "Tool_loc": "ccc", "Tool_note": "ccc"},
    { "Tool_qty": 4, "Tool_loc": "ddd", "Tool_note": "ddd"}]

document.getElementById("tb").innerHTML = arr
  .map(({Tool_qty,Tool_loc,Tool_note}) =>  `<tr>
    <td>${Tool_qty}</td>
    <td>${Tool_loc}</td>
    <td>${Tool_note}</td></tr>`).join("")
 

<table>
<tbody id="tb"></tbody></table>