CODEWITHSUNDEEP
javascriptphpjqueryhtmlajax
s develop
s develop

Reputation: 115

Put AJAX Response in HTML format

I've AJAX response which needs to be rendered in HTML setup in PHP file. I'm confused regarding how to render it as there are multiple data in AJAX response and each of them must be put in specific places in html

for example AJAX response has two(or n) objects like this:

0:Object
     id: "111"
     Name: "abc"
1:Object
     id: "112"
     Name: "xyz"

Then, There already would be two(or n) divs with user class in HTML

<div class='user'>
    <div class='userId'> 
        <div class='usernm'>  </div>
    </div>
</div>

<div class='user'>
    <div class='userId'> 
        <div class='usernm'> </div>
    </div>
</div>

What I need is put those response values in this divs like this:

<div class='user'>
    <div class='userId'> 111
        <div class='usernm'> abc </div>
    </div>
</div>

 <div class='user'>
    <div class='userId'> 112
        <div class='usernm'> xyz</div>
    </div>
</div>

I'm lost as to how can I achieve that on AJAX Success here using jQuery:

$.ajax({
    type: 'GET',
    url: '/url/goes/here',
    dataType: "json",
    success: function(data) {
        $.each(data, function(key, value){
            console.log(value); //this outputs response as Objects shown above                   
        });
    }
});

Upvotes: 1

Views: 7981

Answers (3)

Samir
Samir

Reputation: 1368

This is another way, Use if it is convenient,

Let us say ur HTML,

<div class="append-div"></div>

Your JSON,

{
"Objects":[
    {
        "id": "111",
        "name": "abc"
    },
    {
        "id": "112",
        "name": "xyz"
    }
 ]
}

The JS,

$(document).ready(function() {
$.ajax({
    type: 'GET',
    url: 'json.js',
    dataType: "json",
    success: function(data) {
        var userDiv = "";
        $.each(data.Objects, function(key, value){
            console.log(value); //this outputs response as Objects shown above
            userDiv += '<div class="user"><div class="userId">' + value.id + '</div>' + value.name + '</div>';
        });

        $(".append-div").append(userDiv);  // Append the results
    }
});
});

Upvotes: 0

madalinivascu
madalinivascu

Reputation: 32354

Use the append function in your loop to add the elements to the page 

$('body').append('<div class="user">
    <div class="userId"> '+value.id+'
        <div class="usernm">'+value.name+'</div>
    </div>
</div>');//note change the body element to your desired parent element

if you only need to put the data do the following:

success: function(data) {
     $('.userId').each(function(key, value){
                $(value).prepend(data[key].id);   
                $(value).find('.usernm').text(data[key].name);              
            });
}

demo:https://jsfiddle.net/gf32wd7L/1/

Upvotes: 3

Mayank Pathak
Mayank Pathak

Reputation: 3681

Can you please try 

 $.ajax({
     type: 'GET',
     url: '/url/goes/here',
     dataType: "json",
     success: function(data) {
       $.each(data, function(key, value) {
         $('<div/>', {
           'class': 'user'
         }).append(
           $('<div/>', {
             'class': 'userId'
           }).text(this.id).append(
             $('<div/>', {
               text: 'usernme'
             }).text(this.Name)
           });
       });
     }
   });

Upvotes: 0

Related Questions