Link to home
Start Free TrialLog in
Avatar of Moti Mashiah
Moti MashiahFlag for Canada

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:
[{"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}]

Open in new window


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>")
                    });
                }
            });
}

Open in new window


I'm getting the "data" and can see the two rows, but when I loop through I'm getting undefined.
Please help.
Avatar of HainKurt
HainKurt
Flag of Canada image

I'm getting the "data" and can see the two rows

what do you see in data?
$(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?
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>")
                    });
                }

Open in new window


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>");
  // }
  });
}

Open in new window

Avatar of Moti Mashiah

ASKER

Hi and thank you for your answer.

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>

Open in new window


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?
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
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>");
  // }
  });
}

Open in new window

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>")
But still I don't get the data.
data variable gives all the rows but still when I do - data.Description I don't get the specific data.
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,
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

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>");
  // }
  });
}

Open in new window

ok, got it
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>");
  });
}

Open in new window

Here is my data return:
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}]

Open in new window

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
<table border=1 id="idt">
  <thead>
    <tr>
      <th>Itemlookupcode</th>
      <th>Description</th>
      <th>Price</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>

Open in new window


code
$(data).each(function() {
  $('#idt > tbody:last-child').append("<tr><td>" + this.BinLocation + "</td><td>" + this.Description + "</td><td>" + this.Price + "</td></tr>");
});

Open in new window

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):
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>");
                        });
                       }
                      });
                 }

Open in new window

Im getting syntax error here and I don't get why?

jquery.min.js:2 Uncaught Error: Syntax error, unrecognized expression: [{"BinLocation":"16A","BuydownPrice":0.0000,"BuydownQuantity":0.0,"CommissionAmount":0.0000,"CommissionMaximum":0.0000,"CommissionMode":0,"CommissionPercentProfit":0.0,"CommissionPercentSale":0.0,"Description":
not sure what ıs data but :) try this...

$(data).each(function()

>>>

$(JSON.stringify(data)).each(function()

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>");
});

Open in new window

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)
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>");
                    });
                    }
                   });
                 }

Open in new window


it gives me syntax error.

I will try your last suggestion right now.
Thank you.
ASKER CERTIFIED SOLUTION
Avatar of HainKurt
HainKurt
Flag of Canada image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
and my last 2 code should work...
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.
The fundamental things to know :) return json when you get json, plus use your return data in your loop:) .