How to append sting array to html div ni ajax.?

Question

Here I have output with string array. Comes from php json. I want to give this output to html div tabcontent but I don't know how to do this. here is my little code any one can help me.

[{"id":"1","p_name":"g_t1","P_Type":"gp_1","paid_type":"0"},{"id":"2","p_name":"g_t2","P_Type":"gp_2","paid_type":"1"},{"id":"3","p_name":"g_t3","P_Type":"gp_3","paid_type":"0"}]

   $("a.tablinks").on('click',function(e){
        e.preventDefault();
        var p_name = $(this).attr('value');
        alert(p_name);
    $.ajax({
            url:"<?php echo base_url(); ?>Gettabdata",
            type: "POST",           
            dataType: 'json',
            data:{Paper_name : p_name},

           success : function(data){                    

                if(data != ""){                 
                    data = JSON.stringify(data);                    
                    console.log(data);
                   alert(data);

                }else{                                  
                    data = JSON.stringify(data);
                    console.log(data);
                   $.each(data, function(k, v) {
                      alert(k + ':' + v+ " 1 working else .!"); 
                   });
                }
           },
           error : function(data){              
                data = JSON.stringify(data);    
                console.log(data);

                   $.each(data, function(k, v) {
                      alert(k + ':' + v + ' error'); 
                   });
           }
        });
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="id" class="tabcontent" style="border:none;">

                            <div class="input-group" style="border-color:#3D8EB9; box-shadow: 1px 1px 1px 1px #888888; margin-bottom: 3px; background-color: #fff;">                            

                                <label style="padding:10px 10px;">  Label Name </label>
                                <span class="input-group-btn" style="padding-top:10px;">
                                    <button class="btn btn-info" type="button">Go!</button>
                                </span>     
                            </div>

                        </div>

here is my ajax

<script>
   $("a.tablinks").on('click',function(e){
        e.preventDefault();
        var p_name = $(this).attr('value');
        alert(p_name);
    $.ajax({
            url:"<?php echo base_url(); ?>Gettabdata",
            type: "POST",           
            dataType: 'json',
            data:{Paper_name : p_name},

           success : function(data){                    

                if(data != ""){                 
                    data = JSON.stringify(data);                    
                    console.log(data);
                   alert(data);

                }else{                                  
                    data = JSON.stringify(data);
                    console.log(data);
                   $.each(data, function(k, v) {
                      alert(k + ':' + v+ " 1 working else .!"); 
                   });
                }
           },
           error : function(data){              
                data = JSON.stringify(data);    
                console.log(data);

                   $.each(data, function(k, v) {
                      alert(k + ':' + v + ' error'); 
                   });
           }
        });
    });
</script>

I want to add retrieved string array to below html div tabcontent (tabcontent input-group class will create three times. depends on number of id.).

<div id="id" class="tabcontent" style="border:none;">

                            <div class="input-group" style="border-color:#3D8EB9; box-shadow: 1px 1px 1px 1px #888888; margin-bottom: 3px; background-color: #fff;">                            

                                <label style="padding:10px 10px;">  Label Name </label>
                                <span class="input-group-btn" style="padding-top:10px;">
                                    <button class="btn btn-info" type="button">Go!</button>
                                </span>     
                            </div>

                        </div>

what to add in html tabcontent.?

Tabcontent id is P_type, Lable is p_name,

What is the html element that is mapped with the JSON response. I mean where is 'p_name' from JSON displayed in HTML? Inside label? Inside span? where? — Ankit Agarwal, Apr 18 '17 at 12:53
similar to [get variable from php file using jquery ajax](http://stackoverflow.com/questions/10341434/get-variable-from-php-file-using-jquery-ajax) — Felix Haeberle, Apr 18 '17 at 12:53
@AKA I make edit with details. Tabcontent id is P_type, Lable is p_name, — Mahi, Apr 18 '17 at 12:56

score 2 · Accepted Answer · answered Apr 18 '17 at 13:11

You need to create the div dynamically so create a function that will take this json array as parameter and loop over to it to create div dynamically with necessary id and label

First, you need to specify this function inside if block data != ""

if(data != ""){    
   createDiv(data);  //this function is responsible to create div dynamically      
   data = JSON.stringify(data);                    
   console.log(data);
   alert(data);
}

Now the createDiv() function goes like this

function createDiv(data){
var dynamicHTML = '';
for(var i=0; i<data.length; i++){
  dynamicHTML += '<div id="'+ data[i].P_Type +'" class="tabcontent" style="border:none;">'+
                        '<div class="input-group" style="border-color:#3D8EB9; box-shadow: 1px 1px 1px 1px #888888; margin-bottom: 3px; background-color: #fff;">'+
                            '<label style="padding:10px 10px;">'+ data[i].p_name +'</label>'+
                            '<span class="input-group-btn" style="padding-top:10px;">'+
                                '<button class="btn btn-info" type="button">Go!</button>'+
                            '</span>'+   
                        '</div>'+
                    '</div>';
}
$("body").append(dynamicHTML);

}

The dynamically created div is appended right away in the HTML body. You can specify a parent div say, <div id='content'></div> and change this line of code inside the createDiv() function $("body").append(dynamicHTML); to $("#content").append(dynamicHTML); if you want to append it inside a div in the page.

This is perfect answer. but can you tell me How can I clear div data for new tab content. — Mahi, Apr 18 '17 at 13:47
You can simply use $("body").html(''); exactly before the for loop (or immediately after for before appending the dynamicHTML). This will clear out all the previous HTML of the tab content. As i mentioned, use your selector instead of $("body") within which you have this dynamic HTML. — Ankit Agarwal, Apr 18 '17 at 13:56

How to append sting array to html div ni ajax.?

1 Answers1