0

我在弄清楚如何解决这个问题时遇到了一些麻烦。

我最终试图动态创建下拉菜单。我目前有这个工作，但我正在进行 4 次 ajax 调用（每个类别 1 次以获取其子级），这是不必要的。

我的数据库结构是这样的：

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

行样本数据：

1, 蓝色, 房间, 颜色
2, 红, 车库, 颜色
3, 球, 码, 玩具
4, 卡车, 框, 玩具
5, 娃娃, 房间, 玩具

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

接下来，我需要再次遍历所有内容，并说Here are all the names under each category。

结果看起来像：

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

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.

            }

    });

}

结果结构（数据）：

<root>
  <dataPoints>
    <id>1</id>
    <name>Blue</name>
    <location>Room</location>
    <category>Color</category>
  </dataPoints>
  <dataPoints>
    <id>2</id>
    <name>Red</name>
    <location>Garage</location>
    <category>Color</category>
  </dataPoints>
  <dataPoints>
    <id>3</id>
    <name>Ball</name>
    <location>Yard</location>
    <category>Toy</category>
  </dataPoints>
  <dataPoints>
    <id>4</id>
    <name>Truck</name>
    <location>Box</location>
    <category>Toy</category>
  </dataPoints>
  <dataPoints>
    <id>5</id>
    <name>Doll</name>
    <location>Room</location>
    <category>Toy</category>
  </dataPoints>
</root>

此时有没有一种简单的方法来做这个jquery？

这就是我试图动态创建的

图片：http: //i.stack.imgur.com/3Emec.png

4

2 回答 2

2

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

例如：

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);
});

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

于 2013-07-29T04:55:05.147 回答
0

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

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.

        }

    });

}

它有一个问题，通过 多次迭代data，所以另一个版本可能是

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.

        }

    });

}
于 2013-07-29T04:47:40.250 回答