рендеринг данных JSON в HTML-таблицы

Question

Я пытаюсь получить огромный файл JSON в таблицу HTML. Но я продолжаю получать Uncaught TypeError: v.forEach is not a function ошибку. Что я делаю не так?

Мой 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"
            }
    }

Мой код:

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

Пока я только пытаюсь просмотреть большую часть своих данных в консоли. Мне нужно собрать все эти данные в таблицу. Есть ли другой простой способ сделать это? Чего мне не хватает

Пока мой код возвращает значения, но также выдает ошибку Uncaught TypeError: v.forEach is not a function.

Answer 1

Наконец, с вашим последним комментарием мне удалось понять, что я предполагал с самого начала.

Ваша проблема в том, что последнее значение не является массивом, а является объектом, поэтому у него нет метода forEach (как указано в сообщении об ошибке)

Это ваше последнее значение перед отображением ошибки. Вы можете ясно видеть, что это объект:

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

Вы можете решить свою проблему, проверив, является ли массив следующим образом:

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

Таким образом, вы избегаете вызова forEach для значений, не являющихся массивами.