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.

I'm not sure you are asking the right question here, reading PHP using JSON? you have a JSON response from a PHP page by the looks of it but you aren't reading PHP and wouldn't want to read PHP client side as it is a server side language. What do you actually want to do? Also if you could format your code it would be easier to read. — Dhunt
– Dhunt, Commented Oct 21, 2015 at 8:45
i have read the PHP data in JSON. which is stored in a object jsonResponse now i want to read that object in HTML — Javed siddique
– Javed siddique, Commented Oct 21, 2015 at 8:47
see Its the output which is coming from PHP file {"products":[{"menuid":"9","name":"Cable Managementdsdsd","description":"fgfgfg","location":"CableTray.jpg"}]} now i want this to be shown in DIV .. — Javed siddique
– Javed siddique, Commented Oct 21, 2015 at 9:01

Dhunt · Accepted Answer · 2015-10-21 09:08:14Z

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/

Collectives™ on Stack Overflow

How to read php data in html using json

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related