Amir Hussain
Learner
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?
Share
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>