使用for循环从数组中获取数据以填充表

时间：2016-03-17 20:08:10

标签： javascript arrays for-loop

问题

我正在尝试使用for loop迭代一个对象数组，但是不是获取我在console.log(arr[i].Sand)时实际看到的数组中的所有项目，而是获得相同的数字十一次在我的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>

4 个答案:

答案 0 :(得分：1)

当我生成代码来回答这个问题时，有人改变了你的ajax调用。

这是重做的代码所以应该有所帮助。

    $(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);
              } 
            });
        }
    })
});

这是一个展示它的JSFiddle： https://jsfiddle.net/g6vn4Lf6/

答案 1 :(得分：0)

这一行：

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

使用class="sand"查找所有元素，然后将所有元素的内部html设置为sand的值。相反，您需要使用html标记表格的每一行（例如<tr class="year-2015">），然后您可以使用$(".year-2015 .sand")之类的内容选择正确的td元素。

答案 2 :(得分：0)

首先，您应该将json回复中的年份键更改为"year"而不是""

然后你应该以某种方式将那一年与tr相关联，例如 <tr year='2016'>

然后在for循环中，您可以只选择.sand元素，它是正确tr的子元素。 $("tr[year='" + arr[i].year + "'] .sand").html(sand)

答案 3 :(得分：0)

也许您应该为从ajax调用收到的每个结果动态添加一行，如下所示：

$(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>

相关问题
最新问题