Question

我需要一些JavaScript的帮助，我试图在JavaScript的帮助下对XML数据进行排序，并且我成功地进行了排序部分，但输出返回[object Object]，我不想要它打印出来，所以我需要一些帮助来解决这个问题，以便我获得适当的输出。我附上一个活泼的小提琴。所有这些都需要使用JavaScript而不是JQUERY来完成。

我不希望[object Object]，[object Object]作为输出打印。我希望输出格式如下。

Live Fiddle

bookstore 
   |
   |__book 
   |    |_____title
   |    |_____author
   |    |_____year
   |    |_____price
   |
   |__book 
   |
   |__book 
   |
   |__book

function generate(obj){
//  alert((obj[prop])+": "+typeof(obj));
    var ul = document.createElement("ul"),
        li,span;
    for (var prop in obj){
        li = document.createElement("li");
        li.appendChild(document.createTextNode(obj[prop]));
        li.onclick = function(e) {
                e = e || window.event;
                if ((e.target || e.srcElement).tagName !== "LI") return;
                var classNames = this.className;
                if (classNames.indexOf("hidden") == -1) {
                    this.className += "hidden";
                } else {
                    this.className = this.className.replace("hidden", "");
                }
                if (!e)
                    e = window.event;
                    if (e.stopPropagation) {
                      e.stopPropagation();
                    }
                else {
                    e.cancelBubble = true;
                }
            }
        if (typeof obj[prop] == "object" && Objectkeys(obj[prop]).length) {
                li.appendChild(generate(obj[prop]));
            } else {
                li.className += "leaf";
            }
            ul.appendChild(li);
            console.log(ul);
        }
        return ul;
    }

谢谢

Answer 1

将问题分解为更小的问题;

function li(text) { // create a text list item
    var node = document.createElement('li');
    if (text) node.appendChild(document.createTextNode(text));
    return node;
}

function getTextItems(parent, tag) { // get list of text from nodes
    var list = parent.getElementsByTagName(tag),
        arr = [], i;
    for (i = 0; i < list.length; ++i) {
        arr[i] = list[i].textContent;
    }
    return arr;
}

function bookToUl(node) { // parse <book>
    var ul = document.createElement('ul'),
        title = getTextItems(node, 'title')[0],
        year = getTextItems(node, 'year')[0],
        authors = getTextItems(node, 'author'),
        price = getTextItems(node, 'price')[0];
    ul.appendChild(li(title));
    ul.appendChild(li(year));
    ul.appendChild(li(authors.join(', ')));
    ul.appendChild(li('$' + price));
    console.log(ul);
    return ul;
}

function bookstoreToUl(store) { // parse <bookstore>
    var books = store.getElementsByTagName('book'), i,
        ul = document.createElement('ul'), li;
    for (i = 0; i < books.length; ++i) {
        li = document.createElement('li');
        li.appendChild(bookToUl(books[i]));
        ul.appendChild(li);
    }
    return ul;
}

var d = new DOMParser().parseFromString(txt, 'text/xml');
document.body.appendChild(
    bookstoreToUl(
        d.getElementsByTagName('bookstore')[0]
    )
);

DEMO

Answer 2

我认为你的问题是你不了解对象的结构。

如果您在脚本底部添加console.log(parsedObject);，则可以在控制台中看到对象的结构。

例如（控制台输出）：

Object
    children: Array[4]
        0: Object
            children: Array[4]
            name: "book"
            __proto__: Object
        1: Object
        2: Object
        3: Object
        length: 4 // the length of the array
        __proto__: Array[0]
name: "bookstore"
__proto__: Object

正如您在此结构中所看到的，要输出bookstore，您需要使用： obj['name']

但是，如果要输出子项的名称，则需要使用：

obj['children'][prop]['name']代替obj[prop]，

因此，如果你想循环使用孩子，你需要使用：

for(var prop in obj['children']){代替for(var prop in obj){ `

我希望这对你有所帮助。

Answer 3

问题就在这里：

li.appendChild(document.createTextNode(obj[prop]));

您正在创建一个文本节点并为其分配obj[prop]，如果它不是一个字符串，它将被转换为字符串。如果它是一个对象，则对象的字符串转换为[object Object]。

您需要做的是测试obj[prop]是否是您需要迭代的属性的对象，您需要迭代的数组或者您想要显示的节点。

现在，您的代码似乎没有被组织起来，以便可以通过更改几行代码来快速解决问题。您需要采取的主要方法是在树中的下一个节点上调用函数。在该功能的最开始，它需要弄清楚它有什么。它是否有叶节点（只显示它）或它是否有父节点（必须显示父节点然后迭代子节点）。您的代码正在尝试对父项进行字符串化并显示它，并为您提供您所看到的哑对象转换。您必须使代码更智能，以实际检测何时拥有父节点并相应地对其进行处理。

Answer 4

问题

我认为根本问题是迭代对象属性。由于您知道每个对象都包含名称和子数组列表，因此您只想迭代子数组列表。如果迭代对象属性，则最终会得到[object Object]，因为您将向列表追加属性。

解决方案

我抓住了这个，这就是我想出来的。你必须根据自己的需要定制它。我使用forEach函数迭代每个孩子。你也可以写一个更快的循环。

function generate(list) {
    // Initialize variables
    var ul = document.createElement('ul');
    var li = document.createElement('li');

    if (typeof list !== 'undefined') {
      li = document.createElement('li');
      li.appendChild(document.createTextNode(list.name));

      // If children are defined, then for each child,
      // create its list and append it to this list item.
      if (typeof list.children !== 'undefined') {
        list.children.forEach(function(child) {
           li.appendChild(generate(child));
        });
      }
      ul.appendChild(li.cloneNode(true));
    }

    return ul;
};

不希望打印JavaScript [object Object]

Live Fiddle

4 个答案:

问题

解决方案