Member 13784265 Ответов: 1

Пытаюсь поместить свои данные json в HTML-таблицы.

я пытался прочитать свои данные json из файла json и отобразить их в своем приложении с помощью php. Хотя мне удалось отобразить свои данные json в моем приложении, но я хочу отобразить их в таблицах, чтобы они выглядели красиво.

Что я уже пробовал:

вот код блока 
<table class="table" id="allM">
  <thead class="thead-light">
    <tr>
      <th scope="col">ID</th>
      <th scope="col">PhoneNumber</th>
      <th scope="col">Body</th>
      <th scope="col">Date</th>
      <th scope="col">IsRead</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>

вот блок кода php
<?php
    $jsondata = file_get_contents("json_response.json");
    $json = json_decode($jsondata,true);
    $output = "<ul>";
    foreach($json["Messages"] as $messages)
    {
        $output .= "".$messages["id"]."";
        $output .= "<li>".$messages["phonenumber"]."</li>";
        $output .= "<li>".$messages["body"]."</li>";
        $output .= "<li>".$messages["M_date"]."</li>";
        $output .= "<li>".$messages["isRead"]."</li> <br/>";
        
    }
    $output .= "</ul>";
    echo $output;
    
    ?>

любые предложения были бы великолепны!

1 Ответов

Рейтинг:
2

Sandeep Mewara

Вам нужно будет назначить identified каждому столбцу таблицы, чтобы вы могли получить к нему доступ. Далее, учитывая, что jsondata извлекается извне, вам нужно заполнить таблицу динамически (чтобы получить нужное количество строк)

Попробуйте что-то вроде приведенного ниже:

var el_up = document.getElementById("GFG_UP"); 
          
        var list = [ 
            { "col_1": "val_11", "col_3": "val_13" }, 
            { "col_2": "val_22", "col_3": "val_23" }, 
            { "col_1": "val_31", "col_3": "val_33" } 
        ]; 
          
        el_up.innerHTML = "Click on the button to create " 
                +   "the table from the JSON data.<br><br>" 
                + JSON.stringify(list[0]) + "<br>"  
                + JSON.stringify(list[1]) + "<br>" 
                + JSON.stringify(list[2]);    
              
        function constructTable(selector) { 
              
            // Getting the all column names 
            var cols = Headers(list, selector);   
   
            // Traversing the JSON data 
            for (var i = 0; i < list.length; i++) { 
                var row = $('<tr/>');    
                for (var colIndex = 0; colIndex < cols.length; colIndex++) 
                { 
                    var val = list[i][cols[colIndex]]; 
                      
                    // If there is any key, which is matching 
                    // with the column name 
                    if (val == null) val = "";   
                        row.append($('<td/>').html(val)); 
                } 
                  
                // Adding each row to the table 
                $(selector).append(row); 
            } 
        } 
          
        function Headers(list, selector) { 
            var columns = []; 
            var header = $('<tr/>'); 
              
            for (var i = 0; i < list.length; i++) { 
                var row = list[i]; 
                  
                for (var k in row) { 
                    if ($.inArray(k, columns) == -1) { 
                        columns.push(k); 
                          
                        // Creating the header 
                        header.append($('<th/>').html(k)); 
                    } 
                } 
            } 
              
            // Appending the header to the table 
            $(selector).append(header); 
                return columns; 
        }

Ссылаться: Как преобразовать данные JSON в html-таблицу с помощью JavaScript/jQuery ? - GeeksforGeeks[^]