Looping through data

Question

I'm having a little bit of trouble figuring out how to go about this.

I am trying to dynamically create drop downs in the end. I currently have this working but I am making 4 ajax calls (1 for each category to get its children) which is unnecessary.

My database structure is like so:

Columns: id, name, location, category

Rows sample data:

1, blue, room, color
2, red, garage, color
3, ball, yard, toy
4, truck, box, toy
5, doll, room, toy

What I am trying to do is first find out all the categories in my table and get a unique value for them. I dont want color listed twice and toy listed 3 times, just 1 for color and 1 for toy as they are both unique.

Next, I need to loop through everything again and say Here are all the names under each category.

Result would look like:

Color = Blue, Red
Toy = Ball, Truck, Doll

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.

            }

    });

}

Results structure (data):

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

Is there an easy way to go about doing this jquery at this point?

This is what I am trying to create dynamically

Image: https://i.sstatic.net/3Emec.png

Answer 1

Have you thought about just traversing your data once and placing the data into a map? The keys would be the category names, and the values would be an array of items found in that category.

For example:

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

This of course would only store the names within the arrays, but you can also store, say, an array of Objects that includes all this information. The map would allow quick lookup for any object within a category, and you'd only have to traverse your data once.

Answer 2

One solution is to use a function to extract the required data

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.

        }

    });

}

It has a problem with, multiple iterations through the data, so another veriosn could be

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.

        }

    });

}