RE: How can I loop throught my JSON and append various divs to my table with JQuery?

I’m retrieving all sliders from my database via JQuery GET Ajac call, I recieve this info in JSON format, now I want to append each of the results I gathered to my table header:I’m retrieving all sliders from my database via JQuery GET Ajac call, I recieve this info in JSON format, now I want to append each of the results I gathered to my table header: This is my JQuery call:This is my JQuery call:

var linked_entry;
    
    var csrf = $('meta[name=csrf-token]').attr('content');
    console.log(csrf);
    
    $('.form_show_results').click(function(){
        linked_entry = $(this).attr("data-link");
        
        
        
        $.ajaxSetup({
        headers: { 'X-CSRF-Token' : $('meta[name=csrf-token]').attr('content') }
        });
        
        
        $.ajax({
            type: 'GET',
            url:  '/' + linked_entry + '',
            
            success: function(data) {
                console.log(data);
                $('.form_table_results').removeClass('visible');
                $('.form_table_results[data-link=' + linked_entry + ']').addClass('visible');
                $('.form_table_results[data-link=' + linked_entry + ']').sppend('');
                
    });
            },
            
            error: function(data) {
                
                alert('Something failed');              
            }
        });   
    });

This is the portion I want to append to my table header, but how can I get all this html work into there?

<tr class="item{{$slider->id}}">
                <td>{{$post->id}}</td>
                <td>{{$post->title}}</td>
                <td>{{App\Slider::getExcerpt($slider->content)}}</td>
                <td>{{$post->image}}</td>
                <td>{{$post->isVisible}}</td>
                <td class="entry_table_options_container">
                    <i class="fa fa-info-circle" data-id="{{$post->id}}" data-title="{{$slider->title}}" data-content="{{$post->slider}}" data-image="{{$post->slider}}"  title="Ver" style="background-color:#77DD77;"></i>
                    <i class="fa fas fa-pencil-alt "  data-id="{{$post->id}}" data-title="{{$slider->title}}" data-content="{{$post->slider}}" data-image="{{$post->slider}}" title="Editar" style="background-color:#5BC0DE;"></i>
                    <i class="fa far fa-trash-alt "  data-id="{{$post->id}}" data-title="{{$slider->title}}" data-content="{{$post->slider}}" data-image="{{$post->slider}}" title="Borrar" style="background-color:#D9534F;"></i>
                </td>
            </tr>

This is the result I’m getting:

How can I loop through each of the results and append the html to my table header?

Amir Hussain Senior Developer Asked on July 3, 2018 in JSON.
Add Comment
1 Answers

You can use jQuery.each() to get the output.

 

<!doctype html>

<html lang="en">

<head>

<meta charset="utf-8">

<title>jQuery loop and append data</title>

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>

</head>

<body>
<div id="data"></div>
<script>

var data = [

{

"name": "Bikash",

"location": "Kolkata",

},

{

"name": "Rahul",

"location": "Bangalore",
},

]
var htmlText = '';
for ( var key in data ) {

htmlText += '<div class="div-conatiner">';

htmlText += '<p class="p-name"> Name: ' + data[key].name + '</p>';

htmlText += '<p class="p-loc"> Location: ' + data[key].location + '</p>';

htmlText += '</div>';

htmlText += '<hr>';

}
$('#data').append(htmlText);
</script>
</body>

</html>
Team Leader Answered on July 3, 2018.
Add Comment

Your Answer

By posting your answer, you agree to the privacy policy and terms of service.