CODEWITHSUNDEEP
javascriptarraysfor-loop
Andrew Nguyen
Andrew Nguyen

Reputation: 1436

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

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

enter image description here

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>

Upvotes: 0

Views: 64

Answers (4)

Greg Borbonus
Greg Borbonus

Reputation: 1384

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/

Upvotes: 1

indubitablee
indubitablee

Reputation: 8216

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>

Upvotes: 0

Jake
Jake

Reputation: 165

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)

Upvotes: 0

Shelvacu
Shelvacu

Reputation: 4360

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").

Upvotes: 0

Related Questions