데이터 루핑

Question

나는이 문제를 해결하는 방법을 알아 내는데 어려움을 겪고 있습니다.

결국 드롭 다운을 동적으로 만들려고합니다. 나는 현재이 작업을하고 있지만 불필요한 4 개의 아약스 호출 (각 카테고리 당 1 개의 자식을 가져 오기 위해)을 만들고 있습니다.

열 : ID, 이름, 위치, 카테고리

행 샘플 데이터 :

1, 파란색, 룸, 색
2, 빨강, 차고

내 데이터베이스 구조는 매우 비슷 색상
3, 공, 마당, 장난감
4, 트럭, 상자, 장난감
5, 인형, 방, 장난감

내가하려는 것은 먼저 내 테이블의 모든 범주를 찾아 고유 한 가치를 얻는 것입니다. 색상이 두 번 나열되어 있고 장난감이 3 번 나열되지 않으려 고합니다. 색상은 1 개, 장난감은 1 개로 모두 고유합니다.

다음으로 나는 모든 것을 다시 반복해야하고 다음은 각 카테고리 아래에있는 모든 이름입니다.

<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> 

가 거기인가 : 레드

색상 = 블루,
장난감 = 공, 트럭, 인형

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. 

      } 

    }); 

} 

결과 구조 (데이터) : 같은

결과가 보일 것이다 이 시점에서이 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); 
}); 

이, 그러나 당신은 또한 상점, 말, Object의 배열이 모든 정보를 포함 할 수 있습니다. 지도를 사용하면 카테고리 내의 모든 객체를 빠르게 검색 할 수 있으며 데이터를 한 번만 탐색하면됩니다.