循環訪問數據

Question

我在處理這個問題時遇到了一些麻煩。

我想在最後動態創建下拉菜單。我目前有這個工作，但我正在做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

Answer 1

一種解決方案是用一個函數來提取所需的數據

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. 

     } 

    }); 

} 

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

當然只會存儲陣列中的名字，但你也可以儲存，也就是說，對象的數組，其中包括所有這些信息。該地圖可以快速查找某個類別中的任何對象，並且只需要遍歷一次數據。