CODEWITHSUNDEEP
javascriptphpjqueryhtmlajax
bummm26
bummm26

Reputation: 159

Displaying php result in HTML using AJAX

I am trying to display the result of my php in different <div>-s. My plan is that I make a query in my php and display the result in JSON format. Due to the JSON format my result can be displaying in different <div>. How can I reach that for example the "name" can be displayed between <div> tags?

The example result of php:

[
    {
        "id": 0,
        "name": "example1",
        "title": "example2"
    },
    {
        "id": 0,
        "name": "example1",
        "title": "example2"
    }
]

The attempt:

 <div class="result"></div>

 <script>
 $.ajax({
    type:'GET',
    url:'foo.php',
    data:'json',
    success: function(data){
            $('.result').html(data);
    }
});
</script>

Upvotes: 4

Views: 3071

Answers (3)

Andre Mocke
Andre Mocke

Reputation: 86

Hi try parsing the returned data into a JSON object :

<div class="result"></div>

 <script>
 $.ajax({
    type:'GET',
    url:'foo.php',
    data:'json',
    success: function(data){

            // added JSON parse
            var jsonData = JSON.parse(data);

            // iterate through every object
            $.each(jsonData, function(index, element) {

                 // do what you want with each JSON object
                 $('.result').append('<div>' + element.name + '</div>');

            });                
    }
});
</script>

// PS code is untested. // Regards

Upvotes: 4

Death-is-the-real-truth
Death-is-the-real-truth

Reputation: 72269

Do it like below:-

success: function(data){
    var newhtml = ''; //newly created string variable
    $.each(data, function(i, item) {//iterate over json data
        newhtml +='<div>'+ item.name +'</div>'; // get name and wrapped inside div and append it to newly created string variable
    });
    $('.result').html(newhtml); // put value of newly created div into result element
}

Upvotes: 2

Thomas James Tiam-Lee
Thomas James Tiam-Lee

Reputation: 691

You can create it like this:

for (var i = 0; i < res.length; i++) {
  var id = $("<div></div>").html(data[i].id);
  var name = $("<div></div>").html(data[i].name);
   var title = $("<div></div>").html(data[i].title);

  $('.result').append(id).append(name).append(title);
}

Upvotes: 1

Related Questions