jQuery遍历对象数组的麻烦

Question

我正在尝试在“行” div中嵌套3个div。

我以“长格式”（多个var而不是遍历整个数组）工作。 我已经重构了代码，现在没有任何错误代码，并且我的代码没有追加到HTML文件中。 当我控制台日志时，我得到一个包含3个对象的数组。 我确定我错过了一些小事。

无论如何，一些帮助将是巨大的！

 <div class="row">
   **nested divs go here.
 </div>

 $(document).ready(function() {
        $.get("http://api.openweathermap.org/data/2.5/forecast/daily?id4726206&cnt=3", {
            APPID: "MY API KEY",
            lat: 29.423017,
            lon: -98.48527,
            units: "imperial"
        }).done(function(data) {

            var stationId = data.city.name;

            // Stattion Name
            $('#station').append(stationId);

            //console.log(data);
            var forecast = data.list;

            //Wind Direction in Compass Format
            function getDirection(dir) {
                var compass = ['N', 'NNE', 'NE', 'ENE', 'E', 'ESE', 'SE', 'SSE', 'S', 'SSW', 'SW', 'WSW', 'W', 'WNW', 'NW', 'NNW'];
                var result = Math.floor((360 - dir) / 22.5);
                return compass[result];
            }

            //Forecast Variables

            $.each(forecast, function(i, v) {
                var html = '';
                html += "<div class='col-sm-3 wInfo'>" + "<div class='title'>High / Low</div>";
                html += "<div class='cTemp'>" + (Math.ceil(forecast[i].temp.max)) + '&deg;';
                html += " / " + (Math.ceil(forecast[i].temp.min)) + '&deg;' + "</div>";
                html += "<div class='tempIcon'>" + "<img src='http://openweathermap.org/img/w/" + forecast[i].weather[0].icon;
                html += ".png' alt=''></div>" + "<div class='conditions' id='castId'>" + '<span class="cond">' + forecast[i].weather[0].main;
                html += "</span>: " + "<span>" + forecast[i].weather[0].description + '</span>' + "</div>";
                html += "<div class='conditions'>" + "<span class='cond'>Humidity: </span>" + "<span>" + forecast[i].humidity + "&#37;</span></div>";
                html += "<div class='conditions'>" + "<span class='cond'>Wind: </span>" + "<span>" + (Math.floor(forecast[i].speed));
                html += " mph / " + getDirection(forecast[i].deg) + "</span></div>" + "<div class='conditions'>";
                html += "<span class='cond'>Pressure: </span>" + "<span>" + forecast[i].pressure + "</span></div>";
                return html;


            });
            $('.forecast').append(forecast);
            console.log(forecast);

        });

    });

Answer 1

您正在尝试在html中附加数组预测。 这不会工作。 您应该在外部声明html变量，然后在append函数中使用它。

我还将建议使用使用数组的字符串生成器逻辑，然后将其转换为字符串并追加。 请记住，字符串连接是繁重的运算符，因为每次连接完成后，它都会创建elememt的新实例：

var html = [];
$.each(forecast, function(i, v) {
            html.push("<div class='col-sm-3 wInfo'>" + "<div class='title'>High / Low</div>");
            html.push("<div class='cTemp'>" + (Math.ceil(forecast[i].temp.max)) + '&deg;');
            html.push(" / " + (Math.ceil(forecast[i].temp.min)) + '&deg;' + "</div>");
            html.push("<div class='tempIcon'>" + "<img src='http://openweathermap.org/img/w/" + forecast[i].weather[0].icon);
            html.push(".png' alt=''></div>" + "<div class='conditions' id='castId'>" + '<span class="cond">' + forecast[i].weather[0].main);
            html.push("</span>: " + "<span>" + forecast[i].weather[0].description + '</span>' + "</div>");
            html.push("<div class='conditions'>" + "<span class='cond'>Humidity: </span>" + "<span>" + forecast[i].humidity + "&#37;</span></div>");
            html.push("<div class='conditions'>" + "<span class='cond'>Wind: </span>" + "<span>" + (Math.floor(forecast[i].speed)));
            html.push(" mph / " + getDirection(forecast[i].deg) + "</span></div>" + "<div class='conditions'>");
            html.push("<span class='cond'>Pressure: </span>" + "<span>" + forecast[i].pressure + "</span></div></div>");
        });

 $('.forecast').append(html.join(""));