Заполните таблицу html с помощью массива javascript

Question

Я хотел бы заполнить таблицу HTML JavaScript array. Но это не работает, и я не знаю, почему мой «innerHTML» не интерпретируется.

Моя переменная содержит хорошее значение, но когда я делаю это:

document.getElementById("title").innerHTML = title; 

Это не работает.

Это мой код:

var title = ""; 
var link = ""; 
var date = ""; 
var image = ""; 

function get_posts() { 
var xhr = new XMLHttpRequest(); 
xhr.open("GET", "my_url"); 
xhr.onload = function() { 
    if (xhr.responseText == 0) { 
     alert("Vous n'avez poster aucun post"); 

    } else { 
     var posts_array = JSON.parse(xhr.responseText); 

     for (var i = 0; i < posts_array.length; i++) 
     { 
      title = posts_array[i][0]; 
      link = posts_array[i][1]; 
      date = posts_array[i][2]; 
      image = posts_array[i][3]; 

     } 
    document.getElementById("title").innerHTML = title; 
    } 
} 
xhr.send(); 
} 

Это мой HTML:

<table id="posts"> 
       <tr> 
        <th id="test">Titre</th> 
        <th>Lien</th> 
        <th>Date</th> 
        <th>Image</th> 
       </tr> 
       <tr> 
        <td id="title"></td> 
        <td id="link"></td> 
        <td id="date"></td> 
        <td id="image"></td> 
       </tr> 
      </table> 

Answer 1

Вы присваивая значение title внутри вашего цикла, а затем установив innerHTML отдельной клетки до title. Предполагая, что ваш responseText отформатирован правильно, таблица posts будет содержать только последний элемент в вашем массиве. Кажется, вам нужно создать новую строку таблицы для каждого элемента в posts_array и добавить ее в столбик, чтобы получить свой предполагаемый результат.

например.

var t = ""; 
for (var i = 0; i < posts_array.length; i++){ 
     var tr = "<tr>"; 
     tr += "<td>"+posts_array[i][0]+"</td>"; 
     tr += "<td>"+posts_array[i][1]+"</td>"; 
     tr += "<td>"+posts_array[i][2]+"</td>"; 
     tr += "<td>"+posts_array[i][3]+"</td>"; 
     tr += "</tr>"; 
     t += tr; 
} 
document.getElementById("posts").innerHTML += t; 

Answer 2

У вас есть 3 ошибки в коде.

1. Вы перекрывая title, link, date и image на каждой итерации.
2. Вы устанавливаете только заголовок, я думаю, вы хотите установить все данные.
3. (Положительная ошибка) Вы устанавливаете только 1 столбец в стол, возможно, вы хотите увидеть их всех.

Самый простой (и наиболее распространенный) способ создания таблицы из массива - построить строку HTML (с табличной разметкой) и добавить ее в таблицу. К сожалению, IE не поддерживает добавление html в table, для его решения вы можете использовать jquery (он создаст Elements из html и добавит их).

Пример:

var posts_array = JSON.parse(xhr.responseText); 
var columns = ['title', 'link', 'date', 'image'] 
var table_html = ''; 
for (var i = 0; i < posts_array.length; i++) 
{ 
    //create html table row 
    table_html += '<tr>'; 
    for(var j = 0; j < columns.length; j++){ 
     //create html table cell, add class to cells to identify columns   
     table_html += '<td class="' +columns[j]+ '" >' + posts_array[i][j] + '</td>' 
    } 
    table_html += '</tr>' 
} 
$("#posts").append( table_html); 

Другой способ заключается в использовании таблицы DOM API, это не требует JQuery:

var posts_array = JSON.parse(xhr.responseText); 
var columns = ['title', 'link', 'date', 'image'] 
var table = document.getElementById('posts'); 

for (var i = 0; i < posts_array.length; i++) 
{ 
    var row = table.insertRow(-1); // -1 is insert as last 
    for(var j = 0; j < columns.length; j++){ 
     var cell = row.insertCell(- 1); // -1 is insert as last 
     cell.className = columns[j]; // 
     cell.innerHTML = posts_array[i][j] 
    } 
} 

Answer 3

Это не работает для меня.

Я хочу отображать сообщения Wordpress в таблице HTML.

Мои JS:

function get_posts() { 
    var xhr = new XMLHttpRequest(); 
    xhr.open("GET", "myUrl"); 
    xhr.onload = function() { 
     if (xhr.responseText == 0) { 
      alert("Vous n'avez poster aucun post"); 

     } else { 
      var posts_array = JSON.parse(xhr.responseText); 
      var columns = ['title', 'link', 'date', 'image'] 
      var table_html = ''; 
      for (var i = 0; i < posts_array.length; i++) 
      { 
       //create html table row 
       table_html += '<tr>'; 
       for (var j = 0; j < columns.length; j++) { 
        //create html table cell, add class to cells to identify columns   
        table_html += '<td class="' + columns[j] + '" >' + posts_array[i][j] + '</td>' 
       } 
       table_html += '</tr>' 
      } 
     } 
     $("#posts").append(table_html); 
    } 
    xhr.send(); 
} 

Мой HTML:

<table id="posts"> 
        <tr> 
         <th id="test">Titre</th> 
         <th>Lien</th> 
         <th>Date</th> 
         <th>Image</th> 
        </tr> 
       </table> 

Мой веб-сервис (я использую WordPress):

global $current_user; 
if(is_user_logged_in){ 
$current_user = wp_get_current_user(); 
} 

$array = array(); 
$posts_array = array('author' => $current_user->ID, "post_type" => "alertes", "orderby" => "date", "order" => "DESC", "post_status" => "publish", "posts_per_page" => "10"); 

$posts = new WP_Query($posts_array); 

if($posts->have_posts()){ 
    while($posts->have_posts()){ 
     $posts->the_post(); 

     $post_array = array(get_the_title(), get_the_permalink(), get_the_date(), wp_get_attachment_url(get_post_thumbnail_id())); 
     array_push($array, $post_array); 

    } 
     echo json_encode($array); 

} 

else { 
    echo '0'; 
}