Javascript循环遍历对象中的对象答案

【问题标题】：Javascript loop through objects in objectsJavascript循环遍历对象中的对象
【发布时间】：2012-06-26 17:40:31
【问题描述】：

我试图从newEntry 对象的每个新实例中仅检索word。每次我添加一个新单词时它都会显示在控制台中，但当我将它分配给.innerHTML 时它不会显示。任何人都可以帮忙吗？

完整代码：

    <style type="text/css" media="screen">
        #output { height: auto;}
    </style>

    <script type="text/javascript">

        // Array to contain words
        var wordList = Array();

        // word list constructor
        function addWord(word) {
            this.word = word;
            this.description = "a description of the word";
            this.entryDate = "01.02.2012";
            this.userName = "John Doe";

            var newEntry = {
                word: word,
                description: description,
                entryDate: entryDate,
                userName: userName 
            };

            wordList[wordList.length] = newEntry;           
        };

        // collect data from form
        function getFormData() {
            var results = document.getElementById("textbox").value;
            addWord(results);

            var data = '<ul>';
            var numObjects = "Number of words = " + wordList.length; 

            for (var x in wordList) {
                var wordSet = wordList[x];
                for (var item in wordSet.word[x]) {
                    console.log(wordSet.word);                   
                    data += "<li><a href='#'>" + wordSet.word + "</a></li>";    

                };
            };
            data += "</ul>";
            document.getElementById("Objects").innerHTML = numObjects;  
            document.getElementById("Output").innerHTML = data;                 
            // console.log(wordList);  

        };

    </script>

</head>

<body>

    <form id="form_id" name="form_name" action="" method="post">
        <p><label for="text">Enter words:<br/></label>
        <input type="textarea" id="textbox" />
        <input type="button" value="Go" onclick="getFormData()"
    </form>

    <ul id="Output"></ul>   
    <div id="Objects"></div>

</body>

【问题讨论】：

标签： javascript object loops

【解决方案1】：

您每次都在覆盖“输出”div 的内容。你可以尝试改变

            document.getElementById("Output").innerHTML = wordSet.word;

到

            document.getElementById("Output").innerHTML += wordSet.word;

然后您应该会看到正确的输出（当然，没有样式或换行符）。

* 进一步更新 *

您正在以一些时髦的方式使用您的数组。您可能只想将数组声明为文字，然后使用 push 方法将条目附加到数组中。对于遍历数组，您可能应该使用标准 for 循环 [例如：for (var i = 0; i

此外，如果您只是要将元素包装在 JSON 中并将它们填充到列表中，那么实际上没有理由将属性分配给“this”。

我建议如下：

       // Array to contain words
        var wordList = [];

        // append word to word list
        function addWord(word) {
            var newEntry = {
                word: word,
                description: "a description of the word",
                entryDate: "01.02.2012",
                userName: "John Doe" 
            };

            wordList.push(newEntry);           
        };

然后在与您的单词列表交互时，您会说：

for (var i = 0; i < wordList.length; ++i) {
    var wordEntry = wordList[i];
...
}

拉拉：

/ collect data from form
            function getFormData() {
                var results = document.getElementById("textbox").value;
                addWord(results);

                var data = '<ul>';

                for (var i = 0; i < wordList.length; ++i) {
                    var wordEntry = wordList[i];
                    // I removed the inner for loop here, as you were iterating over all
                    // the proerties of the word string. This would loop for all the
                    // individual characters, as well as all the methods on the string
                    // (e.g. charAt, indexOf, etc.) It could have been a source of
                    // problems for you, and given the original following line, would 
                    // have shown duplicate entries in the list.

                    data += "<li><a href='#'>" + wordEntry.word + "</a></li>";                     
                };
                data += "</ul>";
                document.getElementById("Output").innerHTML = data;
            };

【讨论】：

谢谢 Gopherkhan。我已经使用+= wordSet.word 修改了脚本以将结果打印为<li> 项目，但它似乎是重复对象内容并添加它们，而不是更新列表。新代码在上面的原始帖子中......
你能举一个你正在使用的数据的例子吗？此外，如果您要将这些显示为列表项，则需要将它们包装在 ul 或 ol 标记中。您最好从结果中构建字符串，然后附加一次。例如，在您的嵌套 for 循环中，您只需构建您的字符串，然后在外部循环下方，您可以将其分配给具有 innerHTML 的 dom。
事实上，我明白你现在在问什么。是的，由于您将使用不同的数据更新此 div 的内容，因此您需要使用我在之前的评论中提到的字符串构建选项。我会更新我的答案。
好吧，也许我说得太早了。我已经更新了我的原始帖子以反映您的建议。在将 4 或 5 添加到 <ul> 之后，显示 word 的结果似乎挂起。通过显示wordList 的长度，我可以看到对象wordList 实际上运行良好。
好的。所以我专注于与 dom 交互的代码。看起来您正在以一些时髦的方式使用数组。它们不应该完全有问题，但它们与标准做法有些不一致。我不太了解 for (var item in wordSet.word[x]) 行...看起来您将单词字符串视为数组？这基本上可以作为一个 charAt 函数工作，让你在 X 的索引处获得一个字符......我会用其他一些技巧进行更新。