JavaScript пытается добавить HTML внутри таблицы с помощью createelement

Question

В моем html-файле есть json-код, и я пытаюсь добавить строки таблицы в начало html-таблицы в базовом html-файле с помощью javascript

Вот мой код JavaScript:

var data = json.data;
for (var i = 0, len = data.length; i < len; i++) {
    var x = data[i];
    var newItem = document.createElement("tr");
    var textnode = document.innerHTML = '<th scope="row"> ' + x.granularity + '</th> <td> ' + x.instrument + '</td> <td>complete: ' + x.complete + ', type: ' + x.type + ', alerttimedate: ' + x.alerttimedate + ', firsttopbot: ' + x.firsttopbot + ', alertprice: ' + x.alertprice + ', firsttbprice: ' + x.firsttbprice + ', timestamp: ' + x.timestamp + ', proceesed: ' + x.proceesed + '</td>';
    newItem.appendChild(textnode);
    var list = document.getElementById("myList");
    list.insertBefore(newItem, list.childNodes[0]);
}

Вот таблица в HTML-файл:

<table class="table table-striped" id="myList">
  <tr>
  <th scope="row">1</th>
  <td>Mark</td>
  <td>Otto</td>
  <td>@mdo</td>
  </tr>
 </table>

содержимое var textnode = document.innerHTML не добавляет никаких элементов в мой HTML-файл ??

есть идеи, что я здесь делаю не так?

Данные JSON поступают с php-файла в этом формате

 foreach ($result as $row) {
            $output[] = [
                'instrument' => $row['instrument'],
                'granularity' => $row['granularity'],
                'complete' => $row['complete'],
                'type' => $row['type'],
                'alerttimedate' => $row['alerttimedate'],
                'firsttopbot' => $row['firsttopbot'],
                'alertprice' => $row['alertprice'],
                'firsttbprice' => $row['firsttbprice'],
                'timestamp' => $row['timestamp'],
                'proceesed' => $row['proceesed']];

            $lastId = $row['id'];
        }

        echo json_encode([
            'status' => true,
            'data' => $output
        ]);

Answer 1

Поскольку я не уверен в том, что вам действительно нужно, из-за отсутствия кодирования, я разработал демо для вашей проблемы (насколько я понял)

// Placeholder JSON data
var data = {
  instrument: 'val1',
  granularity: 'val2',
  complete: 'val3',
  type: 'val4',
  alerttimedate: 'val5',
  firsttopbot: 'val6',
  alertprice: 'val7',
  firsttbprice: 'val8',
  timestamp: 'val9',
  proceesed: 'val10'
}

// Select the table
var tableData = document.querySelector("#tableData")

// Creating the `tr`s
var trHead = document.createElement("tr")
var trData = document.createElement("tr")

// Add the data
for (var key in data) {    
    if (data.hasOwnProperty(key)) {
            
        // Create th
        var th = document.createElement("th")
        th.innerText = key
      
        // Create td
        var td = document.createElement("td")
        td.innerText = data[key]
        
        // Append the `td` & `th` to the `tr`s
        trHead.appendChild(th)
        trData.appendChild(td)
    }
}

// Append both `tr`s to the `table`
tableData.appendChild(trHead)
tableData.appendChild(trData)

table {
  border: 1px solid #333;
  border-collapse: collapse
}
table tr td, table tr th {
  border: 1px solid #333;
  padding: 5px;
}

<table id="tableData"></table>