We Keep Coding

How to loop through a json data from AWS dynamo db using javascript?

Pasting the GET api url on a browser shows me the json data. It looks like this:
{"Count":2,"Items":[{"date":{"S":""},"time":{"S":""},"email":{"S":"test1#email.com"},"name":{"S":""},"phone":{"S":""},"desc":{"S":""}},{"date":{"S":"3/7/21"},"time":{"S":"8:00am - 9:00am"},"email":{"S":"binia#gmu.edu"},"name":{"S":"Bini A"},"phone":{"S":"1234567890"},"desc":{"S":"I like your cut G"}}],"ScannedCount":2}
But When I try to use ajax request to loop through the data, it returns [Object Object]. Please help me figureout this error.
Here is my frontend code:
$.ajax({
url: 'my URL goes here ...',
type: "GET",
success: function (data) {
alert('data fetched!');
var tr = '<tr><th>Full Name</th><th>Phone Number</th><th>Email</th><th>Requested Date</th><th>Requested Time</th><th>Customer Feedback</th></tr>'; // row
// loop through data and display on table
data.Items.forEach(function (Item) {
tr += '<tr><td>' + Item.name + '</td>';
tr += '<td>' + Item.phone + '</td>';
tr += '<td>' + Item.email + '</td>';
tr += '<td>' + Item.date + '</td>';
tr += '<td>' + Item.time + '</td>';
tr += '<td>' + Item.desc + '</td></tr>';
});
$('#createdHoursDb').append(tr); // update table
console.log(tr);
},
error: function () {
alert('fetch request failed!');
}
});
Here is the response on the page:
[Object Object] on each cell of each row.

As you can see, the value of each property is also an object: "name":{"S":""}
So you can write:
...
data.Items.forEach(function (Item) {
tr += '<tr><td>' + Item.name.S + '</td>';
tr += '<td>' + Item.phone.S + '</td>';
tr += '<td>' + Item.email.S + '</td>';
tr += '<td>' + Item.date.S + '</td>';
tr += '<td>' + Item.time.S + '</td>';
tr += '<td>' + Item.desc.S + '</td></tr>';
});
...

You are seeing object because you have an object inside it {"S": ""}. Either you need to convert your data in the required form or you need to use like Item.name.S everywhere.
const data = {"Count":2,"Items":[{"date":{"S":""},"time":{"S":""},"email":{"S":"test1#email.com"},"name":{"S":""},"phone":{"S":""},"desc":{"S":""}},{"date":{"S":"3/7/21"},"time":{"S":"8:00am - 9:00am"},"email":{"S":"binia#gmu.edu"},"name":{"S":"Bini A"},"phone":{"S":"1234567890"},"desc":{"S":"I like your cut G"}}],"ScannedCount":2};
let tr = '<tr><th>Full Name</th><th>Phone Number</th><th>Email</th><th>Requested Date</th><th>Requested Time</th><th>Customer Feedback</th></tr>'; // row
data.Items.forEach(function (Item) {
tr += '<tr><td>' + Item.name.S + '</td>';
tr += '<td>' + Item.phone.S + '</td>';
tr += '<td>' + Item.email.S + '</td>';
tr += '<td>' + Item.date.S + '</td>';
tr += '<td>' + Item.time.S + '</td>';
tr += '<td>' + Item.desc.S + '</td></tr>';
});
$('#createdHoursDb').append(tr); // update table
console.log(tr);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="createdHoursDb">
</table>

Concatenate Two AJAX Request Returns to 1 Array

Below is my code. I have two ajax request pulling data from two seperate lists that contain the same information. When they populate my table in my Success function, it posts two seperate tables instead of one but it contains all the information I want to populate into the table.
How can I concatenate the returns into one array to post to the table?
$(function(){
window.addEventListener('load', function(){
var fullUrl = _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbytitle('EmployeeInfo')/items?$select=Title,Age,Position,Office,Education,Degree";
var fullUrl1 = _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbytitle('Employee2')/items?$select=Title,Age,Position,Office,Education,Degree";
$.ajax({
url: fullUrl,
type: "GET",
headers: {
"accept":"application/json; odata=verbose"
},
success: onSuccess,
error: onError
});
$.ajax({
url: fullUrl1,
type: "GET",
headers: {
"accept": "application/json; odata=verbose"
},
success: onSuccess,
error: onError
});
function onSuccess(data) {
var objItems = data.d.results;
var tableContent = '<table id="employeeTab" style="width:100%" border="1 px"><thead><tr><td><strong>Name</strong></td>' + '<td><strong>Age</strong></td>' + '<td><strong>Position</strong></td>' + '<td><strong>Office</strong></td>' + '<td><strong>Education</strong></td>' + '<td><strong>Degree</strong></td>' +'</tr></thead><tbody>';
for (var i = 0; i < objItems.length; i++) {
tableContent += '<tr>';
tableContent += '<td>' + objItems[i].Title + '</td>';
tableContent += '<td>' + objItems[i].Age + '</td>';
tableContent += '<td>' + objItems[i].Position + '</td>';
tableContent += '<td>' + objItems[i].Office + '</td>';
tableContent += '<td>' + objItems[i].Education + '</td>';
tableContent += '<td>' + objItems[i].Degree + '</td>';
tableContent += '</tr>';
}
$('#employees').append(tableContent);
}
function onError(error) {
alert('Error');
}
});
});

Here's a formulation using fetch() and promises. (Dry-coded, so there may be silly bugs.)
EDIT: Added the source parameter that's added into all results.
function loadData(source, url) {
return fetch(url, { headers: { accept: "application/json; odata=verbose" } }) // make request
.then((r) => {
if (!r.ok) throw new Error("Failed: " + url); // Check for errors
return r.json(); // parse JSON
})
.then((data) => data.d.results) // unwrap to get results array
.then((results) => {
results.forEach((r) => (r.source = source)); // add source to each item
return results;
});
}
window.addEventListener("load", function () {
Promise.all([
loadData("EmployeeInfo", _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbytitle('EmployeeInfo')/items?$select=Title,Age,Position,Office,Education,Degree"),
loadData("Employee2", _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbytitle('Employee2')/items?$select=Title,Age,Position,Office,Education,Degree"),
])
.then(([r1, r2]) => {
const objItems = r1.concat(r2);
var tableContent =
'<table id="employeeTab" style="width:100%" border="1 px"><thead><tr><td><strong>Name</strong></td>' +
"<td><strong>Age</strong></td>" +
"<td><strong>Position</strong></td>" +
"<td><strong>Office</strong></td>" +
"<td><strong>Education</strong></td>" +
"<td><strong>Degree</strong></td>" +
"<td><strong>Source</strong></td>" +
"</tr></thead><tbody>";
for (var i = 0; i < objItems.length; i++) {
tableContent += "<tr>";
tableContent += "<td>" + objItems[i].Title + "</td>";
tableContent += "<td>" + objItems[i].Age + "</td>";
tableContent += "<td>" + objItems[i].Position + "</td>";
tableContent += "<td>" + objItems[i].Office + "</td>";
tableContent += "<td>" + objItems[i].Education + "</td>";
tableContent += "<td>" + objItems[i].Degree + "</td>";
tableContent += "<td>" + objItems[i].source + "</td>";
tableContent += "</tr>";
}
$("#employees").append(tableContent);
})
.catch((err) => {
alert("Error: " + err);
console.error(err);
});
});
EDIT:
For an arbitrary number of data sources, you can do
Promise.all([
loadData("A", ...),
loadData("B", ...),
loadData("C", ...),
loadData("D", ...),
loadData("E", ...),
])
.then((arrays) => {
const objItems = arrays.reduce((a, b) => a.concat(b), []);
// ...

I can think of two ways without using promise right now .
1 You can use closure to capture the response.
2 global variable
I like the first approach more, because it seems more maintainable and reusable.
function requestCounter() {
return (function l2(){
var data = [];
var totalRequest = 0;
return (function l3 (){
return {
get : function (){
return {data:data,totalRequest}
},add : function(responseData){
totalRequest += 1
data = data.concat(responseData)
}
}
})()
})()
}
var requestCounter = requestCounter()
var tempData1 = [
{Title :"T1",Age :"12" },
{Title :"T2",Age :"13" }
]
var tempData2 = [
{Title :"T3",Age :"125" },
{Title :"T4",Age :"133" }
]
function onSuccess(data) {
//replace this with your data.d.results
var objItems = data;
requestCounter.add(objItems);
var totalData = requestCounter.get();
if(totalData.totalRequest > 1) {
var tableContent = '<table id="employeeTab" style="width:100%" border="1 px"><thead><tr><td><strong>Name</strong></td>' + '<td><strong>Age</strong></td>' + '<td><strong>Position</strong></td>' + '<td><strong>Office</strong></td>' + '<td><strong>Education</strong></td>' + '<td><strong>Degree</strong></td>' +'</tr></thead><tbody>';
for (var i = 0; i < totalData.data.length; i++) {
tableContent += '<tr>';
tableContent += '<td>' + totalData.data[i].Title + '</td>';
tableContent += '<td>' + totalData.data[i].Age + '</td>';
tableContent += '</tr>';
}
}
console.log(tableContent);
}
//first ajax call
onSuccess(tempData1);
///second ajax call
onSuccess(tempData2);
with promise you can refer to this link .
When all AJAX requests complete

Consider the following code.
$(function() {
var myData = [];
window.addEventListener('load', function() {
var fullUrl = _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbytitle('EmployeeInfo')/items?$select=Title,Age,Position,Office,Education,Degree";
var fullUrl1 = _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbytitle('Employee2')/items?$select=Title,Age,Position,Office,Education,Degree";
$.ajax({
url: fullUrl,
type: "GET",
headers: {
"accept": "application/json; odata=verbose"
},
success: onSuccess,
error: onError
});
$.ajax({
url: fullUrl1,
type: "GET",
headers: {
"accept": "application/json; odata=verbose"
},
success: onSuccess,
error: onError
});
function onSuccess(data) {
$.each(data.d.results, function(l, v) {
myData.push(v);
});
refreshTable();
}
function initTable(hdrs) {
var t = $("<table>", {
id: "employeeTab"
}).css({
width: "100%",
border: "1"
});
$("<thead>").appendTo(t);
var r = $("<tr>").appendTo($("thead", t));
$.each(hdrs, function(i, h) {
$("<th>").html(h).appendTo(r);
});
return t;
}
function refreshTable() {
var tableContent;
if ($("#employeeTab").length == 0) {
tableContent = initTable(["Name", "Age", "Position", "Office", "Education", "Degree"]);
tableContent.appendTo("#employees");
} else {
tableContent = $("#employeeTab");
}
var tBod = $("tbody", tableContent);
tBod.html("");
$.each(myData, function(k, v) {
var row = $("<tr>").appendTo(tBod);
$.each(v, function(j, item) {
$("<td>").html(item).appendTo(row);
});
});
}
function onError(error) {
alert('Error');
}
});
});
We can use a variable, myData, outside of the functions to contain all the data. Similar to a Global Variable.
I broke the steps down into their own functions for ease of use.

how to change one button based on value

I want to change my ajax button based on if else condition. Like if status is 1 then it will show just active button otherwise it just show the inactive button. I have two buttons. I cant find the logic where I actually put my if else condition. My code is:
function showAllArticle(status = "") {
//alert(status);
$.ajax({
//cache: false,
//headers: { "cache-control": "no-cache" },
type: 'ajax',
method: 'post',
data: {
status: status
},
url: '<?php echo base_url() ?>Article/showAllUser',
async: true,
dataType: 'json',
//cache: false,
success: function(data) {
var html = '';
var i;
for (i = 0; i < data.length; i++) {
//(data[i].status);
html += '<tr>' +
'<td>' + data[i].id + '</td>' +
'<td>' + data[i].username + '</td>' +
'<td>' + data[i].email + '</td>' +
'<td>' +
// '{% if data[i].status == 1 %}'
'Active' +
//#if(data[i].status == 1)
//'{% else %}'
'Inactive' +
//'{% endif %}'
/* '</td>' +
'<td>'+
'+#if(data[i].status == 1)+'
'tseting'+
'+#elseif(data[i].status == 0)+'
'debug'+
'+#endif+'
'</td>'+*/
'</tr>';
}
$('#showdata').html(html);
},
error: function() {
alert('Could not get Data from Database');
}
});
}

You must apply the if condition based on JS, not on the template language you are using as JS is executed on the user end.
You must do something similar do this:
html += '<tr>';
html += '<td>' + data[i].id + '</td>';
html += '<td>' + data[i].username + '</td>';
html += '<td>' + data[i].email + '</td>';
html += '<td>';
if (data[i].status == 1) {
html += 'Active';
} else if(data[i].status == 12) {
//...
} else {
html += 'Inactive' +
}
/* '</td>' +
'<td>'+
'+#if(data[i].status == 1)+'
'tseting'+
'+#elseif(data[i].status == 0)+'
'debug'+
'+#endif+'
'</td>'+*/
html += '</tr>';

How to call a thymeleaf modal fragment from a javascript generated link?

I have a javascript function that renders a table from an ajax call.
The row rendering bit is:
function buildTable(id) {
trHTML = null;
$.ajax({
type: "GET",
url: siteroot + "apiURL" + id,
data: {},
dataType: "json",
cache: false,
success: function (data) {
for (i = 0; i < data.length; i++) {
trHTML +=
'<tr>' +
'<td>' + data[i].value +
'<a class="pull-right" href="#" data-toggle="modal" data-target="#edit-modal" > ' +
'<span class="pull-right glyphicon glyphicon-pencil"></span>' +
'</a>' +
'</td>' +
'<td>' + data[i].text + '</td>' +
'<td>' + data[i].description + '</td>' +
'</tr>';
}
$('#resourceTable').append('<tbody>' + trHTML + '</tbody>');
},
error: function (msg) {
alert(msg.responseText);
}
});
}
And the modal is defined as:
<div th:replace="../../modals/modal"></div>
The issue I am facing is that the link is here on the rendered table, but when I click it, the modal does not come on.
What am I not seeing here?

How to get Dropdownlist value inside HTML Table

I have a html table looks like below,and I want to get the dropdownlist value in table row by select the dropdownlist to a variable,when I select the second row dropdownlist it always pass the first row dropdownlist value,how to get the dropdownlist value by selected Row.
My Code is :
var table = $('<table id="tblprod" class="datagrid" border="0" class="table table-bordered"><thead ><tr><th><font size="2">Item ID<font></th><th><font size="2">Material Request Number</th><th><font size="2">Product Name</font></th><th><font size="2">Budget Qty</font></th><th><font size="2"><font size="2">Unit Code</font></font></th><th><font size="2"><font size="2">Unit Price</font></font></th><th><font size="2"><font size="2">Request Quantity</font></font></th><th><font size="2"><font size="2">Available Stock</font></font></th><th><font size="2"><font size="2">AlReady Issued</font></font></th><th><font size="2"><font size="2">Excess/Over Issues</font></font></th><th><font size="2"><font size="2">Balance Quantity</font></font></th><th><font size="2"><font size="2">Current Issue Quantity</font></font></th></tr></thead><tbody id=""></tbody></table>').addClass('product-table');
$('#product-load-tbl').append(table);
var totprice = 0;
$("#select-product").change(function () {
debugger;
CallBudgetNo();
CallBudgetProdQty();
document.getElementById('select-product').disabled = true;
var mrqno = $("#select-product :selected").val();
$.ajax({
type: "POST",
url: "/StockTransfer/CallMRN_No?MRNNO=" + mrqno,
contentType: "application/; charset=utf-8",
dataType: "json",
async: false,
success: function (grnhdmethod) {
if (grnhdmethod.length > 0) {
var i = 0;
$.each(grnhdmethod, function (index, item) {
debugger;
var row = '<tr>';
row += '<td class="ProId" id="idPoNum">' + $(this).attr('ItemId') + '</td>';
row += '<td class="MRNNo" id="idMrnNum">' + $(this).attr('MaterialRequest_No') + '</td>';
row += '<td class="col-md-1 inpprod" dir="rtl">' +
'<select id="select-txtpro' + index + '" class="select-Id" style="width: 200px" >"<option>--select Product--</option>"</select></td>';
row += '<td class="BudgetQty">' + '<input type="text" class="bdgt-qty' + $(this).attr('ItemId') + ' form-control col-md-3 center-block input-sm" data-id="bdgt-qty-" disabled="true">' + '</td>';
row += '<td class="UnitCode">' + $(this).attr('UnitCode') + '</td>';
row += '<td class="UnitPrice">' + $(this).attr('UnitPrice') + '</td>';
row += '<td class="ordrQty">' + $(this).attr('Quantity') + '</td>';
row += '<td class="stockval">' + '<input type="text" class="input-stk' + $(this).attr('ItemId') + ' form-control col-md-3 center-block input-sm" data-id="input-stk-" disabled="true">' + '</td>';
row += '<td class="allreadyrecived">' + $(this).attr('finalval') + '</td>';
if (TempIssuedtoWorkQty > tempNoBudQty) {
row += '<td class="OverIssueQty">' + (TempIssuedtoWorkQty - tempNoBudQty) + '</td>';
}
else {
row += '<td class="OverIssueQty">0</td>';
}
row += '<td class="blncQty" id="bal" dir="rtl" align="right">' + ($(this).attr('Quantity') - $(this).attr('finalval')) + '</td>';
if ($(this).attr('Quantity') == $(this).attr('finalval')) {
row += '<td class="col-md-1 inpqty" dir="rtl">' + '<input type="text" class="input-qty form-control col-md-3 center-block input-sm" data-id="input-qty" disabled="true">' + '</td>';
alert("Request Order Already Completed..!!!");
location.reload();
return true;
}
else {
row += '<td class="col-md-1 inpqty" dir="rtl">' + '<input type="text" class="input-qty form-control col-md-3 center-block input-sm" id="input-qty-' + $(this).attr('ItemId') + '" value="0">' + '</td>';
}
row += '</tr>';
table.append(row);
$.each(item.Products, function (i,product) {
$('#select-txtpro'+index).append(
$("<option></option>")
.text(product.ProductName)
.val(product.ProductId)
.attr('ProductId', item.ProductId)
.attr('ProductName', item.ProductName)
);
})
CallBudgetProdQty();
});
}
}
});
});
Here is my Onchange function :
$('#product-load-tbl').on('change', '.select-Id', function () {
debugger;
var proid = $('.select-Id').val();
var locid = ToIDtemp;
if (proid == "0") {
alert("Please Select Product..!");
}
else {
$.ajax({
type: "POST",
url: "/StockTransfer/CallAvailablestck?PROID=" + proid + "&LOCID=" + ToIDtemp,
contentType: "application/; charset=utf-8",
dataType: "json",
async: false,
success: function (prodlist) {
if (prodlist.length > 0) {
debugger;
AvailableStck = prodlist[0].AvaiStock
$('.input-stk' + prodlist[0].ItemId).val(AvailableStck)
}
else {
alert('Product Not in Stock')
}
}
});
}
});