Цикл по данным JSON и appendChild <TR>помещает данные в одну строку? - PullRequest
Новая
       16

Цикл по данным JSON и appendChild <TR>помещает данные в одну строку?

1 голос
/ 17 мая 2019

Справочная информация: Я подумал, что получу динамически созданную таблицу с таким же количеством тегов <TR>, что и записей в данных JSON.

Результат: Цикл создает только одну таблицу TR и помещает все данные в одну строку.

Ниже приведен фрагмент создания цикла и таблицы. 

var tbl = document.createElement("table");
  var tblBody = document.createElement("tbody");
  var row = document.createElement("tr");
    var tdname = document.createElement('td');
    var tddate = document.createElement('td');
    var tdassigned = document.createElement('td');


    for (var i in data) {

    console.log("Hello world!" + i);
    tdname.appendChild(document.createTextNode(data[i].name));
    tddate.appendChild(document.createTextNode(data[i].date));
    tdassigned.appendChild(document.createTextNode(data[i].assigned));
    row.appendChild(tdname);
    row.appendChild(tddate);
    row.appendChild(tdassigned);


    }
    tblBody.appendChild(row);

    tbl.appendChild(tblBody);
    document.getElementById("tasklist").appendChild(tbl);

Вопрос: Нужно ли создавать уникальную переменную строки для каждого цикла?

Ответы [ 3 ]

1 голос
/ 17 мая 2019

Было несколько проблем:

  1. Вы добавляете текст к td, не очищая их. Вместо этого вы можете сделать document.createElement('td') в цикле для каждой из ваших точек данных.
  2. Вам нужна строка для каждой итерации данных, это также можно сделать в цикле.
  3. Пожалуйста, используйте let и const вместо var. Пожалуйста, смотрите этот пост для получения дополнительной информации.

Попробуйте что-то вроде этого: 

const data = [{
    name: 'name1',
    date: 'date1',
    assigned: 'assigned1'
  },
  {
    name: 'name2',
    date: 'date2',
    assigned: 'assigned2'
  },
  {
    name: 'name3',
    date: 'date3',
    assigned: 'assigned3'
  },
];

let tbl = document.createElement("table");
let tblBody = document.createElement("tbody");
data.forEach(d => {
  let row = document.createElement("tr");
  row.appendChild(document.createTextNode(d.name));
  row.appendChild(document.createTextNode(d.date));
  row.appendChild(document.createTextNode(d.assigned));
  tblBody.appendChild(row);
});

tbl.appendChild(tblBody);
document.getElementById("tasklist").appendChild(tbl);
<div id='tasklist'></div>

Надеюсь, это поможет,

0 голосов
/ 17 мая 2019
  1. Если data - это массив объектов, начните с метода массива, такого как .map() или .forEach() (для демонстрации используется .foreach(), поскольку новый массив на самом деле не нужен для создания таблицы).
  2. Это будет перебирать массив, используя .insertRow() для каждого объекта. Теперь преобразуйте каждый объект в элемент его значений с помощью Object.values() или Object.keys() (в демоверсии используется Object.values(), который сохраняет шаг).
  3. Теперь итерируйте массив значений с .forEach() или .map() и .insertCell(), затем .textContent значениями для ячеек. 

let data = [{
    name: 'John Doe',
    date: '1/1/19',
    assigned: 'A'
  },
  {
    name: 'Jane Doe',
    date: '2/1/819',
    assigned: 'B'
  },
  {
    name: 'Darth Vader',
    date: '3/11/19',
    assigned: 'C'
  },
  {
    name: 'Obi Wan',
    date: '4/20/19',
    assigned: 'D'
  }
];

const frag = document.createDocumentFragment();
const tbl = document.createElement("table");
const tblB = document.createElement("tbody");
tbl.appendChild(tblB);
frag.appendChild(tbl);

data.forEach((obj, idx) => {
  let row = tblB.insertRow();
  Object.values(obj).forEach(val => {
    let cell = row.insertCell();
    cell.textContent = val;
  });
});

document.body.appendChild(frag);
0 голосов
/ 17 мая 2019

Я только что видел твой комментарий, что ты предпочитаешь vanilla js.Вот способ jquery, если интересно.

var data = [
    { Column1: "col1row1", Column2: "col2row1" },
    { Column1: "col1row2", Column2: "col2row2" }
];

$("#tasklist")
    .append($('<table>')
        .append($('<tbody>')));

var tbody = $("#tasklist > table > tbody");

$.each(data, function (idx, item) {
    $(tbody).append($('<tr>')
        .append($('<td>')
            .text(item.Column1)
        )
        .append($('<td>')
            .text(item.Column2)
        )
    );
});
...