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
– Ankit Agarwal, Commented Apr 18, 2017 at 12:53
@AKA I make edit with details. Tabcontent id is P_type, Lable is p_name, — Mahi
– Mahi, Commented Apr 18, 2017 at 12:56

Ankit Agarwal · Accepted Answer · 2017-04-18 13:11:50Z

2

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.

answered Apr 18, 2017 at 13:11

Ankit Agarwal

30.8k5 gold badges41 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Mahi Over a year ago

This is perfect answer. but can you tell me How can I clear div data for new tab content.

Ankit Agarwal Over a year ago

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.

Collectives™ on Stack Overflow

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

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related