CODEWITHSUNDEEP
phpjqueryhtmlajaxjson
Bill
Bill

Reputation: 5668

decode json as html

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\":\"[email protected]\",\"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);
}

Upvotes: 0

Views: 11065

Answers (3)

Chris Baker
Chris Baker

Reputation: 50592

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);

Upvotes: 2

Hultner
Hultner

Reputation: 3780

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.

Upvotes: 3

mpj
mpj

Reputation: 5367

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.

Upvotes: 0

Related Questions