1. Home
  2. Forum
  3. JavaScript - EJ 2
  4. PHP json_encoded data not displayed in grid

PHP json_encoded data not displayed in grid

Hi,

I'm trying to show data in the Grid getting from my php-script (see below code-snippet).

If i set datasource; data2, then i can see the grid with data. but when I set datasource: data, then I see no Grid.

The data2 variable looks equal to the data variable.

Please can you help me ? What i'm doing wrong?

Regards

Helmut


<?php
    include 'datas.php';
    $db = new TestData();
    $rows = $db->GetRecords();
    $tmp = mb_convert_encoding($rows, 'UTF-8', mb_detect_encoding($rows, 'UTF-8, ISO-8859-1', true));
?>


<script type="text/javascript">
        var data = [{ Name: 'Mustermann', Vorname: 'Max' },
            { Name: 'Mustermann', Vorname: 'Felix' },
            { Name: 'Maier', Vorname: 'Gudrun' },
            { Name: 'Müller', Vorname: 'Franz' }];


var data2 = '<?php echo json_encode($rows); ?>';
var grid = new ej.grids.Grid({
            dataSource: data2,
            allowPaging: false,
            columns: [
                { field: 'Name', headerText: 'Name', textAlign: 'Left', width: 120, type: 'string' },
                { field: 'Vorname', width: 140, headerText: 'Vorname', type: 'string' },
            ]
        });
        grid.appendTo('#Grid');
</script>

8 Replies
PS Pavithra Subramaniyam Syncfusion Team February 7, 2022 07:35 AM UTC

Hi Helmut, 
 
Thanks for contacting Syncfusion support. 
 
We have tried to reproduce the issue in a simple Grid with given data, but it is working fine at our end. Please refer to the below sample link for more information.  
 
 
For further validation please share the below details that will be helpful for us to provide a better solution as early as possible. 
 
  1. Share the Syncfusion script version
  2. Are you facing any script error?
  3. Share issue reproducible sample if possible
 
Regards, 
Pavithra S 


HL Helmut Lubik February 7, 2022 12:04 PM UTC

Hi  Pavithra,

Thanks for replying.

Yes, your sample is running, but only with locale data and not with remote data from sql server.


Additional info:

Essential JS2 19.4.0.48

The website is hosted on a Raspberry Pi 4b with Debian 11 (Bullsey), nginx 1.18 and PHP7.4.

Data fetching from remote MS SQL Server.

PHP script server-side:


<?php
  include_once './globaldata.php';

  class TestData {
    public $data;

    public function __construct(){
      $this->data = new GlobalData();
    }

public function GetPerson6() {
      $query = "SELECT Name, Vorname FROM TEST.dbo.Person;";
      if ($db = odbc_connect('DRIVER={FreeTDS};SERVER='.$this->data->server.';PORT=1433;DATABASE='.$this->data->db.';',$this->data->user,$this->data->password)) {
        $res = odbc_exec($db, $query);
        $data = array();

        while( $row = odbc_fetch_array($res) ) {
          array_push($data, $row);
        }
        odbc_close($db);
        return $data;
      }
    }
?>

Added output:


<?php
include 'datas.php';
$db = new TestData();
$rows = $db->GetRecords();
$tmp = mb_convert_encoding($rows, 'UTF-8', mb_detect_encoding($rows, 'UTF-8, ISO-8859-1', true));
?>


<script type="text/javascript">
var data2 = [{ Name: 'Mustermann', Vorname: 'Max' },
            { Name: 'Mustermann', Vorname: 'Felix' },
            { Name: 'Maier', Vorname: 'Gudrun' },
            { Name: 'Müller', Vorname: 'Franz' }];

var data = '<?php echo json_encode($rows); ?>';

document.write(JSON.stringify(data2));
document.write(JSON.stringify(data));

var grid = new ej.grids.Grid({
dataSource: data,
columns: [
{ field: 'Name', headerText: 'Name', textAlign: 'Left', width: 120, type: 'string' },
{ field: 'Vorname', width: 140, headerText: 'Vorname', type: 'string' },
]
});
grid.appendTo('#Grid');
</script>


Output  document.write(JSON.stringify(data2));

[{"Name":"Mustermann","Vorname":"Max"},{"Name":"Mustermann","Vorname":"Felix"},{"Name":"Maier","Vorname":"Gudrun"},{"Name":"Müller","Vorname":"Franz"}]


Output document.write(JSON.stringify(data));

[{\"Name\":\"Mustermann\",\"Vorname\":\"Max\"},{\"Name\":\"Mustermann\",\"Vorname\":\"Felix\"},{\"Name\":\"Maier\",\"Vorname\":\"Gudrun\"},{\"Name\":\"Müller\",\"Vorname\":\"Franz\"}]"

Why is this different ?? Could you help ?


Thanks and regards

Helmut


HL Helmut Lubik February 7, 2022 12:05 PM UTC

Hi  Pavithra,

Thanks for replying.

Yes, your sample is running, but only with locale data and not with remote data from sql server.


Additional info:

Essential JS2 19.4.0.48

The website is hosted on a Raspberry Pi 4b with Debian 11 (Bullsey), nginx 1.18 and PHP7.4.

Data fetching from remote MS SQL Server.

PHP script server-side:


<?php
  include_once './globaldata.php';

  class TestData {
    public $data;

    public function __construct(){
      $this->data = new GlobalData();
    }

public function GetPerson6() {
      $query = "SELECT Name, Vorname FROM TEST.dbo.Person;";
      if ($db = odbc_connect('DRIVER={FreeTDS};SERVER='.$this->data->server.';PORT=1433;DATABASE='.$this->data->db.';',$this->data->user,$this->data->password)) {
        $res = odbc_exec($db, $query);
        $data = array();

        while( $row = odbc_fetch_array($res) ) {
          array_push($data, $row);
        }
        odbc_close($db);
        return $data;
      }
    }
?>

Added output:


<?php
include 'datas.php';
$db = new TestData();
$rows = $db->GetRecords();
$tmp = mb_convert_encoding($rows, 'UTF-8', mb_detect_encoding($rows, 'UTF-8, ISO-8859-1', true));
?>


<script type="text/javascript">
var data2 = [{ Name: 'Mustermann', Vorname: 'Max' },
            { Name: 'Mustermann', Vorname: 'Felix' },
            { Name: 'Maier', Vorname: 'Gudrun' },
            { Name: 'Müller', Vorname: 'Franz' }];

var data = '<?php echo json_encode($rows); ?>';

document.write(JSON.stringify(data2));
document.write(JSON.stringify(data));

var grid = new ej.grids.Grid({
dataSource: data,
columns: [
{ field: 'Name', headerText: 'Name', textAlign: 'Left', width: 120, type: 'string' },
{ field: 'Vorname', width: 140, headerText: 'Vorname', type: 'string' },
]
});
grid.appendTo('#Grid');
</script>


Output  document.write(JSON.stringify(data2));

[{"Name":"Mustermann","Vorname":"Max"},{"Name":"Mustermann","Vorname":"Felix"},{"Name":"Maier","Vorname":"Gudrun"},{"Name":"Müller","Vorname":"Franz"}]


Output document.write(JSON.stringify(data));

[{\"Name\":\"Mustermann\",\"Vorname\":\"Max\"},{\"Name\":\"Mustermann\",\"Vorname\":\"Felix\"},{\"Name\":\"Maier\",\"Vorname\":\"Gudrun\"},{\"Name\":\"Müller\",\"Vorname\":\"Franz\"}]"

Why is this different ?? Could you help ?


Thanks and regards

Helmut


HL Helmut Lubik February 7, 2022 12:08 PM UTC

Sorry, 

Server side php script:

<?php
  include_once './globaldata.php';


  class TestData {
    public $data;


    public function __construct(){
      $this->data = new GlobalData();
    }


public function GetRecords() {
      $query = "SELECT Name, Vorname FROM TEST.dbo.Person;";
      if ($db = odbc_connect('DRIVER={FreeTDS};SERVER='.$this->data->server.';PORT=1433;DATABASE='.$this->data->db.';',$this->data->user,$this->data->password)) {
        $res = odbc_exec($db, $query);
        $data = array();


        while( $row = odbc_fetch_array($res) ) {
          array_push($data, $row);
        }
        odbc_close($db);
        return json_encode($data);
      }
    }
?>

HL Helmut Lubik February 7, 2022 01:58 PM UTC

Additional Info:

Error Message:


Uncaught DataManager: Invalid arguments

Error: DataManager: Invalid arguments

    at Function.e.throwError (http://serverpi/ej2/ej2.min.js:1:1546414)

    at new e (http://serverpi/ej2/ej2.min.js:1:1598376)

    at e.initDataManager (http://serverpi/ej2/ej2.min.js:1:7958937)

    at new e (http://serverpi/ej2/ej2.min.js:1:7958008)

    at new e (http://serverpi/ej2/ej2.min.js:1:8055507)

    at t.render (http://serverpi/ej2/ej2.min.js:1:8267429)

    at t.appendTo (http://serverpi/ej2/ej2.min.js:1:772774)

    at http://serverpi/:84:14


PS Pavithra Subramaniyam Syncfusion Team February 8, 2022 12:29 PM UTC

Hi Helmut, 
 
Thanks for sharing the details. 
 
We suspect that the “data” from the server is not in a correct format that Grid expects. So, we suggest you parse the string data before setting it to the Grid so the data will be in a format “Object of Array” as given below. 
 
var data = JSON.parse( 
  '[{"Name":"Mustermann","Vorname":"Max"},{"Name":"Mustermann","Vorname":"Felix"},{"Name":"Maier","Vorname":"Gudrun"},{"Name":"Müller","Vorname":"Franz"}]' 
); 
 
 
 
Please get back to us if you need further assistance. 
 
Regards, 
Pavithra S 


HL Helmut Lubik February 9, 2022 05:38 PM UTC

Hi Pavithra,

that works 


Thank you very much and best regards

Helmut


BS Balaji Sekar Syncfusion Team February 10, 2022 10:56 AM UTC

Hi Helmut, 
  
Thanks for the update. 
  
We are happy to hear that your issue has been resolved. 
  
Please get back to us if you need further assistance. 
  
Regards, 
Balaji Sekar 


Loader.
Up arrow icon