循环数据

时间:2013-07-29 04:30:16

标签: javascript jquery ajax

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

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

我的数据库结构如下:

列:ID,名称,位置,类别

行样本数据:

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

我要做的是首先找出我表格中的所有类别,并为它们获得一个独特的价值。我不希望颜色列出两次,玩具列出3次,只有1种颜色和1种玩具,因为它们都是独一无二的。

接下来,我需要再次遍历所有内容并说出以下是每个类别下的所有名称。

结果如下:

颜色=蓝色,红色
玩具=球,卡车,娃娃

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

2 个答案:

答案 0 :(得分: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);
});

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

答案 1 :(得分: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的多次迭代有问题,所以另一个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.

        }

    });

}