使用 javascript 显示循环的所有结果？答案

【问题标题】：Showing all the results of a loop with javascript?使用 javascript 显示循环的所有结果？
【发布时间】：2014-11-07 20:02:54
【问题描述】：

我迷路了。我是 javascript/jQuery 的新手。我已经制作了这个循环来遍历 JSON 内容：

  <script type="text/javascript">
   var geturl = "http://couponsforweed.com/?json=get_recent_posts";

            $.ajax({

                type:'GET',
                url:geturl,
                complete: function(){                    
                },
                success: function (data) {

                    var response = data; //JSON.parse(data);

                    // it works!
                    alert("status: " + response.status + "\ncount: " + response.count + "\npages: " + response.pages + "\ncount_total: " + response.count_total + "\nposts: " + response.posts.length);


                    //loop through posts
                    for(var i = 0; i != response.posts.length; i++) {

                        //get each element in the array
                        var post = response.posts[i];


                        // output stuff so we can see things
                        output.innerHTML = i + " post: " + post.custom_fields.schemaState;

                    }


                },
                error:function (xhr, ajaxOptions, thrownError) {                    
                    alert("Error");

                }

            });
  </script>

它有效，我很高兴自己能够让它发挥作用。但这是我的问题：

// output stuff so we can see things
   output.innerHTML = i + " post: " + post.custom_fields.schemaState;

为什么这只会给我循环中的最后一个结果，而不是循环中所有结果的列表？

我明白了：

9 钙

我想看看（循环中的每个结果）：

1 钙 2 钙 3 钙 4 钙 5钴 6瓦 7钴 8 钙 9钙

我习惯了 WordPress 中的 PHP 循环，您可以在其中循环浏览每个帖子的所有字段并获得相应的结果。

【问题讨论】：

您一遍又一遍地将字符串分配给相同的.innerHTML 属性。循环的每次迭代都会取消前一次迭代所做的事情。
感谢您指出这一点。

标签： javascript json wordpress loops

【解决方案1】：

您应该在以下位置附加“+=”而不是“=”：

output.innerHTML = i + " post: " + post.custom_fields.schemaState;

看起来像

output.innerHTML += i + " post: " + post.custom_fields.schemaState;

【讨论】：

【解决方案2】：

您每次都在设置 output.innerHTML，从而有效地删除了先前迭代的结果。而不是：

output.innerHTML = i...

简单地使用：

output.innerHTML += i...

附加到变量而不是设置它。不过，更好的选择是创建一个临时变量。例如，如果您将其命名为 foo：

foo += i...

每次迭代，然后在循环结束时：

output.innerHTML = foo

这将显着提高效率，因为它只在循环结束时更新 DOM 一次。

【讨论】：