How to get a json array in localhost to web GUI. Please help

Question

In the backend order is automatically generated, and a json array is obtained in the end point. It should be loaded to a table in gui.

Answer 1

Sandali Harshani

Your json response contains Array of objects. So you can access data like this

for(var k = 0; k < arr.length; k++) {
var obj = arr[k];

var id = obj.id;
var name = obj.name;
var supplier = obj.supplier;
var weight = obj.weight;
var location = obj.location;
}

See the output Here:

https://code.sololearn.com/WnNhq0M1O47w/?ref=app

Answer 2

You can also use map array method.

https://code.sololearn.com/W7szX2OLX4JH/?ref=app

Answer 3

In this array are objects with keys and values. Where is your concrete problem?
Did you make your attempt, please link it from the Playground?

Answer 4

So accessing data as above. After that stay still generating of a table. Unfortunstelly we have no more details about how shall be look the table. I would like to start as follows:

for (let element of data) {
let row = table.insertRow();
for (key in element) {
let cell = row.insertCell();
let text = document.createTextNode(element[key]);
cell.appendChild(text);
}
}

Answer 5

Please show the json array sample or format

Answer 6

[{"id":"mars","name":"Mars","supplier":"Nestle","weight":1,"location":"a1.1/A"},{"id":"kitkat","name":"Kit Kat","supplier":"Nestle","weight":1,"location":"a1.1/A"},{"id":"dd","name":"Double Decker","supplier":"Nestle","weight":1,"location":"a1.1/A"},{"id":"mars","name":"Mars","supplier":"Nestle","weight":1,"location":"a1.1/A"},{"id":"kitkat","name":"Kit Kat","supplier":"Nestle","weight":1,"location":"a1.1/A"},{"id":"dd","name":"Double Decker","supplier":"Nestle","weight":1,"location":"a1.1/A"}]

Answer 7

For generating table

https://code.sololearn.com/Wnj5esPR8sw9/?ref=app