Javascript JSON array of objects to HTML table

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])
    }
  })

`console.log` always outputs a linebreak. If you want multiple things to appear on one line, you need to construct a string with all those things (and some spaces probably), and only then call `console.log`. Furthermore the object is not an array. Try using `Object.keys(out)`, it will produce `["name","surname"]` and with that you can navigate through the object. — Peter B, Dec 14 '21 at 08:45
There's no [JSON](https://www.json.org/json-en.html) in your question. That's an object with two properties. Both properties have an array as value. -> [What is the difference between JSON and Object Literal Notation?](https://stackoverflow.com/questions/2904131/what-is-the-difference-between-json-and-object-literal-notation) — Andreas, Dec 14 '21 at 08:46
Also the object is really poor. Never have two arrays when you can have one array of `{ "firstname": "John", "lastname" : "Doe"}` — mplungjan, Dec 14 '21 at 08:55
I strongly suggest you change the object to an object array. Then you can do [this](https://jsfiddle.net/mplungjan/cu943jxk/) — mplungjan, Dec 14 '21 at 09:33
The order is wrong. `out` is an object of arrays (not an array of objects). Here is a fix: https://jsfiddle.net/u72aoLrs/ — jabaa, Dec 14 '21 at 22:38
Thank you to everyone who replied. Jabaa's answer solved my problem. Thank you @Jabaa — Murat, Dec 15 '21 at 13:13

score 0 · Accepted Answer · answered Dec 16 '21 at 09:55

0

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])
    }
  })

answered Dec 16 '21 at 09:55

jabaa

5,844
3
9
30

I'm not preparing the JSON data. The data I need to get from another domain is shared as a JSON file. Jabaa's answer fixed the problem, but a new one came up: "Access to fetch at example.com/data.JSON from origin 'localhost:85' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled." I dont know set the cors header. – Murat Apr 20 '22 at 19:37
@Murat That's a completely different and unrelated question. You should seach for _"No 'Access-Control-Allow-Origin' header"_ and ask a new question if you can't solve the problem. – jabaa Apr 20 '22 at 20:31
@Murat Please don't ask unrelated follow-up questions in the comment section of an answer. Please ask a new question. You should explain what you've tried and why the dozens of duplicates on this topic didn't help, otherwise it will be downvoted and closed. You don't have to be an expert. This is a daily asked question. – jabaa Apr 20 '22 at 21:01

Javascript JSON array of objects to HTML table

1 Answers1