Как вставить строку в Javascript с циклом?

У меня есть файл json, и я хочу преобразовать данные в таблицу с помощью Javascript. Я нашел несколько похожих вопросов Как преобразовать следующую таблицу в JSON с помощью javascript? , цикл через объект json, но все они используют jQuery и показывают таблицу в html-сети. Мне просто нужен простой цикл для вставки строки в таблицу. Я пробовал «добавить», «вставить» и «вставить строку», все не работает. Может ли кто-нибудь дать мне подсказку?

JSON-файл:

{
"name": "lily",
"country": "china",
"age": 23
},
{
"name": "mike",
"country": "japan",
"age": 22
},
{
"name": "lucy",
"country": "korea",
"age": 25
 }

Мой код:

    var jdata = {};
    jdata.cols = [
        {
            "id": "1",
            "label": "name",
            "type": "string"
        },
        {
            "id": "2",
            "label": "country",
            "type":"string"
        }
    ];

    for(var i = 1; i < 3; i++){
        row = [
            {
                "c": [
                    {
                      "v": json["hits"]["hits"][i]["_source"]["name"]         
                    },
                    {
                       "v": json["hits"]["hits"][i]["_source"]["country"]
                    }
                ]
            }
        ];
        jdata.rows.insertRow(row);
    }

Обновлено: добавьте ожидаемый результат: измените файл json на следующую структуру.

[
    ['lily', 'china'],
    ['mike', 'japan'],
    ['lucy', 'korea'], 
  ]

вы всегда можете преобразовать json в обычный массив, затем добавить нужные данные, а затем преобразовать их обратно в json

Sir Catzilla 30.05.2019 11:27

Пожалуйста, объясните, что это за часть должна быть и как она относится к остальной части кода? "v": json["hits"]["hits"][i]["_source"]...

zer00ne 01.06.2019 07:51
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
2
2 127
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Думаю, вам нужен толкать (или конкат/push(...elements), если вы хотите добавить массив строк)

    jdata.rows = [];
    for(var i = 1; i < 3; i++){
        row = [
            {
                "c": [
                    {
                      "v": json["hits"]["hits"][i]["_source"]["name"]         
                    },
                    {
                       "v": json["hits"]["hits"][i]["_source"]["country"]
                    }
                ]
            }
        ];
        jdata.rows.push(row);
        // for elements from row
        // jdata.rows.push(...row)
    }

Спасибо за помощь. "толчок" - хороший способ. но я получаю сообщение об ошибке «Невозможно прочитать свойство «0» неопределенного». Я неправильно понял данные массива и json?

landy 31.05.2019 11:03

Какая это линия? В этом коде единственное, что я вижу с числовым индексом, это json["hits"]["hits"][i]. Попробуйте console.info(json["hits"]) и проверьте значения в консоли инспектора элемента (proly ctrl+shift+i)

Krzysiek 01.06.2019 00:34

Я попробовал 'console.info(json["hits"]["hits"])', и в результате получился правильный json, который мне нужен.

landy 04.06.2019 15:07

Я нахожу проблему «Невозможно прочитать свойство« 0 »неопределенного». убрать одну скобку в коде: row = [ { "c":...} ] => row = {"c"...}. Теперь это работает хорошо. Спасибо еще раз.

landy 04.06.2019 15:37

В вашем коде есть несколько ошибок

  1. JSON должен быть массивом, чтобы вы могли просмотреть каждый объект для отображения.
  2. insertRow() — это метод из объекта Table, jdata.rows — это не объект Table, а массив.

Поскольку вы использовали insertRow(), я переписал ваш код для отображения данных таблицы с использованием методов Table Object. Вот фрагмент кода

Редактировать: Вы можете использовать метод push() для создания необходимой структуры JSON. Я отредактировал фрагмент кода, чтобы создать необходимый JSON.

var jdata = {
  cols: [{
      "id": "1",
      "label": "name",
      "type": "string"
    },
    {
      "id": "2",
      "label": "country",
      "type": "string"
    }
  ],
  rows: []
};

var persons = [{
    "name": "lily",
    "country": "china",
    "age": 23
  },
  {
    "name": "mike",
    "country": "japan",
    "age": 22
  }, {
    "name": "lucy",
    "country": "korea",
    "age": 25
  }
];

var table = document.getElementById("table");
var header = table.createTHead();
var footer = table.createTFoot();
var rowHeader = header.insertRow(0);

jdata.cols.forEach((col, index) => {
  var cell = rowHeader.insertCell(index);
  cell.innerHTML = col.label;
});

persons.forEach((person, index) => {
  var rowFooter = footer.insertRow(index);
  rowFooter.insertCell(0).innerHTML = person.name;
  rowFooter.insertCell(1).innerHTML = person.country;
  
  jdata.rows.push([person.name, person.country]);
});

console.info(jdata.rows);
<table id = "table">

</table>

Спасибо за четкий комментарий! но я не хочу, чтобы таблица показывалась в Интернете. Я хочу перенести файл json в новую структуру (отредактировано).

landy 31.05.2019 11:19

@landy Я отредактировал свой ответ, включив в него вашу новую структуру JSON.

nash11 31.05.2019 11:48

Другие вопросы по теме