Moti Mashiah
asked on
Json and ajax javascript
Hi Guys,
I'm trying to read json list object through ajax:
Here is my json data return - which basically return 2 rows:
Here is the ajax call when I get the date and try to inject it to the table:
I'm getting the "data" and can see the two rows, but when I loop through I'm getting undefined.
Please help.
I'm trying to read json list object through ajax:
Here is my json data return - which basically return 2 rows:
[{"BinLocation":"16A","BuydownPrice":0.0000,"BuydownQuantity":0.0,"CommissionAmount":0.0000,"CommissionMaximum":0.0000,"CommissionMode":0,"CommissionPercentProfit":0.0,"CommissionPercentSale":0.0,"Description":"3 B/G H.D. MYLAR K","FoodStampable":false,"HQID":139858,"ItemNotDiscountable":false,"LastReceived":"2007-06-07T00:00:00","LastUpdated":"2013-01-18T16:24:06","Notes":null,"QuantityCommitted":0.0,"SerialNumberCount":0,"TareWeightPercent":0.0,"ID":1,"ItemLookupCode":"0839420-EA","DepartmentID":8,"CategoryID":614,"MessageID":0,"Price":0.7900,"PriceA":0.0000,"PriceB":0.0000,"PriceC":0.0000,"SalePrice":0.0000,"SaleStartDate":null,"SaleEndDate":null,"QuantityDiscountID":0,"TaxID":1,"ItemType":0,"Cost":0.2282,"Quantity":27.0,"ReorderPoint":0.0,"RestockLevel":0.0,"TareWeight":0.0,"SupplierID":316,"TagAlongItem":0,"TagAlongQuantity":0.0,"ParentItem":0,"ParentQuantity":6.0,"BarcodeFormat":7,"PriceLowerBound":0.0000,"PriceUpperBound":0.0000,"PictureName":"","LastSold":"2012-12-04T00:00:00","ExtendedDescription":"","SubDescription1":"THE HILLMAN GROUP","SubDescription2":"0823646951","SubDescription3":"","UnitOfMeasure":"EA","SubCategoryID":0,"QuantityEntryNotAllowed":false,"PriceMustBeEntered":true,"BlockSalesReason":"","BlockSalesAfterDate":null,"Weight":0.0,"Taxable":true,"DBTimeStamp":"AAAAAON/fP0=","BlockSalesBeforeDate":null,"LastCost":0.0000,"ReplacementCost":0.0000,"WebItem":false,"BlockSalesType":0,"BlockSalesScheduleID":0,"SaleType":0,"SaleScheduleID":0,"Consignment":false,"Inactive":false,"LastCounted":"2007-08-25T00:00:00","DoNotOrder":false,"MSRP":0.0000,"DateCreated":"2001-02-26T00:00:00","Content":"","UsuallyShip":"","NumberFormat":null,"ItemCannotBeRet":null,"ItemCannotBeSold":null,"IsAutogenerated":null,"IsGlobalvoucher":false,"DeleteZeroBalanceEntry":null,"TenderID":0},{"BinLocation":"16A","BuydownPrice":0.0000,"BuydownQuantity":0.0,"CommissionAmount":0.0000,"CommissionMaximum":0.0000,"CommissionMode":0,"CommissionPercentProfit":0.0,"CommissionPercentSale":0.0,"Description":"3 B/G H.D. MYLAR P","FoodStampable":false,"HQID":139861,"ItemNotDiscountable":false,"LastReceived":"2007-06-07T00:00:00","LastUpdated":"2013-01-18T16:24:06","Notes":null,"QuantityCommitted":0.0,"SerialNumberCount":0,"TareWeightPercent":0.0,"ID":4,"ItemLookupCode":"0839430-EA","DepartmentID":8,"CategoryID":614,"MessageID":0,"Price":0.8900,"PriceA":0.0000,"PriceB":0.0000,"PriceC":0.0000,"SalePrice":0.0000,"SaleStartDate":null,"SaleEndDate":null,"QuantityDiscountID":0,"TaxID":1,"ItemType":0,"Cost":0.2282,"Quantity":17.0,"ReorderPoint":0.0,"RestockLevel":0.0,"TareWeight":0.0,"SupplierID":316,"TagAlongItem":0,"TagAlongQuantity":0.0,"ParentItem":0,"ParentQuantity":6.0,"BarcodeFormat":7,"PriceLowerBound":0.0000,"PriceUpperBound":0.0000,"PictureName":"","LastSold":"2010-05-18T00:00:00","ExtendedDescription":"","SubDescription1":"THE HILLMAN GROUP","SubDescription2":"0823646956","SubDescription3":"","UnitOfMeasure":"EA","SubCategoryID":0,"QuantityEntryNotAllowed":false,"PriceMustBeEntered":false,"BlockSalesReason":"","BlockSalesAfterDate":null,"Weight":0.0,"Taxable":true,"DBTimeStamp":"AAAAAOJyynU=","BlockSalesBeforeDate":null,"LastCost":0.0000,"ReplacementCost":0.0000,"WebItem":false,"BlockSalesType":0,"BlockSalesScheduleID":0,"SaleType":0,"SaleScheduleID":0,"Consignment":false,"Inactive":false,"LastCounted":"2007-08-25T00:00:00","DoNotOrder":false,"MSRP":0.0000,"DateCreated":"2001-02-26T00:00:00","Content":"","UsuallyShip":"","NumberFormat":null,"ItemCannotBeRet":null,"ItemCannotBeSold":null,"IsAutogenerated":null,"IsGlobalvoucher":false,"DeleteZeroBalanceEntry":null,"TenderID":0}]
Here is the ajax call when I get the date and try to inject it to the table:
function TestApi(){
$.ajax({
type: "GET",
url: 'http://localhost:49175/api/items',
dataType: "html",
//data: { },
success: function (data) {
console.log(data)
$("#idt tbody tr").each(function (){
$(this).html("<td>'" + data.Description + "'</td><td>'"+ data.Description +"'</td><td>'"+ data.Price +"'</td>")
});
}
});
}
I'm getting the "data" and can see the two rows, but when I loop through I'm getting undefined.
Please help.
$(this).html("<td>'" + data.Description + "'</td><td>'"+ data.Description +"'</td><td>'"+ data.Price +"'</td>")
>>>
$(this).html("<td>" + data.Description + "</td><td>"+ data.Description +"</td><td>"+ data.Price +"</td>")
you dont need ', also why do you use data.Description twice?
>>>
$(this).html("<td>" + data.Description + "</td><td>"+ data.Description +"</td><td>"+ data.Price +"</td>")
you dont need ', also why do you use data.Description twice?
success: function (data) {
console.log(data)
$("#idt tbody tr").each(function (){
$(this).html("<td>'" + data.Description + "'</td><td>'"+ data.Description +"'</td><td>'"+ data.Price +"'</td>")
});
}
here you are looping rows in idt table, and assigning same data!
are you sure you want to do this?
does not make sense to me...
maybe you should do this
success: function (data) {
//console.log(data)
// ??? loop elements in your data, {
$('#idt > tbody:last-child').append("<td>'" + data.Description + "'</td><td>'"+ data.Price +"'</td>");
// }
});
}
ASKER
Hi and thank you for your answer.
Actually to make more sense I will share my dom.
so in order to select the right row i do.
$("#idt tbody tr").each(function (){
$(this).html("<td>'" + data.Description + "'</td><td>'"+ data.Description +"'</td><td>'"+ data.Price +"'</td>")
})
This working and all good. the only issue I have is that I'm getting the data as undefined.
Let's say "data.Description" comes undefined although when I query the "data" I'm getting all data.
so my question is how do I get the properties from the "data" variable.
Thanks.
Actually to make more sense I will share my dom.
<table border=1 id="idt">
<thead>
<tr>
<th>Itemlookupcode</th>
<th>Description</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
</tr>
</tbody>
</table>
so in order to select the right row i do.
$("#idt tbody tr").each(function (){
$(this).html("<td>'" + data.Description + "'</td><td>'"+ data.Description +"'</td><td>'"+ data.Price +"'</td>")
})
This working and all good. the only issue I have is that I'm getting the data as undefined.
Let's say "data.Description" comes undefined although when I query the "data" I'm getting all data.
so my question is how do I get the properties from the "data" variable.
Thanks.
your code loops your table not data!
also, still, why do you repeat data.Description twice?
Itemlookupcode / Description are same?
also, still, why do you repeat data.Description twice?
Itemlookupcode / Description are same?
and your table has only one tr, why you are looping?
what are you trying to do here?
what is data look like?
do you want to loop data and add them into your table? if yes, I gave you the code, but not sure how your data is, thats why I did not add code there
again
what are you trying to do here?
what is data look like?
do you want to loop data and add them into your table? if yes, I gave you the code, but not sure how your data is, thats why I did not add code there
again
success: function (data) {
//console.log(data)
// ??? loop elements in your data, {
$('#idt > tbody:last-child').append("<tr><td>'" + data.Description + "'</td><td>'"+ data.Price +"'</td></tr>");
// }
});
}
ASKER
sorry, I just debugged and did changes and didn't pay attention to the description duplication.
this is basically my code:
$(this).html("<td>'" + data.Itemlookupcode + "'</td><td>'"+ data.Description +"'</td><td>'"+ data.Price +"'</td>")
this is basically my code:
$(this).html("<td>'" + data.Itemlookupcode + "'</td><td>'"+ data.Description +"'</td><td>'"+ data.Price +"'</td>")
ASKER
But still I don't get the data.
ASKER
data variable gives all the rows but still when I do - data.Description I don't get the specific data.
ASKER
I don't get any property. its all come undefined , the weird things here is when the data variable gives the json back just fine, but again when you add the property you get undefined.
thank,
thank,
I keep asking the same thing...
what is your data look like
what are you trying to do when you get the data
your code loops all rows in your table, which is 1, and populates it with data or crashes here since you need to loop data items...
so, if you give answers to these you should do this
what is your data look like
what are you trying to do when you get the data
your code loops all rows in your table, which is 1, and populates it with data or crashes here since you need to loop data items...
so, if you give answers to these you should do this
success: function (data) {
//console.log(data)
// ??? loop elements in your data, {
$('#idt > tbody:last-child').append("<tr><td>'" + data.Itemlookupcode + "'</td><td>'" + data.Description + "'</td><td>'"+ data.Price +"'</td></tr>");
// }
});
}
ok, got it
use this
this.BinLocation
use this
this.BinLocation
success: function (data) {
$(data).each(function (){
$('#idt > tbody:last-child').append("<tr><td>'" + this.Itemlookupcode + "'</td><td>'" + this.Description + "'</td><td>'"+ this.Price +"'</td></tr>");
});
}
ASKER
Here is my data return:
json
json
[{"BinLocation":"16A","BuydownPrice":0.0000,"BuydownQuantity":0.0,"CommissionAmount":0.0000,"CommissionMaximum":0.0000,"CommissionMode":0,"CommissionPercentProfit":0.0,"CommissionPercentSale":0.0,"Description":"3 B/G H.D. MYLAR K","FoodStampable":false,"HQID":139858,"ItemNotDiscountable":false,"LastReceived":"2007-06-07T00:00:00","LastUpdated":"2013-01-18T16:24:06","Notes":null,"QuantityCommitted":0.0,"SerialNumberCount":0,"TareWeightPercent":0.0,"ID":1,"ItemLookupCode":"0839420-EA","DepartmentID":8,"CategoryID":614,"MessageID":0,"Price":0.7900,"PriceA":0.0000,"PriceB":0.0000,"PriceC":0.0000,"SalePrice":0.0000,"SaleStartDate":null,"SaleEndDate":null,"QuantityDiscountID":0,"TaxID":1,"ItemType":0,"Cost":0.2282,"Quantity":27.0,"ReorderPoint":0.0,"RestockLevel":0.0,"TareWeight":0.0,"SupplierID":316,"TagAlongItem":0,"TagAlongQuantity":0.0,"ParentItem":0,"ParentQuantity":6.0,"BarcodeFormat":7,"PriceLowerBound":0.0000,"PriceUpperBound":0.0000,"PictureName":"","LastSold":"2012-12-04T00:00:00","ExtendedDescription":"","SubDescription1":"THE HILLMAN GROUP","SubDescription2":"0823646951","SubDescription3":"","UnitOfMeasure":"EA","SubCategoryID":0,"QuantityEntryNotAllowed":false,"PriceMustBeEntered":true,"BlockSalesReason":"","BlockSalesAfterDate":null,"Weight":0.0,"Taxable":true,"DBTimeStamp":"AAAAAON/fP0=","BlockSalesBeforeDate":null,"LastCost":0.0000,"ReplacementCost":0.0000,"WebItem":false,"BlockSalesType":0,"BlockSalesScheduleID":0,"SaleType":0,"SaleScheduleID":0,"Consignment":false,"Inactive":false,"LastCounted":"2007-08-25T00:00:00","DoNotOrder":false,"MSRP":0.0000,"DateCreated":"2001-02-26T00:00:00","Content":"","UsuallyShip":"","NumberFormat":null,"ItemCannotBeRet":null,"ItemCannotBeSold":null,"IsAutogenerated":null,"IsGlobalvoucher":false,"DeleteZeroBalanceEntry":null,"TenderID":0},{"BinLocation":"16A","BuydownPrice":0.0000,"BuydownQuantity":0.0,"CommissionAmount":0.0000,"CommissionMaximum":0.0000,"CommissionMode":0,"CommissionPercentProfit":0.0,"CommissionPercentSale":0.0,"Description":"3 B/G H.D. MYLAR P","FoodStampable":false,"HQID":139861,"ItemNotDiscountable":false,"LastReceived":"2007-06-07T00:00:00","LastUpdated":"2013-01-18T16:24:06","Notes":null,"QuantityCommitted":0.0,"SerialNumberCount":0,"TareWeightPercent":0.0,"ID":4,"ItemLookupCode":"0839430-EA","DepartmentID":8,"CategoryID":614,"MessageID":0,"Price":0.8900,"PriceA":0.0000,"PriceB":0.0000,"PriceC":0.0000,"SalePrice":0.0000,"SaleStartDate":null,"SaleEndDate":null,"QuantityDiscountID":0,"TaxID":1,"ItemType":0,"Cost":0.2282,"Quantity":17.0,"ReorderPoint":0.0,"RestockLevel":0.0,"TareWeight":0.0,"SupplierID":316,"TagAlongItem":0,"TagAlongQuantity":0.0,"ParentItem":0,"ParentQuantity":6.0,"BarcodeFormat":7,"PriceLowerBound":0.0000,"PriceUpperBound":0.0000,"PictureName":"","LastSold":"2010-05-18T00:00:00","ExtendedDescription":"","SubDescription1":"THE HILLMAN GROUP","SubDescription2":"0823646956","SubDescription3":"","UnitOfMeasure":"EA","SubCategoryID":0,"QuantityEntryNotAllowed":false,"PriceMustBeEntered":false,"BlockSalesReason":"","BlockSalesAfterDate":null,"Weight":0.0,"Taxable":true,"DBTimeStamp":"AAAAAOJyynU=","BlockSalesBeforeDate":null,"LastCost":0.0000,"ReplacementCost":0.0000,"WebItem":false,"BlockSalesType":0,"BlockSalesScheduleID":0,"SaleType":0,"SaleScheduleID":0,"Consignment":false,"Inactive":false,"LastCounted":"2007-08-25T00:00:00","DoNotOrder":false,"MSRP":0.0000,"DateCreated":"2001-02-26T00:00:00","Content":"","UsuallyShip":"","NumberFormat":null,"ItemCannotBeRet":null,"ItemCannotBeSold":null,"IsAutogenerated":null,"IsGlobalvoucher":false,"DeleteZeroBalanceEntry":null,"TenderID":0}]
I know... above code should add 2 rows to your table, but remove trs from your table
see this
https://jsfiddle.net/carm5n02/
I used
html
code
see this
https://jsfiddle.net/carm5n02/
I used
html
<table border=1 id="idt">
<thead>
<tr>
<th>Itemlookupcode</th>
<th>Description</th>
<th>Price</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
code
$(data).each(function() {
$('#idt > tbody:last-child').append("<tr><td>" + this.BinLocation + "</td><td>" + this.Description + "</td><td>" + this.Price + "</td></tr>");
});
ASKER
I see its working for you in the code you sent me and I feel really stupid :) to miss the data into the each method.
Anyways, I'm getting error now.
Here is my code (exactly like you did):
Anyways, I'm getting error now.
Here is my code (exactly like you did):
function TestApi(){
$.ajax({
type: "GET",
url: 'http://localhost:49175/api/items',
dataType: "html",
success: function (data) {
$(data).each(function() {
$('#idt > tbody:last-child').append("<tr><td>" + this.BinLocation + "</td><td>" + this.Description + "</td><td>" + this.Price + "</td></tr>");
});
}
});
}
ASKER
Im getting syntax error here and I don't get why?
jquery.min.js:2 Uncaught Error: Syntax error, unrecognized expression: [{"BinLocation":"16A","Buy downPrice" :0.0000,"B uydownQuan tity":0.0, "Commissio nAmount":0 .0000,"Com missionMax imum":0.00 00,"Commis sionMode": 0,"Commiss ionPercent Profit":0. 0,"Commiss ionPercent Sale":0.0, "Descripti on":
jquery.min.js:2 Uncaught Error: Syntax error, unrecognized expression: [{"BinLocation":"16A","Buy
not sure what ıs data but :) try this...
$(data).each(function()
>>>
$(JSON.stringify(data)).ea ch(functio n()
or somehow try to use
JSON.parse(...)
$(data).each(function()
>>>
$(JSON.stringify(data)).ea
or somehow try to use
JSON.parse(...)
or use
$.each(data, function(index){
$('#idt > tbody:last-child').append("<tr><td>" + this.BinLocation + "</td><td>" + this.Description + "</td><td>" + this.Price + "</td></tr>");
});
ASKER
when I use manually data like u did with fiddle it works but when I do something like this. (like get it from the api)
it gives me syntax error.
I will try your last suggestion right now.
Thank you.
function TestApi(){
$.ajax({
type: "GET",
url: 'http://localhost:49175/api/items',
dataType: "html",
success: function (data) {
$(data).each(function() {
$('#idt > tbody:last-child').append("<tr><td>" + this.BinLocation + "</td><td>" + this.Description + "</td><td>" + this.Price + "</td></tr>");
});
}
});
}
it gives me syntax error.
I will try your last suggestion right now.
Thank you.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
and my last 2 code should work...
ASKER
omg, thank you sooooooooo much.
this is it dataType json makes the different. LOL..
I did it soo many time and I don't know what happened to my mind this night.
Thank you again.
this is it dataType json makes the different. LOL..
I did it soo many time and I don't know what happened to my mind this night.
Thank you again.
ASKER
The fundamental things to know :) return json when you get json, plus use your return data in your loop:) .
what do you see in data?