Динамическая таблица JavaScript не будет отображать итерации из массива - PullRequest
Новая
       7

Динамическая таблица JavaScript не будет отображать итерации из массива

0 голосов
/ 11 декабря 2018

извиняюсь за простоту этого вопроса .... function tablesfromDb ();выполняет итерацию и корректно генерирует данные из массива данных, указанного выше в console.log, однако генератор таблиц javaScript отображает только последнюю итерацию.Почему генератор динамических HTML-таблиц javascript не отображает все итерации, как в console.log ???????Мне потребовалось 3 дня, чтобы добраться до этой точки, и я не могу пройти через это .... 

    var data = 
    [
        {
          "deviceOne":
            {
              "input": ["oneInOne", "oneInTwo","oneInThree","oneInFour"],
              "output": ["oneOutOne", "oneOutTwo", "oneOutThree"]
            }
        },
        {
            "deviceTwo":
              {
                "input": ["twoInOne", "twoInTwo","twoInThree","twoInFour"],
                "output": ["twoOutOne", "twoOutTwo", "twoOutThree", "twoOutFour", "twoOutFive"]
              }
          }
    ]

function tablesFromDb(){

  for(j=0; j<data.length; j++){
    var tableTop = "<form><table>";
    var tableHeader = "<tr><th>No</th><th>Input</th><th>Output</th>";
    var tableBottom = "</table></form>";
    var insideArray = data[j];
        
    for(deviceTitle in insideArray){
    var fbdCaption = "<caption>" + deviceTitle + "</caption>\n";
    console.log(deviceTitle);

      for(k=0; k<insideArray[deviceTitle]["input"].length; k++){
      var fdbCellData = "<tr><td>" + (k+1) + "</td>" + "<td>" + insideArray[deviceTitle]["input"][k] + "</td>" + "<td>" + insideArray[deviceTitle]["output"][k] + "</td></tr>\n";
      console.log(insideArray[deviceTitle]["input"][k]);
      console.log(insideArray[deviceTitle]["output"][k]);
      }
    }
    document.getElementById('container').innerHTML = tableTop + fbdCaption + tableHeader + fdbCellData + tableBottom;
  }
}
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>title</title>
  </head>
  <body onload="tablesFromDb();">
    
    <div id="container"></div>

  <script src=js.js></script>
  </body>
</html>

ОБНОВЛЕНИЕ: у меня это работает частично, но у меня все еще есть проблемы с пониманием, как этот цикл фактически работает.Как получить последний цикл for для итераций (как я предполагаю) вышеупомянутого цикла для отображения правильного содержимого обеих таблиц .... Я не очень хорош в этом .... 

var data = [
  {
    deviceOne: {
      input: ["oneInOne", "oneInTwo", "oneInThree", "oneInFour"],
      output: ["oneOutOne", "oneOutTwo", "oneOutThree"]
    }
  },
  {
    deviceTwo: {
      input: ["twoInOne", "twoInTwo", "twoInThree", "twoInFour"],
      output: ["twoOutOne", "twoOutTwo", "twoOutThree", "twoOutFour"]
    }
  }
];

    //var fdbCellData = "";
function tablesFromDb() {
  var tableTop = "";
  var tableBottom = "";
  var fdbCellData = "";
  
  for (j = 0; j < data.length; j++) {
    var insideArray = data[j];
    //var fdbCellData = "";

    for(var deviceTitle in insideArray){
    tableTop += "<form><table border=1><caption>" + deviceTitle + "</caption>";
    tableTop += "<tr><th>No</th><th>Input</th><th>Output</th>";
    tableBottom += "</table></form>";
    console.log(deviceTitle);
    //var fdbCellData = "";
  
    for (k = 0; k < insideArray[deviceTitle].input.length; k++) {
      fdbCellData += "<tr><td>" + (k + 1) + "</td>";
      fdbCellData += "<td>" + insideArray[deviceTitle].input[k] + "</td>";
      fdbCellData += "<td>" + insideArray[deviceTitle].output[k] + "</td></tr>";
    }
    }

  }
  document.getElementById("container").innerHTML =
    tableTop + fdbCellData + tableBottom;
}
<body onload="tablesFromDb();">
    
    <div id="container"></div>

  </body>

Ответы [ 3 ]

0 голосов
/ 11 декабря 2018

Необходимо определить данные вашей ячейки вне вашей петли.Попробуйте это: 

function tablesFromDb(){
    for(j=0; j<data.length; j++){
        var tableTop = "<form><table>";
        var tableHeader = "<tr><th>No</th><th>Input</th><th>Output</th>";
        var tableBottom = "</table></form>";
        var insideArray = data[j];
        var fbdCaption = "<caption>" + deviceTitle + "</caption>\n";
        var fdbCellData = "";
        for(deviceTitle in insideArray){
           for(k=0; k<insideArray[deviceTitle]["input"].length; k++){
              fdbCellData += "<tr><td>" + (k+1) + "</td>" + "<td>" + insideArray[deviceTitle]["input"][k] + "</td>" + "<td>" + insideArray[deviceTitle]["output"][k] + "</td></tr>\n";
           }
        }
        document.getElementById('container').innerHTML = tableTop + fbdCaption + tableHeader + fdbCellData + tableBottom;
      }
    }
0 голосов
/ 13 декабря 2018

НАКОНЕЦ РАБОТАЕТ !!Спасибо @trincot и моему сыну за то, что они указали мне правильное направление ...Для тех, кто заинтересован, я немного изменил структуру данных, чтобы сделать ее более управляемой.Остальное вы можете увидеть в коде. 

const data = [
  {
    name: "deviceOne",
    input: ["oneInOne", "oneInTwo", "oneInThree", "oneInFour"],
    output: ["oneOutOne", "oneOutTwo", "oneOutThree"]
  },
  {
    name: "deviceTwo",
    input: ["twoInOne", "twoInTwo", "twoInThree", "twoInFour"],
    output: ["twoOutOne", "twoOutTwo", "twoOutThree", "twoOutFour"]
  },
    {
    name: "deviceThree",
    input: ["threeInOne", "threeInTwo", "threeInThree", "threeInFour"],
    output: ["threeOutOne", "threeOutTwo", "threeOutThree", "threeOutFour"]
  }
];


const container = document.getElementById('container');

for (var i = 0;  i < data.length; i++) {

let title = document.createElement('caption');
let table = document.createElement('table');
table.setAttribute('border', 1);
  var row = table.insertRow(0);
  var cell1 = row.insertCell(0);
  var cell2 = row.insertCell(1);
  var cell3 = row.insertCell(2);
  cell1.innerHTML = 'No';
  cell2.innerHTML = 'Input';
  cell3.innerHTML = 'Output';
    
	for (var j = 0; j < data[i].input.length; j++) {
  	var dataRow = table.insertRow();
    var dataCell1 = dataRow.insertCell();
    var dataCell2 = dataRow.insertCell();
    var dataCell3 = dataRow.insertCell();
    dataCell1.innerHTML = j+1;
    dataCell2.innerHTML = data[i].input[j]
    dataCell3.innerHTML = data[i].output[j]

  }
  
  title.innerText = data[i].name;
  
  container.appendChild(title);
  container.appendChild(table);

}
<div id="container">

</div>
0 голосов
/ 11 декабря 2018

Вам необходимо объявить fbdCaption вне вашего цикла и накапливать в нем значения внутри цикла.Во второй попытке все еще есть проблема:

HTML для обеих "верхних частей" таблицы объединяется в выделенную переменную и затем выводится так, что означает, что вы получаете две вершины сразу после вывода в выводе безстроки данных ниже первого.Аналогичные вещи происходят с двумя другими переменными, которые собирают HTML.Это также означает, что выходная структура HTML на самом деле недопустима.

Это не так сложно исправить, но я предпочитаю другой способ создания элементов HTML: использование методов DOM.

Кроме того, выесть один случай, когда у вас есть больше выходных значений, чем входных значений.Если бы это было иначе, ваш вывод был бы неполным.

Наконец, вы используете некоторые итерационные переменные, не определяя их явно.Это делает их глобальными.

Рабочий код может выглядеть так: 

// A helper function to append one table-row containing the given texts (array)
function insertRowWithTexts(table, tag, texts) {
    const row = table.insertRow();
    for (const text of texts) {
        const elem = document.createElement(tag); // Either a TD or a TH
        elem.textContent = text === undefined ? "" : text;
        row.appendChild(elem);
    }
}

function tablesFromDb(data) {
    for (const obj of data) {
        for (const deviceTitle in obj) {
            const { input, output } = obj[deviceTitle];
            const table = document.createElement("table");
            table.createCaption().textContent = deviceTitle;
            insertRowWithTexts(table, "th", ["No", "Input", "Output"]);
            for (let k = 0; k < Math.max(input.length, output.length); k++) {
                insertRowWithTexts(table, "td", [k+1, input[k], output[k]]);
            }
            document.getElementById("container").appendChild(table);
        }
    }
}

var data = [{deviceOne: {input: ["oneInOne", "oneInTwo", "oneInThree", "oneInFour"], output: ["oneOutOne", "oneOutTwo", "oneOutThree"]}},{deviceTwo: {input: ["twoInOne", "twoInTwo", "twoInThree", "twoInFour"],output: ["twoOutOne", "twoOutTwo", "twoOutThree", "twoOutFour"]}}];

document.addEventListener('DOMContentLoaded', () => tablesFromDb(data));
td, th {
    border: 1px solid;
}
<div id="container"></div>

Преимущество использования textContent = в объектах HTML-элемента заключается в том, что он заботится о любом экранировании символов, которое может потребоваться.Например, если текст содержит volt&ampere, он будет должным образом экранирован, поэтому он также будет отображаться так, а не как «вольт и т. Д.» Или что-то еще.

...