How to read php data in html using json

Question

I'm working on a project in which I want to read PHP data in HTML using JSON

Here is my JavaScript code:

var xmlhttp;
var jsonResponse = "";

window.onload = function() {
  alert('window.onload fired!');
  xmlhttp = new XMLHttpRequest();
  xmlhttp.open("GET", "../getproduct.php",true);
  alert('Constructed XMLHTTP request!');
  xmlhttp.send();
  xmlhttp.onreadystatechange = dataReturn;
  document.getElementById('getBtn').addEventListener('click', getData, true);
}

function dataReturn() {
  if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {
     jsonResponse = xmlhttp.responseText;
     //jsonResponse = eval('(' + jsonResponse + ')');
     alert(jsonResponse);
  }
}

var div = document.getElementById('result');

function getData() {
  alert('getData()');
  // Parsing the txt JSON string
  obj = jsonResponse;
  document.getElementById('result').innerHTML = obj;
  txt1 = JSON.parse(obj);
  alert(txt1);
  employees = txt.products;

  // Looping through object employees
  for (i = 0; i < employees.length; i++) {
    var p = document.createElement('p');
    p.innerHTML = '<b>First name:</b>' + employees[i].menuid + ', <b>Last name: </b>' + employees[i].name;
    div.appendChild(p);
  }

  // Generate a new JSON string based on current JS object.
  jsonString = JSON.stringify(obj);
  alert(jsonString);
}

Using this code I am able to read PHP file as a json

Here is the output of PHP file:

{
  "products": [
    {
      "menuid": "9",
      "name": "Cable Managementdsdsd",
      "description": "fgfgfg",
      "location":"CableTray.jpg"
    }
  ]
}

I am unable to read this JSON data in JavaScript.

Answer 1

You have a JSON response from a PHP page not reading PHP in JSON. PHP gives a response and JSON is the format of that response. Similarly you now want to display the data in an HTML page you can't just read it in HTML. If you log your JSON response you will see it is a string which can be parsed into a javascript object containing an array of products and each product has menuid, name, description, location.

An example of your json converted to a javascript object, this will read through all products that are returned:

var json = '{"products":[{"menuid":"9","name":"Cable Managementdsdsd","description":"fgfgfg","location":"CableTray.jpg"}]}';

var jsobject= JSON.parse(json);

console.log(json);
console.log(jsobject);

for(var i = 0; i < jsobject.products.length; i++){
    console.log(jsobject.products[i].menuid);
    console.log(jsobject.products[i].name);
    console.log(jsobject.products[i].description);
    console.log(jsobject.products[i].location);
}

https://jsfiddle.net/o1ofnmrL/1/

You can just replace the console.log lines with code to write onto the html page instead of console.

Here is an updated version that will print into a div (You will need to sort out formatting and things) https://jsfiddle.net/o1ofnmrL/3/