I have some values that are returned to ajax from backend.
The problem in this code is that when I do console.log(myRows) the values in cells are undefined.
$(document).on('click', ".myButton", function () {
$.ajax({
type: "POST",
url: "Administration.aspx/GetMyCollection",
data: JSON.stringify({ 'Parameter': Parameter }),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
if (data.d.length > 0) {
var myRows = "";
$.each(data, function (i, values) {
values.ObjectID;
values.ObjectName;
values.ObjectValue;
values.Object;
console.log(values);
myRows += "<tr><td>" + values[1].ID + "</td><td>" + values[1].ObjectName + "</td><td>" + values[1].ObjectValue + "</td><td>" + values[1].Object + "</td></tr>";
console.log(myRows);
});
}
console.log("Saved!");
},
error: function () {
console.log("Not Saved!");
}
});
});
But when I change the code and add values[1], the values are displayed correctly.
myRows += "<tr><td>" + values[1].ID + "</td><td>" + values[1].ObjectName + "</td><td>" + values[1].ObjectValue + "</td><td>" + values[1].Object + "</td></tr>";
I need help to change the code so it will loop through all 9 (from 1 to 9) values and places the results in myRows cells so all the values can be displayed.
Json code:
d […]
0 {…}
ObjectID 1
ObjectName Vegas
ObjectValue 234
Object Arizona
1 {…}
ObjectID 2
ObjectName Chicago
ObjectValue 211
Object Montana
2 {…}
ObjectID 3
ObjectName Livepool
ObjectValue 123
Object London
...
Thanks in advance !
You're not looping over the right item - $.each(data should be $.each(data.d since d contains the array. Then each time the loop runs values will represent one individual object from the array, and you can removed the [1] from your code.
Also values.ID should be values.ObjectID I think, based on the data sample you give in the question - there's no "ID" property on any of your objects.
Lastly I took the liberty of moving console.log(myRows); to after the end of the loop - then you'll just see the whole string once, not get it repeated each time with an extra bit added, which might be confusing.
$.each(data.d, function (i, values) {
console.log(JSON.stringify(values));
myRows += "<tr><td>" + values.ObjectID + "</td><td>" + values.ObjectName + "</td><td>" + values.ObjectValue + "</td><td>" + values.Object + "</td></tr>";
});
console.log(myRows);
As you are iterating over the array, values will hold the object. Hence, you do not need to use values[i] or values[1]. Additionally, it seems you have data in data.d and hence, should iterate on that.
Hence, you can update your code to following
$.each(data.d, function (i, values) {
myRows += "<tr><td>" + values.ObjectID + "</td><td>" + values.ObjectName + "</td><td>" + values.ObjectValue + "</td><td>" + values.Object + "</td></tr>";
});
console.log(myRows);
Note, add your log after the each block to see complete set of rows.
use function like this to make tr string
var myRows = "";
data.forEach(function (values,key) {
myRows += "<tr><td>" + values.ID + "</td><td>" + values.ObjectName + "</td><td>" + values.ObjectValue + "</td><td>" + values[1].Object + "</td></tr>";
console.log(myRows);
});
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);
});
// 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 have json data which i want to display in html div using for loop. my control in entering in loop but not appending and displaying data in html div.
json data;
[{"id":"15","FirstName":"ranjan","MiddleName":"","LastName":"","Gender":"","Location":"r","Email":"ranjan.gupta.1994#gmail.com","Mobile":""},{"BookTitle":"","BookGenre":"","BookWriter":"","BookDescription":""}]
code;
$.getJSON(url, function(data) {
console.log(data);
if (data) {
alert("hey got the data" + JSON.stringify(data));
for (var i = 0; i < data.length; i++) {
alert("entered");
alert("hey got the data" + JSON.stringify(data[1]));
var $appendData =
$('<div id="' + data[i].id + '">' + '<p>'
+ 'FirstName:' + data[i].data.FirstName + '<br/>'
+ 'MiddleName:' + data[i].data.MiddleName + '<br/>'
+ 'LastName:' + data[i].data.LastName + '<br/>'
+ 'Gender:' + data[i].data.Gender + '<br/>'
+ 'Location:' + data[i].data.Location + '<br/>'
+ 'Email:' + data[i].data.Email + '<br/>'
+ 'Mobile:' + data[i].data.Mobile + '<br/>'
+ '</p>' + '</div>').appendTo('#postjson');
}
} else {
return;
}
// this is my div
</script>
<div class="grid" id="postjson"></div>
</div>
</div>
You got typo on your loop, just replace all your data[i].data.property with data[i].property
Javascript
$.getJSON(url,function(data) {
console.log(data);
if(data){
alert("hey got the data"+JSON.stringify(data));
for(var i=0; i<data.length; i++) {
alert("entered");
alert("hey got the data"+JSON.stringify(data[1]));
$('<div id="'+data[i].id+'">'
+'<p>'
+'FirstName:'+data[i].FirstName+'<br/>'
+'MiddleName:'+data[i].MiddleName+'<br/>'
+'LastName:'+data[i].LastName+'<br/>'
+'Gender:'+data[i].Gender+'<br/>'
+'Location:'+data[i].Location+'<br/>'
+'Email:'+data[i].Email+'<br/>'
+'Mobile:'+data[i].Mobile+'<br/>'
+'</p>'
+'</div>').appendTo('#postjson');
}
}
else {
return;
}
JsFiddle
This question already has answers here:
I keep getting "Uncaught SyntaxError: Unexpected token o"
(9 answers)
Closed 7 years ago.
I have the following Json data (Please see the image). I am trying to extract the data using the below jQuery code and it's not working. Please help.
var items = [];
$.each($.parseJSON(OnePointData), function (key, val) {
items.push("<li id='" + key + "'>" + val + "</li>");
$.each(key, function(key2, val2) {
items.push("<li id='" + key2 + "'>" + val2 + "</li>");
});
});
console.log(items);
Here is an image of my console:
And here is additional code from my implementation:
$.getJSON("/Home/GetOnePointData", { Address: ui.item.value },function(OnePointData) {
console.log(OnePointData);
var items = [];
var items2 = [];
$.each($.parseJSON(OnePointData), function (key, val) {
items.push("<li id='" + key + "'>" + val + "</li>");
$.each(key, function (key2, val2) {
items2.push("<li id='" + key2 + "'>" + val2 + "</li>");
});
});
console.log(items2);
});
If i run the loop once then i get the following result.
The data is in the following format:
{"GetQuestions":{"s1":"Q1,Q2","s2":"Q1,Q2,Q3","s3":"Q1,Q2,Q4","s4":"Q1,Q2,Q4,Q6"},
"GetQuestions2":{"s1":"Q1,Q2","s2":"Q1,Q2,Q3","s3":"Q1,Q2,Q4","s4":"Q1,Q2,Q4,Q6"}}
As #Barmar says $.getJSON calls $.parseJSON automatically. So, just try removing $.parseJSON function:
$.getJSON("/Home/GetOnePointData", { Address: ui.item.value}, function(OnePointData) {
console.log(OnePointData);
var items = [];
var items2 = [];
$.each(OnePointData, function (key, val) {
items.push("<li id='" + key + "'>" + val + "</li>");
$.each(val, function (key2, val2) {
items2.push("<li id='" + key2 + "'>" + val2 + "</li>");
});
});
console.log(items2);
});
This is an example using data structure posted by you and it works.
var OnePointData = {"GetQuestions":{"s1":"Q1,Q2","s2":"Q1,Q2,Q3","s3":"Q1,Q2,Q4","s4":"Q1,Q2,Q4,Q6"},
"GetQuestions2":{"s1":"Q1,Q2","s2":"Q1,Q2,Q3","s3":"Q1,Q2,Q4","s4":"Q1,Q2,Q4,Q6"}};
var items = [];
var items2 = [];
$.each(OnePointData, function (key, val) {
items.push("<li id='" + key + "'>" + val + "</li>");
$.each(val, function (key2, val2) {
items2.push("<li id='" + key2 + "'>" + val2 + "</li>");
});
});
console.log(items);
console.log(items2);
Output:
["<li id='GetQuestions'>[object Object]</li>", "<li id='GetQuestions2'>[object Object]</li>"]
["<li id='s1'>Q1,Q2</li>", "<li id='s2'>Q1,Q2,Q3</li>", "<li id='s3'>Q1,Q2,Q4</li>", "<li id='s4'>Q1,Q2,Q4,Q6</li>", "<li id='s1'>Q1,Q2</li>", "<li id='s2'>Q1,Q2,Q3</li>", "<li id='s3'>Q1,Q2,Q4</li>", "<li id='s4'>Q1,Q2,Q4,Q6</li>"]