Displaying php result in HTML using AJAX

Question

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>

Answer 1

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

Answer 2

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
}