Grabbing data from an array using for loop to populate a table

Question

Problem

I'm trying to iterate over an array of objects using a for loop, but instead of getting all the items in the array that I actually see when I console.log(arr[i].Sand) I get the same number eleven times in my HTML.

script.js

$(function(){

    $.ajax({
        url: "https://sheetsu.com/apis/fef35fba",
        method: "GET",
        dataType: "json",
    }).then(function(spreadsheet){

        // Array of objects
        var arr = spreadsheet.result;

        for (i = 1; i < arr.length; i++) {
            console.log(arr[i].Sand); // Just the volume of sand in tonnes

            var sand = arr[i].Sand // Volume of Sand in tonnes
            var salt = arr[i].Salt // Volume of Salt in tonnes
            var snow = arr[i].Snow // Snow Removal total in dollars

            // Changes the numbers in the table
            $(".sand").html(sand);
        }
    })
});

spreadsheet.result

index.html

<table>
    <thead>
        <tr>
            <th class="year"></th>
            <th>
                <img src="img/sand-2.png" alt="" class="icons">
                <p>Volume of Sand</p>
                <p class="paren">(in tonnes)</p>
            </th>

            <th>
                <img src="img/salt-3.png" alt="" class="icons">
                <p>Volume of Salt</p>
                <p class="paren">(in tonnes)</p>
            </th>

            <th>
                <img src="img/snow-3.png" alt="" class="icons">
                <p>Snow Removal</p>
                <p class="paren">(total in dollars)</p>
            </th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td class="year">2016</th>
            <td class="sand">-<span class="asterisk">*</span></td>
            <td class="salt">-<span class="asterisk">*</span></td>
            <td class="snow">-<span class="asterisk">*</span></td>
        </tr>

        <tr>
            <td class="year">2015</th>
            <td class="sand">-</td>
            <td class="salt">-</td>
            <td class="snow">-</td>
        </tr>

        <tr>
            <td class="year">2014</th>
            <td class="sand">-</td>
            <td class="salt">-</td>
            <td class="snow">-</td>
        </tr>

        <tr>
            <td class="year">2013</th>
            <td class="sand">-</td>
            <td class="salt">-</td>
            <td class="snow">-</td>
        </tr>

        <tr>
            <td class="year">2012</th>
            <td class="sand">-</td>
            <td class="salt">-</td>
            <td class="snow">-</td>
        </tr>

        <tr>
            <td class="year">2011</th>
            <td class="sand">-</td>
            <td class="salt">-</td>
            <td class="snow">-</td>
        </tr>

        <tr>
            <td class="year">2010</th>
            <td class="sand">-</td>
            <td class="salt">-</td>
            <td class="snow">-</td>
        </tr>

        <tr>
            <td class="year">2009</th>
            <td class="sand">-</td>
            <td class="salt">-</td>
            <td class="snow">-</td>
        </tr>

        <tr>
            <td class="year">2008</th>
            <td class="sand">-</td>
            <td class="salt">-</td>
            <td class="snow">-</td>
        </tr>

        <tr>
            <td class="year">2007</th>
            <td class="sand">-</td>
            <td class="salt">-</td>
            <td class="snow">-</td>
        </tr>

        <tr class="last">
            <td class="year">2006</th>
            <td class="sand">-</td>
            <td class="salt">-</td>
            <td class="snow">-</td>
        </tr>
    </tbody>
</table>

Well, the line you describe as "Changes the numbers in the table" doesn't really do that. It's sets the html contents of the set of elements in the jquery object, but that's just to make it more technically correct. So assuming it "changes the numbers in the table", do you see why you get the same value everywhere? — Amit
– Amit, Commented Mar 17, 2016 at 21:26

Greg Borbonus · Accepted Answer · 2016-03-17 20:58:28Z

1

while I was generating the code to answer this, someone changed your ajax call.

Here's the code reworked so it should help.

    $(function(){

    $.ajax({
        url: "https://sheetsu.com/apis/fef35fba",
        method: "GET",
        dataType: "json",
    }).then(function(spreadsheet){

        // Array of objects
        var arr = spreadsheet.result;

        for (i =0; i < arr.length; i++) {
            console.log(arr[i].Sand); // Just the volume of sand in tonnes

             sand = arr[i].Sand // Volume of Sand in tonnes
             salt = arr[i].Salt // Volume of Salt in tonnes
             snow = arr[i].Snow // Snow Removal total in dollars
             year = arr[i].Year; //We need the year to find the right row

            // Changes the numbers in the table
            $("tr").each(function(){
                //We need to find the correct TR object.
     //Remove Any spacing outside the html to make sure we don't get anything extra. 
     // We need to locate the ROW that has the right year so we can populate ONLY it's columns. an id or class based off year would have made this easier and less resource expensive.

              if($(this).find(".year").html().trim() == year){ 

                $(this).find(".sand").html(sand);
                $(this).find(".salt").html(salt);
                $(this).find(".snow").html(snow);
              } 
            });
        }
    })
});

Here is a JSFiddle to show it: https://jsfiddle.net/g6vn4Lf6/

edited Mar 17, 2016 at 20:58

answered Mar 17, 2016 at 20:42

Greg Borbonus

1,3848 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Andrew Nguyen Over a year ago

Works like a charm, can you elaborate on what's happening a bit more in your if statement, especially with the use of trim. Thanks!

Greg Borbonus Over a year ago

Hope that helps, I've added a few notes. If you need more, let me know.

Andrew Nguyen Over a year ago

Lovely that explains a lot

Shelvacu · Accepted Answer · 2016-03-17 20:17:15Z

0

This line:

$(".sand").html(sand);

Finds all elements with class="sand" and then sets the inner html of all of them to the value of sand. Instead you need to label each row of the table with html (eg <tr class="year-2015">), then you can select the right td element by using something like $(".year-2015 .sand").

answered Mar 17, 2016 at 20:17

Shelvacu

4,42028 silver badges47 bronze badges

2 Comments

Andrew Nguyen Over a year ago

That does make sense, but is there a more efficient way? I'd like you to expand with a code sample.

Shelvacu Over a year ago

There are more efficient ways, but it doesn't seem like you should be worrying about effieciency. You're biggest slowdown here is going to be the ajax request, its not going to be finding elements and setting their contents, which is nearly instantaneos either way.

Jake · Accepted Answer · 2016-03-17 20:33:47Z

0

First, you should change the key of the year in your json response to "year" instead of ""

Then you should associate that year with the tr's in some way, such as <tr year='2016'>

Then in your for loop you can select just the .sand element that is a child of the correct tr. $("tr[year='" + arr[i].year + "'] .sand").html(sand)

answered Mar 17, 2016 at 20:33

Jake

1658 bronze badges

Comments

indubitablee · Accepted Answer · 2016-03-17 20:39:49Z

perhaps you should dynamically add a row for each of the results you receive from your ajax call like shown below:

$(document).ready(function() {
  var arrayResults = [
    { Year: '2016', Sand: '123', Salt: '234', Snow: '345' },
    { Year: '2015', Sand: '222', Salt: '333', Snow: '444' },
    { Year: '2014', Sand: '555', Salt: '111', Snow: '888' },
    { Year: '2013', Sand: '121', Salt: '232', Snow: '343' },
    { Year: '2012', Sand: '454', Salt: '565', Snow: '676' }
  ];

  for(var i = 0; i < arrayResults.length; i++) {
    var newRow = '<tr>';
    newRow += '<td class="year">' + arrayResults[i].Year + '</td>';
    newRow += '<td class="sand">' + arrayResults[i].Sand + '</td>';
    newRow += '<td class="salt">' + arrayResults[i].Salt + '</td>';
    newRow += '<td class="snow">' + arrayResults[i].Snow + '</td>';
    newRow += '</tr>';
    
    $('tbody').append(newRow);
  }
});

th, td {
  border: 1px solid black;
  padding: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <thead>
    <tr><th>year</th><th>sand</th><th>salt</th><th>snow</th></tr>
  </thead>
  <tbody>
  </tbody>
</table>

Collectives™ on Stack Overflow

Grabbing data from an array using for loop to populate a table

script.js

spreadsheet.result

index.html

4 Answers 4

3 Comments

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

script.js

spreadsheet.result

index.html

4 Answers 4

3 Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related