We Keep Coding

JavaScript $.each json is not defined

I have a string of JSON
msg = {d: "[{"ID":1,"IndentDate":"30/07/2018","EmpCode":"4000…er":"sef"}]
I wish to append my table but its showing row is undefined
$.each(msg, function(i, row) {
$("#autoTable").append("<tr><td>" + row['IndentDate'] + "</td><td>" + row['EmpCode'] + "</td></tr>");
})
I tried
$.each(json, function (i, msg) {
$("#autoTable").append("<tr><td>" + msg.IndentDate + "</td><td>" + msg.EmpCode + "</td></tr>");
})
too.please help

this thing worked..hope it helps others too..thanks for the help guys
var jsonString = JSON.parse(msg.d);
jsonString.forEach(function (row) {
$("#autoTable").append("" + row.IndentDate + "" + row.EmpCode + " ");
});

How to set dynamic where clause with JSStore while working with IndexedDB?

I am working on IndexedDB using JsStore wrapper. Everything works fine in the code when I set the column name directly in the Where block but if I make it dynamic as shown in the following code then the code doesn't work.
var searchValueType = $('input:radio[name=searchValueType]:checked').val();
var searchValue = $("#searchValue").val();
var column1 = 'Name';
var whereClause = column1+':'+searchValue;
alert ("where clause >> "+whereClause);
DbConnection.select({
From: "Student",
Where: {
whereClause
},
},
function (students) {
var HtmlString = "";
students.forEach(function (student) {
HtmlString += "<tr ItemId=" + student.Id + "><td>" +
student.Name + "</td><td>" +
student.Gender + "</td><td>" +
student.Country + "</td><td>" +
student.City + "</td><td>" +
"<a href='#' class='edit'>Edit</a></td>" +
"<td><a href='#' class='delete''>Delete</a></td>";
}, function (error) {
console.log(error);
})
$('#tblGrid tbody').html(HtmlString);
});

Issue is clearly visible in code, Where expects an object but you are passing a string within curly bracket.
You need to create the object in a variable and assign it to Where option of jsstore.
Please check the below code -
var searchValueType = $('input:radio[name=searchValueType]:checked').val();
var searchValue = $("#searchValue").val();
//var column1 = 'Name';
//var whereClause = column1+':'+searchValue;
//alert ("where clause >> "+whereClause);
// Where clause is now an object
var whereClause = {
Name: searchValue
}
DbConnection.select({
From: "Student",
Where: whereClause,
}, function(students) {
var HtmlString = "";
students.forEach(function(student) {
HtmlString += "<tr ItemId=" + student.Id + "><td>" +
student.Name + "</td><td>" +
student.Gender + "</td><td>" +
student.Country + "</td><td>" +
student.City + "</td><td>" +
"<a href='#' class='edit'>Edit</a></td>" +
"<td><a href='#' class='delete''>Delete</a></td>";
}, function(error) {
console.log(error);
})
$('#tblGrid tbody').html(HtmlString);
});

how to move the table row data (HTML) from one php page to another

// searching the country to select(js file)
function search_country(){
d3.csv("data/totalpopulation.csv", function(data) {
var v=f1.search.value;
for(var i=0;i<data.length;i++){
if(data[i].Name==v){
document.getElementById('tablediv').style.visibility="visible";
// retrun value
document.getElementById('poptable').innerHTML+="<tr id='"+data[i].Name+"' class='ComparisonTable' onclick='current_country(this.id)' style='cursor:pointer'><td>" + data[i].Name + "</td><td>" + (data[i].p1961/1000000).toFixed(2) + "</td><td>" + (data[i].p2016/1000000).toFixed(2) + "</td></tr>";
}
}
});
}
// Comparing the Selected Countries
function compare(){
window.location.href='country.php';
}
Here, I am selecting the countries from search bar and putting in CompareTable.
Furthur, On clicking a compare button i should move to next php file (country.php) and carry the same table data to compare them.
document.getElementById('poptable').innerHTML+="<tr id='"+data[i].Name+"' class='ComparisonTable' onclick='current_country(this.id)' style='cursor:pointer'><td>" + data[i].Name + "</td><td>" + (data[i].p1961/1000000).toFixed(2) + "</td><td>" + (data[i].p2016/1000000).toFixed(2) + "</td></tr>";

Use an arrya to store the complete tr values
var data_arr[];
function search_country(){
d3.csv("data/totalpopulation.csv", function(data) {
var v=f1.search.value;
for(var i=0;i<data.length;i++){
if(data[i].Name==v){
document.getElementById('tablediv').style.visibility="visible";
// push value to an object.
data_arr.push(document.getElementById('poptable').innerHTML+="<tr id='"+data[i].Name+"' class='ComparisonTable' onclick='current_country(this.id)' style='cursor:pointer'><td>" + data[i].Name + "</td><td>" + (data[i].p1961/1000000).toFixed(2) + "</td><td>" + (data[i].p2016/1000000).toFixed(2) + "</td></tr>");
}
}
});
}
// Comparing the Selected Countries
function compare(){
data_arr_json = JSON.stringify(data_arr);
window.location.href='country.php?data='+data_arr_json;
}
When you want to get the data of array in country.php:
$data_from_url = json_decode($_GET['data']);

I want to retrieve data from Firebase into an HTML textbox, then update the data in Firebase

I have 2 questions.
I have managed to retrieve data from Firebase into an HTML table but can't understand how to put that data into an HTML form, basically the same form I used to create the data in the first place, make changes and then update data via the form in Firebase.
Currently I am retrieving the data using child_added into an HTML table, it works fine and shows a new row in the table but when I use child_changed it happens that the previous data (row) remains and a new row is created to show the changes. How can I show the changes on the same row it was changed in Firebase?
Thank You
Code to show added data:
var registration = firebase.database().ref("REGISTRATION");
var dataRef = firebase.database().ref("REGISTRATION");
dataRef.on("child_added", function(data) {
var rData = data.val();
$("#reData").append("<tr><td>" + rData.email + "</td><td>" + rData.name + "</td><td>" + rData.gender + "</td><td>" + rData.birthdate + "</td><td>" + rData.phone + "</td><td>" + rData.state + "</td><td>" + rData.school + "</td><td>" + rData.class + "</td><td>" + rData.classname + "</td></tr>");
});
Code to show updated data in HTML form:
var upData = firebase.database().ref("REGISTRATION");
upData.on("child_changed", function(data) {
var rData = data.val();
$("#reData").append = ("<tr><td>" + rData.email + "</td><td>" + rData.name + "</td><td>" + rData.gender + "</td><td>" + rData.birthdate + "</td><td>" + rData.phone + "</td><td>" + rData.state + "</td><td>" + rData.school + "</td><td>" + rData.class + "</td><td>" + rData.classname + "</td></tr>");
});

Huud Rych, I have created a jsfiddle for you. In the fiddle data will be appended to the table from firebase when clicking on edit, I have used jquery, you can also try it. The data appended to the form. when pressing the update button the data will be updated and the table will get refreshed. Sample JS Fiddle
for (var key in data){
data[key].key=key;// here I am pushing the key from the firebase into the array, so we can use it while updating the data. See in the Js fiddle
dataArray.push(data[key]);
};

How to append row data to table one by one?

Here is my html code
<tr id="tHead">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
Here is my js code
$(document).ready(function(){
$.ajax({
url: "data.json",
dataType: "json",
success: function(obj) {
for(i=0;i<obj.data.length;i++){
$("#tHead").after("<tr>" +
"<td>" + obj.data[i].name1 +
"</td><td>" + obj.data[i].name2 +
"</td><td>" + obj.data[i].name3 +
"</td><td>" + obj.data[i].name4 +
"</td><td>" + obj.data[i].name5 +
"</td></tr>");
}
}
});
});
Now I can append data after "tHead" tr.
Because I use .after in my js code, so the data row will append one by one after"tHead" which will make my first data row become the last one in table.
I need first data row will be first row on table when I append it.
What can I do to make it correct?
I try to use .append but not work, the new row will directly append in the end of "tHead" row.

You simply need to use .append() on the parent table, instead of using .after() on the #tHead
success: function(obj) {
for(var i = 0; i < obj.data.length; i++) {
$("#tHead").parent("table").append("<tr>" +
"<td>" + obj.data[i].name1 +
"</td><td>" + obj.data[i].name2 +
"</td><td>" + obj.data[i].name3 +
"</td><td>" + obj.data[i].name4 +
"</td><td>" + obj.data[i].name5 +
"</td></tr>");
}
}
your rows will now be appended in chronological order.
A second solution would be to use .after() on the :last psuedo selector together with the .siblings() selector used with #tHead.
success: function(obj) {
for(var i = 0; i < obj.data.length; i++) {
$("#tHead").siblings("tr:last").after("<tr>" +
"<td>" + obj.data[i].name1 +
"</td><td>" + obj.data[i].name2 +
"</td><td>" + obj.data[i].name3 +
"</td><td>" + obj.data[i].name4 +
"</td><td>" + obj.data[i].name5 +
"</td></tr>");
}
}

Invert your loop , and it will work as you want
$(document).ready(function()
{
$.ajax(
{
url: "data.json",
dataType: "json",
success: function(obj)
{
for(i=obj.data.length-1;i>=0;i--)
{
$("#tHead").after("<tr>" +
"<td>" + obj.data[i].name1 +
"</td><td>" + obj.data[i].name2 +
"</td><td>" + obj.data[i].name3 +
"</td><td>" + obj.data[i].name4 +
"</td><td>" + obj.data[i].name5 +
"</td></tr>");
}
}
});
});

Something like this maybe:
$(document).ready(function(){
$.ajax({
url: "data.json",
dataType: "json",
success: function(obj) {
$("#tHead").append("<tr>");//----------- open new row.
obj.forEach(function(row) {
$("#tHead").append("<td>");
$("#tHead").append(row);//---------- actual info.
$("#tHead").append("</td>");
});
$("#tHead").append("</tr>");//---------- close new row.
}
}
});
});
An excellent read can be found here : https://stackoverflow.com/a/9329476/2645091
on the different ways to iterate arrays.