Javascript convert xhr response string to array

Question

I need some help converting the response of an XHR GET to a useable array (preferrably 2 arrays, but not strictly needed). I'm trying to get some data fra sql but I can't figure out how to decode/parse the response from my GET request into any form of useable array.

I'm sorry if this is a stupid question, but I'm new and trying to learn. I've tried both json_decode() in the php bit and JSON.parse() in the JS bit, but neither of those work (again, sorry, It's probably obvious why but this is tbh abit beyond my current capabilities)

Code snippets follow below:

GET response is a string and looks like example below (array.length of first section will always be static. array.length of second array will vary from 1->50ish)

array(1) {
      [0]=>
      array(10) {
        ["id"]=>
        string(1) "1"
        [0]=>
        string(1) "1"
        ["project_name"]=>
        string(10) "Test"
        [1]=>
        string(10) "Test"
        ["project_description"]=>
        string(7) "new test"
        [2]=>
        string(7) "new test"
        ["created_by"]=>
        string(14) "Testuser"
        [3]=>
        string(14) "Testuser"
        ["date"]=>
        string(10) "27.05.2021"
        [4]=>
        string(10) "27.05.2021"
      }
    }
    array(4) {
      [0]=>
      object(stdClass)#2 (5) {
        ["cell1"]=>
        string(2) "K1"
        ["cell2"]=>
        string(1) "3"
        ["cell3"]=>
        string(5) "200.0"
        ["cell4"]=>
        string(2) "12"
        ["cell5"]=>
        string(4) "2400"
      }
      [1]=>
      object(stdClass)#4 (5) {
        ["cell1"]=>
        string(2) "K2"
        ["cell2"]=>
        string(1) "8"
        ["cell3"]=>
        string(5) "705.0"
        ["cell4"]=>
        string(2) "21"
        ["cell5"]=>
        string(5) "14805"
      }
      [2]=>
      object(stdClass)#5 (5) {
        ["cell1"]=>
        string(2) "K3"
        ["cell2"]=>
        string(2) "15"
        ["cell3"]=>
        string(5) "898.0"
        ["cell4"]=>
        string(2) "31"
        ["cell5"]=>
        string(5) "27838"
      }
      [3]=>
      object(stdClass)#6 (5) {
        ["cell1"]=>
        string(2) "F1"
        ["cell2"]=>
        string(2) "19"
        ["cell3"]=>
        string(5) "338.0"
        ["cell4"]=>
        string(2) "24"
        ["cell5"]=>
        string(4) "8112"
      }
    }

GET Request:

function loadData() {
  let str = document.getElementById('loadSelected').value;
  var xhttp;
  
  xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      let tempinfo = this.responseText;
     
    console.log(tempinfo); 
    }
  };
  xhttp.open("GET", "includes/loaddata.php?q="+str, true);
  xhttp.send();
}

and "loaddata.php"

<?php
$db =  new PDO("sqlite:toolkit.db3");  
$stmt = $db->prepare('SELECT * FROM projects WHERE id = :id');
$stmt->bindValue(':id', $_GET['q'], SQLITE3_INTEGER);
$stmt->execute();
$infoholder = $stmt->fetchAll();
$stmt = $db->prepare('SELECT * FROM project_data WHERE parent_id = :id');
$stmt->bindValue(':id', $_GET['q'], SQLITE3_INTEGER);
$stmt->execute();
$dataholder = $stmt->fetchAll();
$dataholder = json_decode($dataholder['0']['dataholder']);


var_dump($infoholder);
var_dump($dataholder);


?>

First, use echo not var_dump. If the dataholder data is already json, you don't have to do anything with it. Json_decode converts JSON into a php array. — imvain2, May 27 '21 at 17:03
You are making data structures more complicated than they need to be. If you only fetch one row for `$infoholder`, use `$infoholder = $stmt->fetch()`. And for your second one, if you only use one column, then only query it: `SELECT dataholder FROM...` and then `$dataholder = $stmt->fetchColumn()`. After that, follow advice in the answer below. — miken32, May 27 '21 at 17:21

score 1 · Accepted Answer · answered May 27 '21 at 17:08

Your loaddata.php function should return a json but instead you are using var_dump to print two different arrays. One way you can do this is to first create dictionary with both $infoholder and $dataholder and create a json using php json_encode.

$result = ["infoholder" => $infoholder, "dataholder" => $dataholder];
echo json_encode($result)

On the javascript side use JSON.parse on the this.responseText:

const result = JSON.parse(this.responseText);
console.log(result.infoholder);
console.log(result.dataholder);

One addition, you should set content type of the PHP response to JSON as well. `header("Content-Type: application/json");` — miken32, May 27 '21 at 17:16

Javascript convert xhr response string to array

1 Answers1