Object key value with dynamic variables to HTML using Javascript

Question

I'm new at developing web application and have a difficulty to send out JSON data using Javascript to HTML.

Let say my JSON data from API is like below.

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

Is there any way to take JSON values like below? The code is like pseudocode.

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

so that the result comes to like this.

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

Do you have any ideas that I can make it like this result?

Thank you!!

I updated my code example. I deleted loop for statement.

I realized that it is unnecessary.

You only need your outer `for` loop (change it to `<= 4`), and then use bracket notation to grab the values from your object `"" + data["Tool" + a +"_qty"] + "";` and the same for `_loc` and `_note`. For this type of data, you really should be using an array eg: `[{qty: 1, loc: "aaa", note: "aaa"}, {...}, ...]` — Nick Parsons, Jul 27 '21 at 08:58

score 0 · Accepted Answer · edited Jul 27 '21 at 09:59

0

You're not concatenating the strings correctly... It should look like this

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>

edited Jul 27 '21 at 09:59

Nitheesh

19,238
3
22
49

answered Jul 27 '21 at 08:56

AdityaParab

7,024
3
27
40

I succeeded to get a result that I want from you code, thank you!! – Jun Jul 27 '21 at 09:40
@AdityaParab, I think it is because you have an unnecessary `for loop` before editing. ps: I didn't downvote your ans. – ikhvjs Jul 27 '21 at 10:34
These nested template strings are horrific `\`${data[\`Tool${a}_qty\`]}\`;` – mplungjan Jul 27 '21 at 12:07

rozklad · Answer 2 · 2021-07-27T09:02:56.323

0

You need variable in object key name. Given your example, one possible approach might be:

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

Demo here: https://jsfiddle.net/rozklad/p3sw89hb/6/

edited Jul 27 '21 at 09:02

answered Jul 27 '21 at 09:00

rozklad

442
6
11

2

Hi, you can also use SO code snippet https://meta.stackoverflow.com/questions/356678/stack-overflow-run-code-snippet – ikhvjs Jul 27 '21 at 09:01
json is comming through the URL and I updated my question again. I'll try this one to my code I got a hint from your answer. Thank you!! – Jun Jul 27 '21 at 09:09

mplungjan · Answer 3 · 2021-07-27T12:29:48.967

You need bracket notation

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

But based on your object we can simplify

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>

If your object was an array:

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>

I succeeded with the other answer but I'll try yours also for learning. Thank you!! — Jun, Jul 27 '21 at 09:41
@Nitheesh, you updated the accepted answer and why do you still ask `Really`? — ikhvjs, Jul 27 '21 at 10:36
@Nitheesh, Noted with thanks. I don't understand it because I don't think an answer with logical error is a good answer too. — ikhvjs, Jul 27 '21 at 12:57

Nitheesh · Answer 4 · 2021-07-27T09:23:58.720

0

You cannot access the object nodes with obj.Tool[b]_qty instead you have to access the same with obj['Tool' + b + '_qty']. This can also be access with below mentioned syntax.

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>

edited Jul 27 '21 at 09:23

answered Jul 27 '21 at 09:09

Nitheesh

19,238
3
22
49

I succeeded with the other answer but I'll try yours also for learning. Thank you!! – Jun Jul 27 '21 at 09:42
@Jun Okay. There were some isses with the accepted answer. I have edited the answer. You can verify the same. If my answer makes some input to your learning, please add an upvote to this. Happy Learning. – Nitheesh Jul 27 '21 at 10:00

score 0 · Answer 5 · answered Jul 27 '21 at 09:28

0

Here is your solution

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

answered Jul 27 '21 at 09:28

Wajid

593
3
11

I succeeded with the other answer but I'll try yours also for learning. Thank you!! – Jun Jul 27 '21 at 09:42
I strongly recommend you do not call the variables the same as the functions. Do use better names – mplungjan Jul 27 '21 at 12:08

Object key value with dynamic variables to HTML using Javascript

5 Answers5