jquery returns [object Object]

Question

I have a little question about an issue I'm dealing with quite a long time now: I have an HTML which displays a list of items, stored in h2db. These items show up correctly.

<tr th:each="item : ${list}">
  <td th:text="${item.getActualcost()}" id="actualcost">Actual Cost</td>
</tr>

I now would like to add another column to this list, showing a progress bar.

I added this code to the HTML-part:

<div class="container">
  <div class="col-md-4">
    <div class="progress">
          <div id="progressPlaceholder"></div>
    </div>

The script-part looks like this:

<script>
    var rank=$('actualcost'),place=4;
    var progress = '<div class="progress-bar" role="progressbar" aria-valuenow="'+rank+'" aria-valuemin="0" aria-valuemax="100" style="width: '+rank+'%;"><span class="show" id="totalUsers">Ranked '+place+' of '+rank+'</span></div>';
    $('#progressPlaceholder').empty().append(progress);
</script>

The problem is, that the progress bar is not beinge filled out correctly. So I tried to find out what value it gets by adding '+rank+'. Unforntunately I get only [object Object] printed out. Can someone help me please with that problem? The value should be an int.

Answer 1

Rank is an object for you.

console.log(rank) 

should give you the object, then use the appropriate key. It could look like:

rank['value']//just an example

Answer 2

When you get a an element with jQuery, you get a jQuery collection, which again is an object.

var rank = $('actualcost')

Note that the above would assume you have an element looking like <actualcost></actualcost> , that you probably don't have.

Even if the element isn't found, just calling $() returns an object.

An objects string representation is always [object Object] .

When you concatenate an object and a string, you get the objects string representation, which is ... wait for it ... always [object Object]

var str = 'something something' + $('actualcost');

// str === 'something something[object Object]'

This is exactly what happens in your code

var rank=$('actualcost'),place=4;
var progress = '<div class="progress-bar" role="progressbar" aria-valuenow="'+rank+' ....

You probably wanted

var rank = $('#actualcost').text() ,place=4;

depending on what the HTML actually looks like (I don't know Thymeleaf)