Javascript 循环浏览数据

我在想怎么处理这件事上有点困难

最后，我尝试动态创建下拉列表。我目前正在使用这个功能，但我正在进行4个ajax调用（每个类别1个调用以获取其子类），这是不必要的

我的数据库结构如下：

列：id、名称、位置、类别

行示例数据：

1、蓝色、房间、颜色
2、红色、车库、彩色
3、球、院子、玩具
4、卡车、箱子、玩具
5、洋娃娃、房间、玩具

我要做的是首先找出表中的所有类别，并为它们获取唯一值。我不想两次列出颜色，三次列出玩具，只有一个是颜色，一个是玩具，因为它们都是独一无二的

接下来，我需要再次遍历所有内容，并说这里是每个类别下的所有名称

结果如下所示：

颜色=蓝色，红色
玩具=球、卡车、洋娃娃

function makeDataPointsTest() {

    $.ajax({
        url: "../db_api.php",
        type: 'GET',
        dataType: 'xml',
        cache: false,
        data: {
            sp: "Watson_DataPointsList",
            type: "xml",
            params: {
                category: ''
            }
        },
        error: function(err) {
            alert(err.statusText);
        },
        success: function(data) { //This is the data I am getting back from the database.
                                          // It is returned as an XML object.

            var dataTmp = []; //temporary array
            var dataCats; //var to hold the unique categories

            $(data).find('dataPoints').each(function(i) { //Node of XML is called DataPoints.

            var tmp = $(this).find('category').text(); //In each Node (row) find the category name
                dataTmp.push(tmp); //Push that category name to an array

                });

            dataCats = _.uniq(dataTmp); //using underscore.js I now have each unique category in                                                       //the database



            //Here is where I am stuck
            //I now need to loop through each node again and create an array that contains each of             //the names under each of the categories.

            }

    });

}

结果结构（数据）：

1.
蓝色
房间
颜色
2.
红色
车库
颜色
3.
球
院子
玩具
4.
卡车
盒子
玩具
5.
洋娃娃
房间
玩具

在这一点上，有没有一种简单的方法来执行jquery

这就是我试图动态创建的内容

---

图：

一种解决方案是使用函数提取所需数据

function getUnqVals(data, key){
    var dataTmp = []; //temporary array
    var dataCats; //var to hold the unique categories

    $(data).find('dataPoints').each(function(i) { //Node of XML is called DataPoints.

        var tmp = $(this).find(key).text(); //In each Node (row) find the category name
        dataTmp.push(tmp); //Push that category name to an array

    });

    return _.uniq(dataTmp);

}
function makeDataPointsTest() {

    $.ajax({
        url: "../db_api.php",
        type: 'GET',
        dataType: 'xml',
        cache: false,
        data: {
            sp: "Watson_DataPointsList",
            type: "xml",
            params: {
                category: ''
            }
        },
        error: function(err) {
            alert(err.statusText);
        },
        success: function(data) { //This is the data I am getting back from the database.
            // It is returned as an XML object.

            var dataCats; getUnqVals(data, 'category');//var to hold the unique categories
            var dataNames; getUnqVals(data, 'name');//var to hold the unique categories


            //Here is where I am stuck
            //I now need to loop through each node again and create an array that contains each of             //the names under each of the categories.

        }

    });

}

它有一个问题，通过

数据进行多次迭代

，因此可能需要另一个veriosn

function makeDataPointsTest() {

    $.ajax({
        url: "../db_api.php",
        type: 'GET',
        dataType: 'xml',
        cache: false,
        data: {
            sp: "Watson_DataPointsList",
            type: "xml",
            params: {
                category: ''
            }
        },
        error: function(err) {
            alert(err.statusText);
        },
        success: function(data) { //This is the data I am getting back from the database.
            // It is returned as an XML object.

            var catsTmp = [], namesTmp = [];
            var dataCats, dataNames; //var to hold the unique categories

            $(data).find('dataPoints').each(function(i) { //Node of XML is called DataPoints.
                var $this = $(this);
                catsTmp.push($(this).find('category').text()); //Push that category name to an array
                namesTmp.push($(this).find('name').text()); //Push that category name to an array

            });

            dataCats = _.uniq(dataTmp); //using underscore.js I now have each unique category in                                                       //the database
            dataNames = _.uniq(namesTmp);



            //Here is where I am stuck
            //I now need to loop through each node again and create an array that contains each of             //the names under each of the categories.

        }

    });

}

---

您是否考虑过只遍历一次数据并将数据放入地图中？键是类别名称，值是在该类别中找到的项目数组

例如：

var categoryMap = {};

$(data).find('dataPoints').each(function(i) {
        var category = $(this).find('category').text();
        var name = $(this).find('name').text();

        // If first time seeing category, create an empty array.
        if (!categoryMap[category]) 
            categoryMap[category] = [];

        // If it isn't already found in the array, add it.
        if (!categoryMap[category].indexOf(name) != -1)
            categoryMap[category].push(name);
});

---

这当然只会将名称存储在数组中，但也可以存储（比如）包含所有这些信息的对象数组。地图允许快速查找类别中的任何对象，您只需遍历数据一次。

如何将这些值配对？我基本上是在构建多个下拉菜单。每个类别都有自己的菜单，然后绑定到该类别的每个记录都有自己的选项。所以我需要这样构建：`+NAME++NAME++NAME++NAME+`如果需要，我如何能够访问行中的所有col？我正在建立一个下拉菜单，需要能够访问多个字段，这样做。它将动态创建多个下拉列表，为找到的每个唯一类别创建一个下拉列表。如果有意义，则该类别中的所有行都将成为该下拉列表中的选项。我建议创建一个对象，封装每行的数据，然后将其存储到地图中的数组中。然后，对于每个类别，您可以获取在该类别中找到的对象数组，并使用该信息生成选择标记

var categoryMap = {};

$(data).find('dataPoints').each(function(i) {
        var category = $(this).find('category').text();
        var name = $(this).find('name').text();

        // If first time seeing category, create an empty array.
        if (!categoryMap[category]) 
            categoryMap[category] = [];

        // If it isn't already found in the array, add it.
        if (!categoryMap[category].indexOf(name) != -1)
            categoryMap[category].push(name);
});