使用javascript将带有动态变量的对象键值转换为html

sh7euo9m 于 2021-09-29 发布在 Java

关注(0)|答案(5)|浏览(304)

此问题已在此处找到答案：

javascript属性访问：点符号与括号(（15个答案）
五小时前关门了。
我是开发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

你有没有什么想法，我可以把它做成这样的结果？
非常感谢。
我更新了我的代码示例。我删除了语句的循环。
我意识到这是不必要的。

JSON JavaScript Html

来源：https://stackoverflow.com/questions/68541768/object-key-value-with-dynamic-variables-to-html-using-javascript

5条答案

按热度按时间

bsxbgnwa1#

您没有正确连接字符串。。。应该是这样的

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>

赞(0）回复(0）举报 2021-09-29

cwtwac6a2#

无法使用访问对象节点 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>

赞(0）回复(0）举报 2021-09-29

oxiaedzo3#

对象键名称中需要变量。根据您的示例，一种可能的方法可能是：

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/

赞(0）回复(0）举报 2021-09-29

u0sqgete4#

这是你的解决方案

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();

赞(0）回复(0）举报 2021-09-29

w1jd8yoj5#

你需要括号符号

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>

赞(0）回复(0）举报 2021-09-29

我来回答

使用javascript将带有动态变量的对象键值转换为html

5条答案

相关问题

热门标签

最新问答