jquery returns [object Object]

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.

Answers


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)


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

Need Your Help

Neo4j CSV Load: How to avoid Null and escape characters

csv graph neo4j graph-databases

I am trying to load large volume of data into graph using CSV Load script (xyx.cpl) and Neo4jShell.

Command line option 'r' [from -r‘] is not known

linux ubuntu cuda kernel ubuntu-12.04

I am trying to install CUDA. The tutorial is here. When I am trying to install the required headers, I get an error.