rendering JSON data to HTML tables

Question

I am trying to get a huge json file into a HTML table. But I keep getting Uncaught TypeError: v.forEach is not a function error. What am I doing wrong?

My JSON:

{
"data": {
    "goog": {
        "calls": [
            {
                "bv": {
                    "fatal": [
                        "xyz"
                    ],
                    "notice": [
                        "v35",
                        "abc"
                    ],
                    "syntax": [],
                    "warning": [
                        "pto"
                    ]
                },
                "data": {
                    "lmc": "9",
                    "aid": "a103",
                    "as": "2"
                },
                "result": {
                    "fatal": [
                        "theFatal"
                    ],
                    "notice": [
                        "notice1",
                        "notice2"
                    ],
                    "syntax": [],
                    "warning": [
                        "warning1"
                    ]
                },
                "url": "https://www.google.com",
                "validated": false,
                "vendor": "AA"
            }, 
            "data": {
    "goog": {
        "calls": [
            {
                "bv": {
                    "fatal": [
                        "xyz"
                    ],
                    "notice": [
                        "v35",
                        "abc"
                    ],
                    "syntax": [],
                    "warning": [
                        "pto"
                    ]
                },
                "data": {
                    "lmc": "9",
                    "aid": "a103",
                    "as": "2"
                },
                "result": {
                    "fatal": [
                        "theFatal"
                    ],
                    "notice": [
                        "notice1",
                        "notice2"
                    ],
                    "syntax": [],
                    "warning": [
                        "warning1"
                    ]
                },
                "url": "https://www.google.com",
                "validated": false,
                "vendor": "AA"
            }
    }

My code:

let api_url = `api?ar=${run_id}`;
console.log(api_url);

$.getJSON(api_url, function(data) {
  console.log(data);

  Object.values(data).forEach(d => {
    console.log(d);
    $.each(d.goog, function(k,v) {
      v.forEach((x,y) => {
        console.log(x);
      });
    });
  });

For now I am only trying to view a lot of my data in the console. I need to get all this data in a table. Is there another easy way to do this? What Am I missing.

For now my code is returning the values but also giving me the Uncaught TypeError: v.forEach is not a function error.

Answer 1

Finally, with your last comment, I manage to understand what I assumed from the beginning.

Your problem is that the last value is not an array, but an object so it does not have forEach method (as the error states)

This is your last value before the error is shown. You can clearly see that it is an object:

{ "fatal":14,"notice":14,"syntax":0,"warning":2 }

You can solve your problem by checking if is an array like this:

Object.values(data).forEach(d => {
    console.log(d);
    $.each(d.goog, function(k, v) {
        if(Array.isArray(v) { // <--- HERE checks if value is an array.
            v.forEach((x, y) => {
                console.log(x);
            });
        }
    });
});

This way you avoid calling forEach on non array values.