Jquery keeps returning NaN

Question

I have a function which keeps returning NaN. I've searched the forum and tried everything that I found but obviously I'm doing something wrong seeing my (probably) weird code :)

My code:

  function bakVormTotals(targetClass){
  $.getJSON('http://shop.com/cart/?format=json', function(data){
  var totaal = 0;

 $('.grandTotal').each(function(){ ////////////
 var item = $(this);               // FOUND THIS ON FORUM
 totaal+= parseInt(item.val());    ///////////
 })
 $.each(data.cart.totals, function(index, totals){
 $('<strong/>').html('€' + (+totals.grand_total).toFixed(2)).appendTo(targetClass); //  the grand total price
 });
 });
 }

The json looks like this: "totals":{"sub_total":"335.29","taxes":[{"percentage":"0.1900","amount":63.71}],"grand_total":"399.00"}} If that may help.

Any help is greatly appreciated

UPDATE 1

Ok I've found some new interesting stuff. I changed the function above to:

  function bakVormTotals(targetClass){

  $.getJSON('http://shop.com/cart/?format=json', function(data){

  $.each(data.cart, function(index, totals){
  $('<strong/>').html('€' + totals.grand_total + '').appendTo(targetClass); // the grand total price
  });
  });
  }

Now the script returns: €undefined€undefined€undefined€undefined€undefined€undefined€undefined€undefined€1197.00

Obviously I'm in the right direction since €1197.00 is the correct value. The "undefined" stuff is probably due to the html part?? Can some body help me changing the $('') part to something like "total" so I can leave the HTML part out?

`console.log(item.val());` and see what value is there. PS: *sometimes* it makes a bit of sense to understand what you copy-paste from "forums" — zerkms, May 31 '12 at 22:36
Yo, do this: http://www.w3schools.com/jsref/jsref_isnan.asp ; isNan check if not a number see whats going on or paste your HTML and i might make a demo for you man! hope this gives you enough lead! — Tats_innit, May 31 '12 at 22:41
where are you getting the NaN? is it at the `€NaN` which you're appending? or is it the value of `totaal`? — OACDesigns, Jun 01 '12 at 02:20
@Tats_innit: Tried this and returns: false, false, false, false, true, true — Meules, Jun 01 '12 at 21:44
@zerkms: Did something wrong with the console log. Now console log returns "item is not defined". Could for eg var item = data.totals; work? — Meules, Jun 01 '12 at 22:01
@Jaap Vermoolen: if `console.log` returns exact string "item is not defined" - then it means that the variable contains such string — zerkms, Jun 01 '12 at 23:09
@zerkms: do you have any suggestions what to do then right now. As told I have limited jquery and json skills. I'm willing to learn so some directions are more then welcome ;) Thanks anyway — Meules, Jun 01 '12 at 23:58
you're getting the can you give us the `€undefined` as you are trying to access a variable that doens't exist in the JSON object. Can you post the JSON string that you're getting from the server? that way we can look at the structure and help you query the object properly — OACDesigns, Jun 06 '12 at 10:43

score 0 · Answer 1 · answered May 31 '12 at 22:42

0

$('.grandTotal').each(function(){
  var item = $(this);               // FOUND THIS ON FORUM
  totaal+= parseInt(item.val()); 
  ...

In this part, you loop through a set of DOM elements. Depending on these elements, they probably do not have a function val(), so item.val() is not a number but rather undefined.

answered May 31 '12 at 22:42

Paul

8,974
3
28
48

I think `totaal` might be a misspelling contributing to the issue as well. – asawyer May 31 '12 at 22:43
That's just Dutch for 'total'. ;) – Paul May 31 '12 at 22:44
Ahh ok. It doesn't appear to be used anything though. – asawyer May 31 '12 at 22:45
@asawyer: Probably this is true. Have you any suggestion how to fix this, or maybe suggestions what would be better in this situation? – Meules Jun 01 '12 at 21:55
How do the HTML elements with class .grandTotal look like? – Paul Jun 02 '12 at 14:55
@Paul: just plain HTML. Do you have any suggestions to call the "grand_total" object from the JSON string? I really can't see why this doesn't work. I have another function which calls a value exact the same way and it works without problems. This is the other function: http://stackoverflow.com/questions/10778562/json-show-only-object-with-a-specific-id – Meules Jun 02 '12 at 20:32
I think you mix up some things. `$('.grandTotal')` refers to a HTML element with that class, e.g. ``. Whereas `totals.grand_total` refers to the JSON object. In your question you are not showing how the HTML looks like neither how you get the 1197 value. It's hard to help you without being able to reconstruct the situation. – Paul Jun 03 '12 at 07:53

score 0 · Answer 2 · answered May 31 '12 at 22:44

0

I think lucuma is right, you need to parse to float doing parseFloat($item.val())

answered May 31 '12 at 22:44

KoU_warch

2,160
1
25
46

Tried this and it returns nothing. A blank field. Oow sorry it returns €NaN €NaN €NaN – Meules Jun 01 '12 at 21:47

score 0 · Answer 3 · answered Jun 01 '12 at 02:37

If you call parseInt() on an empty string or undefined variable, you will get a NaN error. I suspect this is what is happening.

Do the following check to avoid these situations:

if(!isNaN(parseInt(item.val())))
{
    totaal+= parseInt(item.val());
}

Also, just to make sure you're aware, using parseInt() will drop the decimal places. using parseFloat() will retain them.

Jquery keeps returning NaN

3 Answers3