I have a JSON feed I'm accessing to pull data from and am using a little javascript and jQuery to place the data into a Bootstrap carousel. I am having trouble figuring out how to properly loop the data, to feed the carousel appropriately. What I would like to do, is loop through each JSON value, and sequentially feed three values per row of the carousel. My attempts resulted in three sequential values showing in all iterations of the carousel rows, instead of moving on to the next three values per row.
So, in essence, I seem to be having a loop issue. I am having trouble figuring out the proper way to loop this. I've tried several options, but none have worked appropriately. Again, all I want is to feed the carousel with 3 distinct items/values per row.
I noticed a fairly similar question was posted regarding feeding an unordered list, but my implementation of the response did not work.
Thanks for any help.
<script>
var $ = jQuery.noConflict();
var counter = 1;
// Set the global configs to synchronous
$.ajaxSetup({
cache: true,
async: false
});
$(document).ready(function() {
$.getJSON('http:JSON_feedlocation......', function(data) {
html = "";
// Carousel wrapper divs - exempt from loop
html += "<div class='container carousel carousel-show-one-at-a-time slide' data-interval='6000' data-ride='carousel' id='the-new-marketing-carousel'>";
html += "<div class='carousel-inner'>";
// First Loop - row wrapper
for (var i in data.content) {
html += "<div class='item'>";
html += "<div class='newsblock panel-display etowah-newsblock clearfix etowah-newsblock-trio'>";
html += "<div class='container'>";
html += "<div class='row'>";
// Second loop to pull in specific values, three values per loop
for (var i = 0; i < 3; i++) {
var type = data.content[i]["type"];
var title = data.content[i]["title"];
var url = data.content[i].url;
var created = data.content[i].created;
var teaser = data.content[i]["teaser"];
html += "<div id='carousel-blocks' class='newsblock-col-single newsblock__content--first col-md-4 col-sm-4 col-tiny-4'>";
html += "<div class='panel-pane pane-bundle-etowah-newsblock-item'>";
html += "<div class='news-block news-block--medium'>";
html += "<a href='"+ url +"''>";
html += "<img class='block__img' src='http://img" + data.content[i].thumbnail.split('public/')[1].split('?')[0] + "' />";
html += "</a>";
html += "<h3 class='news-block__title'>"
html += "<a href='"+ url +"'>"+ title +"";
html += "</a>";
html += "</h3>";
html += "</div>";
html += "</div>";
html += "</div>";
}
html += "</div>";
html += "</div>";
html += "</div>";
html += "</div>";
}
html += "</div>";
html += "</div>";
html += "<a class='left carousel-control' href='#the-new-marketing-carousel' data-slide='prev'><i class='glyphicon glyphicon-chevron-left'></i></a>";
html += "<a class='right carousel-control' href='#the-new-marketing-carousel' data-slide='next'><i class='glyphicon glyphicon-chevron-right'></i></a>";
counter = counter + 1;
document.getElementById("api-carousel").innerHTML=html;
$(".carousel div.item").first().addClass("active");
});
});
</script>
<div id="api-carousel">
<!-- Carousel api -->
</div>
Related
Edited the codes to add in full code
<!DOCTYPE html>
<html>
<body>
<h2>Make a table based on JSON data.</h2>
<button onClick="makeAjaxQueryMarket()">
Table1
</button>
<button onClick="makeAjaxQueryMarket2()">
Table2
</button>
<script>
function makeAjaxQueryMarket(){
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
readyStateChangeHandler(xhttp);
};
xhttp.open("GET", "country.json", true);
xhttp.send();
}
function readyStateChangeHandler(xhttp){
if (xhttp.readyState == 4){
if(xhttp.status == 200){
handleStatusSuccess(xhttp);
}else{
handleStatusFailure(xhttp);
}
}
}
function handleStatusFailure(xhttp){
var displayDiv = document.getElementById("display");
displayDiv.innerHTML = "XMLHttpRequest failed: status " + xhttp.status;
}
function handleStatusSuccess(xhttp){
var jsonText = xhttp.responseText;
// parse the json into an object
var currencyObj = JSON.parse(jsonText);
// display the object on the page
displayCurrency(currencyObj);
}
// display the market object on the page
function displayCurrency(currencyObj){
var html = "Table1";
html += "<table border='1'>";
html += "<tr><th>Name</th><th>Alpha-2</th><th>Currency</th></tr>";
for(var i=0; i < currencyObj.CountryList.length; i++){
var recordObj = currencyObj.CountryList[i];
html += "<tr>";
html += "<td><b>" + recordObj.name + "</b></td>";
html += "<td align='right'>" + recordObj.alpha2 + "</td>";
html += "<td align='right'>" + recordObj.currency+ "</td>";
html += "</tr>";
}
html += "</table>";
// show the constructed HTML code in the display div
var displayDiv = document.getElementById("display");
displayDiv.innerHTML = html;
}
</script>
</body>
</html>
I want to insert multiple buttons to generate different tables.
<Button> Onclick ="makeAjaxQuery()" </button>
Currently, I am able to generate a table from this. But what i wanted to do is to code more buttons to generate a different table. However, when i try to use the same code, i could not produce the tables, instead it all ended up the same. I have tried to use different names for the functions.. but doesn't help.
Is possible to put words in the function bracket of my AjaxQuery? like
makeAjaxQueryMarket(tb2)
I have my external json and trying to fetch the json values dynamically in my javascript. I am able to fetch the first level values and when I try to fetch the array object, it is showing my result as undefined. However when I try this "alert(data.siteAttribute[0].data[0].label);" its returning the the value.
Here is the following that I have tried
$(document).ready(function() {
$.getJSON("https://api.myjson.com/bins/naqzj", function(data) {
$(".test").html('<div class="card-deck">');
var output = "";
for (var i in data.siteAttribute) {
output += "<div class='col-md-4 col-lg-3'><div class='card site-attribute-card'>";
output += "<span class='sticker sticker-rounded sticker-top-right'><span class='inline-item'><img height='50' width='50' src='"+data.siteAttribute[i].data.imageURL +"'/></span></span>";
output += "<div class='card-body'> <div class='card-row'>"
output +="<div class='card-title text-truncate'>" + data.siteAttribute[i].data.label + "</div>";
output += "<div class='card-text'>" + data.siteAttribute[i].data.value + "</div>";
output +="<div class='card-title text-truncate'>" + data.siteAttribute[i].data.operatinghours + "</div>";
output += "<div class='card-text'>" + data.siteAttribute[i].data.hours + "</div>";
output +="<div class='card-title text-truncate'>" + data.siteAttribute[i].data.areaLabel + "</div>";
output += "<div class='card-text'>" + data.siteAttribute[i].data.areaValue + "</div>";
output +="<div class='card-title text-truncate'>" + data.siteAttribute[i].dateModified + "</div>";
output +="<div class='card-text'>" + data.siteAttribute[i].date + "</div>";
output += "</div></div>";
output += "<div class='card-footer'>";
output += "<div class='card-title text-truncate' title='Card Title'>"+ data.siteAttribute[i].name + "<span class='label label-tag label-category right'><span class='label-item label-item-expand'>"+data.siteAttribute[i].status+"</span></span></div>";
output += "<div class='card-links'><a href='/group/retail/site-management-form'>Edit</a><a class='right' href='#'>View</a></div></div>"
output += "</div></div>";
}
$(".test .card-deck").append(output);
$(".test .card-deck").append('</div>');
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div class="test container">
</div>
Here is my sample fiddle for reference. I am missing the loop fro the array and have no clues on how to figure out. Thanks in advance!
data.siteAttribute[i].data is an array
So you can use data.siteAttribute[i].data[0] to get the first item or you'll have to loop through that data as well.
Looks like you are only having issues with having nested loops. To loop over an array of objects I suggest I suggest using Array.prototype.forEach. To simplify your demo I have removed all the HTML markup and nested two forEach loops to parse over the JSON data. Please review the demo and inline comments below:
$(document).ready(function() {
$.getJSON("https://api.myjson.com/bins/naqzj", function(result) {
// Loop over the top level attributes
result.siteAttribute.forEach(function(attr) {
// Loop over the attribute `data` array
attr.data.forEach(function(attrData) {
// For demo purposes, loop over the inner data object and print its props and values
for (var key in attrData) {
console.log(key, ' -> ', attrData[key]);
}
});
});
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
I have been able to remove entries from the table once it's been removed on the database and also able to add entries once they've been edited.
how to check if data is already in html table using firebase real time database?
I am now looking for how to look for live changes to the database.
var database = firebase.database().ref().child('transactions');
database.on('child_added', function(snapshot){
var data = snapshot.val();
var content = '<tr id="'+snapshot.key+'">';
content += '<td>' + data.CustomerName + '</td>';//column2
content += '<td>' + data.TimeEffected + '</td>'; //column1
content += '<td>' + data.DateEffected + '</td>'; //column1
content += '<td>' + data.Successful + '</td>'; //column1
content += '</tr>';
$('#ex-table').append(content);
database.on('child_removed', function(snapshot){
$('#'+snapshot.key).remove()
});
});
I tried using this:
database.on('child_changed', function(snapshot){
$('#'+snapshot.key).change()
});
I tried putting it under the remove method but that has been unsuccessful.
The $('#'+snapshot.key) gets the correct element in the HTML, but jQuery's change() method does not do what you think it does. Read the linked documentation to learn what it actually does.
If you think about if for a moment this should make sense: how would a built-in method from jQuery know how to update your HTML structure?
Only your code knows what HTML it created for the data in the snapshot. You will need to replicate (some of) your code that creates the HTML in the child_added callback into the child_changed callback.
Something like this:
database.on('child_changed', function(snapshot){
var data = snapshot.val();
var content = '<tr id="'+snapshot.key+'">';
content += '<td>' + data.CustomerName + '</td>';//column2
content += '<td>' + data.TimeEffected + '</td>'; //column1
content += '<td>' + data.DateEffected + '</td>'; //column1
content += '<td>' + data.Successful + '</td>'; //column1
content += '</tr>';
$('#'+snapshot.key).replaceWith(content)
});
I want to post the detail of woocommerce orders like id, address, name etc of my woocomerce website to a page of another website of mine. I am getting responses in http://www.baruipurjn.in/wp-json/wc/v2/orders. I want to post the order details. I have successfully included the jQuery file in my functions.php file. My jQuery code is here. I am completely new in json and jquery. Please help.
jQuery(function($){
$.getJSON( "http://www.baruipurjn.in/wp-json/wc/v2/orders", function(data) {
var ordersData='';
$.each(data, function(key,value){
ordersData += "<tr>";
ordersData += "<td>" + value.id + "</td>";
ordersData += "<td>" + value.number + "</td>";
ordersData += "<td>" + value.total + "</td>";
ordersData += "</tr>";
});
$("orders").append(ordersData);
});
});
The id of the table where I want to put the data is "orders"
I have a table with many checkboxes which is generated with Ajax :
$.ajax({
type: "GET",
url: "jsonDevisUtilisateur.php?ra=" + $('#ra').val(),
success: function(data) {
var table = "<table class='dvs'><tr><td>Numéro</td><td>Client</td><td>Site</td><td>Libellé</td><td>Statut</td><td></td></tr>"
for (var i = 0; i < data.length; i++) {
table += "<tr><td>" + data[i].numDevis + "</td>";
table += "<td>" + data[i].client + "</td>";
table += "<td>" + data[i].site + "</td>";
table += "<td>" + data[i].libelle + "</td>";
table += "<td>" + data[i].statut + "</td>";
table += "<td><input type='checkbox' class='box' value='" + data[i].id + "' name='box[]'></td></tr>"
}
table += "</table>";
document.getElementById('devis').innerHTML = table + "<br/><br/>";
}
});
This part is working well !
The problem is when I'm trying to integrate a "select all" button.
My Javascript for it :
$(document).ready(function() {
$("#selectall").on("change", function(e) {
$("input[type=checkbox]").prop("checked", $(this).prop("checked"));
});
});
When my select all checkbox : <input type='checkbox' id='selectall' name='selectall'> is created on the same time than my HTML, it works.
But if I create my <input type='checkbox' id='selectall' name='selectall'> in my TABLE with my ajax function, it doesn't work, and nothing happens.
I'm pretty sure it is because the event is set to "selectall" at the load of the page but it doesn't exist yet and it doesn't look for it later.
What would be the solution ? Thanks for help
You can use event delegation as follow:
$('#devis').on("change", "#selectall", function(e) {
$("input[type=checkbox]").prop("checked", $(this).prop("checked"));
});
You are right in your thinking :
If your selectall checkbox is created after the document ready code execution, jquery can't find it (as it's not created yet).
I won't recommand using the live function as it is deprecated and can be removed in futur version of jquery.
You can still use the on function but with a little modification :
$("#devis").on("change", "#selectall",function(e) {
Note that #mycontainer MUST exist on document load.
If you can't place a container, this will always work :
$("body").on("change", "#selectall",function(e) {