Javascript JSON 对象数组到 HTML 表

Question

I am new to javascript. I also tried different solutions in the forums. I want to print object data into a html table (tr>td). I need to pull this data from a url. The JSON structure is as given in the example. Also, the output of the data needs to be side by side. I tried with the code block below but it didn't work.I tried the suggested answers in this forum. All the data is coming, but what I want is to list the information of one person side by side on each line. How can I solve this? Thank you.

Note: 1-I know the answer in this link (It is not duplicate quesion). But as I said I want to sort the data side by side. 2-I am not creating this data. I need to get it from a url like this.

 { "name": [ "John", "Marie", "Clara" ], "surname": [ "Doe", "Jane", "Smith" ], "phone": [ "1233215555", "1233215555", "1233215555" ], "birthdate": [ "1980-12-14", "1990-02-13", "1995-03-10" ] } fetch(url).then(res => res.json()).then((out) => { for (let i = 0; i < out.length; i++) { console.log(out[i][name] + " " + out[i][surname] + " " + out[i][phone] + " " + out[i][birthdate]) } })

Answer 1

The order is wrong. out is an object of arrays (not an array of objects). Here I fixed the order of access with the assumption, that all properties contain an array with the same length:

 function fetch() { return Promise.resolve({ json() { return Promise.resolve({ "name": [ "John", "Marie", "Clara" ], "surname": [ "Doe", "Jane", "Smith" ], "phone": [ "1233215555", "1233215555", "1233215555" ], "birthdate": [ "1980-12-14", "1990-02-13", "1995-03-10" ] }) } }); } var url = "some-url"; fetch(url).then(res => res.json()).then((out) => { for (let i = 0; i < out.name.length; i++) { console.log(out.name[i] + " " + out.surname[i] + " " + out.phone[i] + " " + out.birthdate[i]) } })