javascript - 如何计算重复的数组元素？ (javascript)

Question

我正在尝试使用 JavaScript、XML 和 jQuery 制作一个基于 XML 的菜单。我已成功获取菜单的类别，但无法生成类别中的项目。

我的脚本如下，稍后在本线程中，我询问了对此代码的建议:

var animalsXMLurl = 'http://dl.dropboxusercontent.com/u/27854284/Stuff/Online/XML_animals.xml';
$(function() {
    $.ajax({
        url: animalsXMLurl, // name of file you want to parse
        dataType: "xml",
        success: function parse(xmlResponse) {

            var data = $("item", xmlResponse).map(function() {
                return {
                    id: $("animal_id", this).text(),
                    title: $("animal_title", this).text(),
                    url: $("animal_url", this).text(),
                    category: $("animal_category", this).text().split('/'),
                };
            }).get();
            var first_item = category_gen(data, 0);
            $('ul.w-nav-list.level_2').append(first_item);
            var categnumber = new Array();
            for (i = 1; i <= data.length; i++) //for splitting id, and getting 0 for category_number (1 or 2 or 3...and so on)
            {
                categnumber[i] = data[i].id.split('_');
                console.log(categnumber[i][0]);
                for (j = 1; j <= data.length; j++) //appending via a function.
                {
                    var data_text = category_or_animal(data, categnumber, j);
                    console.log(data_text);
                    $('ul.w-nav-list.level_2').append(data_text);
                }
            }

            function category_or_animal(d, catg, k) {
                var catg1 = new Array();
                var catg2 = new Array();
                var catg1 = d[k].id.split('_');
                if (d[k - 1]) {
                    var catg2 = d[k - 1].id.split('_');
                    //if(d[k-1].id)
                    if (catg1[0] != catg2[0])
                        return category_gen(d, k);
                } else
                    return '</ul>' + animal_gen(d, k);
            }
            function category_gen(d, z) {
                var category_var = '<li class="w-nav-item level_2 has_sublevel"><a class="w-nav-anchor level_2" href="javascript:void(0);"><span class="w-nav-title">' + d[z].category + '</span><span class="w-nav-arrow"></span></a><ul class="w-nav-list level_3">';
                return category_var;
            }

            function animal_gen(d, z) {
                var animal_var = '<li class="w-nav-item level_3"><a class="w-nav-anchor level_3" href="animals/' + d[z].url + '"><span class="w-nav-title">' + d[z].title + '</span><span class="w-nav-arrow"></span></a></li>';
                return animal_var;
            }

        }, error: function() {
            console.log('Error: Animals info xml could not be loaded.');
        }
    });
});

下面是上述代码的 JSFiddle 链接:http://jsfiddle.net/mohitk117/d7XmQ/4/

在上面的代码中，我需要一些修改，我认为代码可能会工作，所以我寻求建议:

这是使用参数调用单独函数来生成上面代码中的菜单的函数:

function category_or_animal(d, catg, k) {
    var catg1 = new Array();
    var catg2 = new Array();
    var catg1 = d[k].id.split('_');
    if (d[k - 1]) {
        var catg2 = d[k - 1].id.split('_');
        //if(d[k-1].id)
        if (catg1[0] != catg2[0])
            return category_gen(d, k);
    } else
        return animal_gen(d, k) + '</ul>';
}

在if(catg1[0] != catg2[0])它检查分割字符串 1_2 或 1_3 是否分别等于 1_1 或 1_2。通过拆分，我的意思是第一个元素:1 ....如果您查看 xml:[ :: Animals XML :: ]，你会看到animal_id的格式为%category_number% _ %item_number% ...所以我需要使用 CATEGORY > ITEM (item=animal name) 创建菜单

现在如果可以的话 return category_gen() + animal() with Animal(){ 在 for 循环中查找所有匹配的类别 ID 号} 那么也许这可以完成!但我没有用于调节 for 循环的计数脚本 (i=0;i<=count();i++) ...

有人知道如何让这个脚本运行吗？

Answer 1

很难判断所提供的 JSFiddle 正在尝试做什么。

这是我最好的尝试。我使用 JQuery 将 XML 解析为类别并生成项目列表。

http://jsfiddle.net/d7XmQ/8/

"use strict";

var animalsXMLurl = 'http://dl.dropboxusercontent.com/u/27854284/Stuff/Online/XML_animals.xml';

$(function () {

    var $menu = $('#menu');

    $.ajax({
        url: animalsXMLurl, // name of file you want to parse
        dataType: "xml",
        success: handleResponse,
        error: function () {
            console.log('Error: Animals info xml could not be loaded.');
        }
    });

    function handleResponse(xmlResponse) {
        var $data = parseResponse(xmlResponse);
        createMenu($data);
    }

    function parseResponse(xmlResponse) {
        return $("item", xmlResponse).map(function () {
            var $this = $(this);
            return {
                id: $this.find("animal_id").text(),
                title: $this.find("animal_title").text(),
                url: $this.find("animal_url").text(),
                category: $this.find("animal_category").text()
            };
        });
    }

    function createMenu($data) {
        var categories = {};
        $data.each(function (i, dataItem) {
            if (typeof categories[dataItem.category] === 'undefined') {
                categories[dataItem.category] = [];
            }
            categories[dataItem.category].push(dataItem);
        });
        $.each(categories, function (category, categoryItems) {
            var categoryItems = categories[category];
            $menu.append($('<h2>').text(category));
            $menu.append(createList(categoryItems));
        });
    }

    function createList(categoryItems) {
        var $list = $('<ul>');
        $.each(categoryItems, function (i, dataItem) {
            $list.append(createItem(dataItem));
        });
        return $list;
    }

    function createItem(dataItem) {
        return $('<li>').text(dataItem.title);
    }
});