decode json as html

Question

So I'm building a web application and I have an ajax request that pings a database (or database cache) and echos back a big thing of json. I'm totally new to json, and when the php pulls from the database I echo json_encode($databaseResults), then it shows up in my html page as a long string. My question is, how do I convert it and pull out the pieces I need into a nice format?

Thanks!

The Json result that was in the page looks like:

"[{\\"currentcall\\":\\"1\\",\\"timecalled\\":\\"15:30\\",\\"etaTime\\":\\"15:35\\",\\"departmentID\\":\\"1\\",\\"memberID\\":\\"1\\",\\"callinnum\\":\\"1\\",\\"location\\":\\"Fire House\\",\\"billed\\":\\"N\\",\\"date\\":\\"2\\\\/12\\\\/11\\",\\"firstName\\":\\"Phil\\",\\"lastName\\":\\"asdf\\",\\"email\\":\\"pasdf@gmail.com\\",\\"homephone\\":\\"+19111111111\\",\\"cellphone\\":\\"+11234567891\\",\\"cellphone2\\":null,\\"workphone\\":null,\\"phonenumber5\\":null,\\"phonenumber6\\":null,\\"streetAddress\\":\\"10 asdfnt Dr\\",\\"city\\":\\"\\",\\"username\\":\\"pgsdfg\\",\\"password\\":\\"0623ab6b6b7dsasd3834799fbf2a08529d\\",\\"admin\\":\\"Y\\",\\"qualifications\\":\\"Interior\\",\\"rank\\":null,\\"cpr\\":null,\\"emt\\":null,\\"training\\":null,\\"datejoined\\":null,\\"dateactive\\":null,\\"state\\":\\"DE\\",\\"zip\\":\\"51264\\",\\"pending\\":\\"NO\\",\\"defaultETA\\":\\"7\\",\\"apparatus\\":\\"asdKE-286\\"}]"

There can be multiple results... this is only one result

EDIT:

Basically, I'm trying to pass a bunch of rows in an array into an html file, and take out only the data I need and format it. I don't know if json is the best way to do this or not, just one solution I came up with. So if anyone has a better solution that would be awesome.

Edit2: This is the jquery I have that makes the request, the php just has echo json_encode ($DBResults);

function getResponder(){
    var responders = $.ajax({
            type : "POST",
            url: "/index.php/callresponse/get_responders",
            success: function(html){
                $("#ajaxDiv").html(html);   
            }
    });

setTimeout("getResponder()", 10000);
}

Answer 1

As you flagged this as jquery I assume that you're using jQuery. If you're only going to get the one string you can skip the json part and use jQuery .load() like this $('#result').load('ajax/test.php'); that will load the contents from ajax/test.php into #result

However if you want to use json you can take a look over at getJSON on the jQuery documentation . You can also use the jQuery parseJSON function which will return the json an javascript object containing the jsonData.

Here's an example how you can use parseJSON

var object = $.praseJSON(jsonString); //jsonString is the string containing your actual json data
alert(object.location) //Will alert "Fire House" with the given json string

Here's an example of how you can use getJSON in the same way

$.getJSON('ajax/test.php', function(object) {
  alert(object.location); //Will alert "Fire House" with the given json string
});

If you want to pass parameters as well you can do it like this

$.getJSON('ajax/test.php', 
    { 
        Param1 : "Value1", 
        Param2 : "value2" 
    },
    function(object) {
        alert(object.location);  //Will alert "Fire House" with the given json string
    }
);

If you are trying to send json from javascript to php you can use

$jsonArray = jsonDecode($_GET['key']); 

Of course if you're using post you'll write $_POST instead.

Answer 2

You have to parse the data into a JSON object, then you can use properties of the object as you wish.

Without seeing the specifics, I can tell you that you'll need to use the JSON object to parse the text. See more here: http://www.json.org

var obj = JSON.parse(ajaxResponseText);

Answer 3

You should use php function json_decode which will give you an object or array with all the properties.

Then you should iterate recursively through this object and add the content of the properties to a string, which should be your final HTML.

Answer 4

Normally to display JSON response in an html element after jquery( for example ) by web request, try this:

$("#box-content-selector").append(
    "<pre>"+
    JSON.stringify(JSON.parse(data), null, 4)+
    "</pre>"
)