How to display data received from a web service in a jquery table?

Question

PHP

Hello, friends. please help me to solve the problem.

At 1s, I published a web service, from which I receive data on the balance of the item.
I display the data on the site and receive it via Soap requests.

For clarity, here is the code of the file:

<?php

header("Content-Type: text/html; charset=UTF-8");
$SoapClient1C = new SoapClient("http://localhost/wsBase/ws/getProduct.1cws?wsdl");
$List = $SoapClient1C->ПолучитьНоменклатуру();

if(is_array($List->return->Список )) 
{
foreach ( $List->return->Список as $key) 
 
echo $key->УникальныйИдентификатор." ".$key->Наименование." ".$key->Цена." ".$key->Остаток." "."<br>";
 
 } else
echo $List->return->Список->УникальныйИдентификатор." ".$List->return->Список->Наименование." ".$List->return->Список->Цена." ".$List->return->Список->Остаток;

?>

However, as you understand, there is no sense in a simple output, I want to display data in a table with the ability to sort and search. I decided to do it with the help of this wonderful
DataTables library .

In the examples indicated on the site, the tables are displayed
in the following form,

<table id="example" class="display" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </thead>
 
        <tfoot>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </tfoot>
 
        <tbody>
            <tr>
                <td>Tiger Nixon</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td>61</td>
                <td>2011/04/25</td>
                <td>$320,800</td>
            </tr>
 </tbody>
</table>

How to me to provide an output of the received data in such table??
I understand that it is necessary to fill each line with a cycle, but I don’t know how to implement it.
I will be glad to help or hints.

Answer 1

you can do this in jquery:

$("#имя таблицы").append("<tr><td>"+данные+"</td></tr>");

Data should be received via ajax request. For example:

$.ajax
    ({
      url:  "ваш.php",
      data: "func=ПолучитьНоменклатуру",
      async: false,
      success: function( data )
      {
        var object = JSON.parse( data );
        $.each( object , function( key, val )
        {
          $("#имя таблицы").append("<tr><td>"+val.наименование+"</td></tr>");
        });
      } 
    });

Like this, but it needs to be improved.

Answer 2

Guys, help me complete the enumeration of the array: I enumerate with the
following code:

<?php
header("Content-Type: text/html; charset=UTF-8");
$SoapClient1C = new SoapClient("http://localhost/wsBase/ws/getProduct.1cws?wsdl");
$List = $SoapClient1C->vernutcatalog();

if(is_array($List->return->Список )) 
{
foreach ( $List->return->Список as $key)
  $json_data['data'] = array("$key->УникальныйИдентификатор","$key->Наименование","$key->Цена","$key->Остаток");
    echo json_encode($json_data, JSON_UNESCAPED_UNICODE);  
} else
echo $List->return->Список->УникальныйИдентификатор." ".$List->return->Список->Наименование." ".$List->return->Список->Цена." ".$List->return->Список->Остаток;
 ?>

As a result, I get
that is, only the first element of the array is selected, and subsequent elements are omitted.
If you do this:
then all elements are sorted out, but I need them to be placed in the data array.
________________________________________________________________________________________________
PS The correct cycle in my case looked like this.

foreach ( $List->return->Список as $key)
  $json_data[] = array("$key->УникальныйИдентификатор","$key->Наименование","$key->Цена","$key->Остаток");
  $table_json['data'] = $json_data;  
    echo json_encode($table_json, JSON_UNESCAPED_UNICODE);

Thank you all for your help.