Help/guidance on building arrays from ajax query results

I am building a catalogue filtering menu to restrict the items to be shown. eg, I want to show ‘womens’ as the ‘department’ and then enable a selection of dresses and handbags. I also will enable them to select a sub category for each of those categories, say, cocktail dresses and clutch bags.
The query will ensure that as a category is selected, only those sub categories that are relevant will display in the filtering nav. So, as well as the filter adjusting the main catalogue display, it will also adjust the items available in the nav filter.

My ajax query (for the nav filter), brings back the results I need and I access them in a JS each loop as shown below.
However, in order to put them into the filter nav, grouped by category, sub_category and colour, (those will be the initial sections), I need to put them into an associative array of some sort.

New to JS, I am asking for your help with building the arrays for return to the main script where they will be put into the <div id='filters_nav'></div>

function makeFilter(data)
    {
    var dataset = [];
    
        \$.each(data, function(k, v) 
        {
        var row = "",
        currRecord = this;

            \$.each(this, function(k , v) 
            {

                if ( k === 'category' )
                {
                dataset['product_categories', v ];
                }

                if ( k === 'sub_category' )
                {
                v += v+ ", ";
                dataset[ 'sub_categories', v];
                }

                if ( k === 'colour' )
                {
                // another way?
                }

             
        // loop through dataset and build the html output here??
        })
 
           
    })

    
    
    return dataset;
    }
 

I’d be very appreciative of your assistance.

Bazz

Could you give an example of the input you are receiving and the output you are wishing to return.

Hi Pullo,

The code is now like this:

function makeFilter(data)
    {
    var dataset = "";
    var product_categories = []; 
    var dataset = [];



        \$.each(data, function(k, v) 
        {
        var row='',
        currRecord = this;

              

            if( k === "debug" )
            {
           
                if( debug === true )
                {
                //handleDebug(v);
                }
            return;
            }





            \$.each(this, function(k , v) 
            {

                v= "business_id=" + currRecord['business_id'] + "department=" + currRecord['product_department'] + " & category=" + currRecord['category'] + " & sub_category=" + currRecord['sub_category'] + " & colour=" + currRecord['colour'] + " & size=" + currRecord['size'] + "<br />";

                if ( k === 'product_categories' )
                {
                //dataset[ "product_categories", v ];
                //console.log( k,  v);
                }

                if ( k === 'sub_category' )
                {
                //v += v+ ", ";
                //dataset[ 'sub_categories', v];
                }

                if ( k === 'colour' )
                {
                // another way?;
                //dataset = {  k,  v};
                }
              row += v;
            })
             
            dataset += "<div class='something'>"+row+"</div>";
    })

    
          //console.log(dataset);
    
    return dataset;
    }
 

and the output is like this:

business_id=9779department=Womens &amp; category=jewellery &amp; sub_category= &amp; colour=gold &amp; size=one size
business_id=9779department=Womens &amp; category=jewellery &amp; sub_category= &amp; colour=gold &amp; size=one size
business_id=9779department=Womens &amp; category=jewellery &amp; sub_category= &amp; colour=gold &amp; size=one size
business_id=9779department=Womens &amp; category=jewellery &amp; sub_category= &amp; colour=gold &amp; size=one size
business_id=9779department=Womens &amp; category=jewellery &amp; sub_category= &amp; colour=gold &amp; size=one size
business_id=9779department=Womens &amp; category=jewellery &amp; sub_category= &amp; colour=gold &amp; size=one size
business_id=9779department=Womens &amp; category=jewellery &amp; sub_category= &amp; colour=gold &amp; size=one size
business_id=9779department=Womens &amp; category=jewellery &amp; sub_category= &amp; colour=gold &amp; size=one size

and this is the output I am trying to generate:

<div id="filters_div">
      <h1>womens</h1>
          <div class="tab">
           <input id="tab-zero" type="checkbox" name="tabs" />
           <label for="tab-zero"></label> 
              <div class="tab-content">  
                <p>
                  <input type="checkbox" id="product_department:womens" checked=checked />
                  <label for="product_department:womens">womens</label>
                </p>
              </div>
          </div>
          <div class="tab">
            <input id="tab-one" type="checkbox" name="tabs">
            <label for="tab-one">product category</label>
            <div class="tab-content">  
                  <p>
                    <input type="checkbox" id="product_category:accessories" />
                    <label for="product_category:accessories">accessories <span class='lowercase'></span></label>
                  </p> 
                  <p>
                    <input type="checkbox" id="product_category:clothing" />
                    <label for="product_category:clothing">clothing <span class='lowercase'></span></label>
                  </p> 
                  <p>
                    <input type="checkbox" id="product_category:handbags" />
                    <label for="product_category:handbags">handbags <span class='lowercase'></span></label>
                  </p> 
                  <p>
                    <input type="checkbox" id="product_category:hats" />
                    <label for="product_category:hats">hats <span class='lowercase'></span></label>
                  </p> 
                  <p>
                    <input type="checkbox" id="product_category:jewellery" />
                    <label for="product_category:jewellery">jewellery <span class='lowercase'></span></label>
                  </p> 
                  <p>
                    <input type="checkbox" id="product_category:scarves and gloves" />
                    <label for="product_category:scarves and gloves">scarves and gloves <span class='lowercase'></span></label>
                  </p> 
                  <p>
                    <input type="checkbox" id="product_category:shoes" />
                    <label for="product_category:shoes">shoes <span class='lowercase'></span></label>
                  </p> 
            </div>
          </div>
          <div class="tab">
            <input id="tab-two" type="checkbox" name="tabs">
            <label for="tab-two">sub category</label>
            <div class="tab-content">  
                  <p>
                    <input type="checkbox" id="sub_category:bangles" />
                    <label for="sub_category:bangles">bangles <span class='lowercase'></span></label>
                  </p> 
                  <p>
                    <input type="checkbox" id="sub_category:berry" />
                    <label for="sub_category:berry">berry <span class='lowercase'></span></label>
                  </p> 
                  <p>
                    <input type="checkbox" id="sub_category:boots" />
                    <label for="sub_category:boots">boots <span class='lowercase'></span></label>
                  </p> 
                  <p>
                    <input type="checkbox" id="sub_category:bracelets" />
                    <label for="sub_category:bracelets">bracelets <span class='lowercase'></span></label>
                  </p> 
                  <p>
                    <input type="checkbox" id="sub_category:bridal" />
                    <label for="sub_category:bridal">bridal <span class='lowercase'></span></label>
                  </p> 
                  <p>
                    <input type="checkbox" id="sub_category:brooches" />
                    <label for="sub_category:brooches">brooches <span class='lowercase'></span></label>
                  </p> 
                  <p>
                    <input type="checkbox" id="sub_category:cami" />
                    <label for="sub_category:cami">cami <span class='lowercase'></span></label>
                  </p> 
                  <p>
                    <input type="checkbox" id="sub_category:capes" />
                    <label for="sub_category:capes">capes <span class='lowercase'></span></label>
                  </p> 
                  <p>
                    <input type="checkbox" id="sub_category:cardigan" />
                    <label for="sub_category:cardigan">cardigan <span class='lowercase'></span></label>
                  </p> 
                  <p>
                    <input type="checkbox" id="sub_category:clutch bags" />
                    <label for="sub_category:clutch bags">clutch bags <span class='lowercase'></span></label>
                  </p> 
                  <p>
                    <input type="checkbox" id="sub_category:collars" />
                    <label for="sub_category:collars">collars <span class='lowercase'></span></label>
                  </p> 
                  <p>
                    <input type="checkbox" id="sub_category:day bags" />
                    <label for="sub_category:day bags">day bags <span class='lowercase'></span></label>
                  </p> 
                  <p>
                    <input type="checkbox" id="sub_category:dresses" />
                    <label for="sub_category:dresses">dresses <span class='lowercase'></span></label>
                  </p> 
                  <p>
                    <input type="checkbox" id="sub_category:ear rings" />
                    <label for="sub_category:ear rings">ear rings <span class='lowercase'></span></label>
                  </p> 
                  <p>
                    <input type="checkbox" id="sub_category:evening bags" />
                    <label for="sub_category:evening bags">evening bags <span class='lowercase'></span></label>
                  </p> 
                  <p>
                    <input type="checkbox" id="sub_category:flats" />
                    <label for="sub_category:flats">flats <span class='lowercase'></span></label>
                  </p> 
                  <p>
                    <input type="checkbox" id="sub_category:gillets" />
                    <label for="sub_category:gillets">gillets <span class='lowercase'></span></label>
                  </p> 
                  <p>
                    <input type="checkbox" id="sub_category:gloves" />
                    <label for="sub_category:gloves">gloves <span class='lowercase'></span></label>
                  </p> 
                  <p>
                    <input type="checkbox" id="sub_category:high heels" />
                    <label for="sub_category:high heels">high heels <span class='lowercase'></span></label>
                  </p> 
                  <p>
                    <input type="checkbox" id="sub_category:irregular choice" />
                    <label for="sub_category:irregular choice">irregular choice <span class='lowercase'></span></label>
                  </p> 
                  <p>
                    <input type="checkbox" id="sub_category:jackets" />
                    <label for="sub_category:jackets">jackets <span class='lowercase'></span></label>
                  </p> 
                  <p>
                    <input type="checkbox" id="sub_category:jeans" />
                    <label for="sub_category:jeans">jeans <span class='lowercase'></span></label>
                  </p> 
                  <p>
                    <input type="checkbox" id="sub_category:knitted" />
                    <label for="sub_category:knitted">knitted <span class='lowercase'></span></label>
                  </p> 
                  <p>
                    <input type="checkbox" id="sub_category:low heel" />
                    <label for="sub_category:low heel">low heel <span class='lowercase'></span></label>
                  </p> 
                  <p>
                    <input type="checkbox" id="sub_category:mid heels" />
                    <label for="sub_category:mid heels">mid heels <span class='lowercase'></span></label>
                  </p> 
                  <p>
                    <input type="checkbox" id="sub_category:necklaces" />
                    <label for="sub_category:necklaces">necklaces <span class='lowercase'></span></label>
                  </p> 
                  <p>
                    <input type="checkbox" id="sub_category:occasion bags" />
                    <label for="sub_category:occasion bags">occasion bags <span class='lowercase'></span></label>
                  </p> 
                  <p>
                    <input type="checkbox" id="sub_category:ponchos" />
                    <label for="sub_category:ponchos">ponchos <span class='lowercase'></span></label>
                  </p> 
                  <p>
                    <input type="checkbox" id="sub_category:rings" />
                    <label for="sub_category:rings">rings <span class='lowercase'></span></label>
                  </p> 
                  <p>
                    <input type="checkbox" id="sub_category:scarves" />
                    <label for="sub_category:scarves">scarves <span class='lowercase'></span></label>
                  </p> 
                  <p>
                    <input type="checkbox" id="sub_category:shoe accessories" />
                    <label for="sub_category:shoe accessories">shoe accessories <span class='lowercase'></span></label>
                  </p> 
                  <p>
                    <input type="checkbox" id="sub_category:shoe products" />
                    <label for="sub_category:shoe products">shoe products <span class='lowercase'></span></label>
                  </p> 
                  <p>
                    <input type="checkbox" id="sub_category:small bags" />
                    <label for="sub_category:small bags">small bags <span class='lowercase'></span></label>
                  </p> 
                  <p>
                    <input type="checkbox" id="sub_category:sweaters" />
                    <label for="sub_category:sweaters">sweaters <span class='lowercase'></span></label>
                  </p> 
                  <p>
                    <input type="checkbox" id="sub_category:sweaters with vest tops" />
                    <label for="sub_category:sweaters with vest tops">sweaters with vest tops <span class='lowercase'></span></label>
                  </p> 
                  <p>
                    <input type="checkbox" id="sub_category:t-shirts" />
                    <label for="sub_category:t-shirts">t-shirts <span class='lowercase'></span></label>
                  </p> 
                  <p>
                    <input type="checkbox" id="sub_category:tops" />
                    <label for="sub_category:tops">tops <span class='lowercase'></span></label>
                  </p> 
                  <p>
                    <input type="checkbox" id="sub_category:tops with vest tops" />
                    <label for="sub_category:tops with vest tops">tops with vest tops <span class='lowercase'></span></label>
                  </p> 
                  <p>
                    <input type="checkbox" id="sub_category:trousers" />
                    <label for="sub_category:trousers">trousers <span class='lowercase'></span></label>
                  </p> 
                  <p>
                    <input type="checkbox" id="sub_category:tunic" />
                    <label for="sub_category:tunic">tunic <span class='lowercase'></span></label>
                  </p> 
                  <p>
                    <input type="checkbox" id="sub_category:vests" />
                    <label for="sub_category:vests">vests <span class='lowercase'></span></label>
                  </p> 
                  <p>
                    <input type="checkbox" id="sub_category:watches" />
                    <label for="sub_category:watches">watches <span class='lowercase'></span></label>
                  </p> 
                  <p>
                    <input type="checkbox" id="sub_category:wedges" />
                    <label for="sub_category:wedges">wedges <span class='lowercase'></span></label>
                  </p> 
                  <p>
                    <input type="checkbox" id="sub_category:wraps" />
                    <label for="sub_category:wraps">wraps <span class='lowercase'></span></label>
                  </p> 
            </div>
          </div>
  </div>

However, what I am trying to ensure is that, if a category is selected and a sub category is selected, only the colours and sizes that are available for that cat/subCat selection will display. ALSO, that if a colour is selected, only the Cats/subCats available with those colours will output.

I think I can do that with my query where clause so, I think I need only to get my data into the correct format four outputting.

Bazz

I’m beginning to think that an associative array cannot contain and array.

In perl, which I use most, the associative array would be put together like this:

my %associative_array;
$associative_array{ 'category' }{ 'clothing' }++;
$associative_array{ 'category' }{ 'handbags' }++;

So you can access an array of categories through the key, category.

Does JS work like that?

With JavaScript, ++ on a non-number results in NaN, which means Not a Number.

We can remedy that issue by ensuring that it is a number in the first place.

var associativeArray = {};
associativeArray.category = {};
associativeArray.category.clothing = 0;
associativeArray.category.handbags = 0;
associativeArray.category.clothing++;
associativeArray.category.handbags++;
console.log(associativeArray); // category: [clothing: 1, handbags: 1]

Instead of setting a property to zero, you could instead use a function to help hide some of the details:

function inc(parent, prop) {
  parent[prop] = (parent[prop] || 0) + 1;
}
var associativeArray = {
    category: {}
};
inc(associativeArray.category, "handbags");
inc(associativeArray.category, "clothing");
console.log(associativeArray); // category: [clothing: 1, handbags: 1]

Thank you Paul.

I’m trying to build a dataset that includes the category (handbags, clothing) with the relative sub_category, (‘clutch bags’ , ‘cocktail dresses’, ‘evening dresses’).

Is it the case in JS that an array is a list and an associative array is a list of key/value pairings?

Built like this in Perl

my %temp_hash;
$temp_hash{'clothing'}{'cocktail dresses'}++;
$temp_hash{'clothing'}{'evening dresses'}++;
$temp_hash{'clothing'}{'trousers'}++;
$temp_hash{'handbags'}{'clutch bags'}++; 

Though the output is more important than me just trying to do it in the same way as perl. :wink:

$VAR1 = {
          'handbags' => {
                          'clutch bags' => 1
                        },
          'clothing' => {
                          'cocktail dresses' => 1,
                          'evening dresses' => 1,
                          'trousers' => 1
                        }
        };

I’ve read loads of online stuff but none seems to show me how to build a dataset that I can loop through to output the html type code above.

Bazz

I wonder if I have found something helpful?

Am I starting to move forward with the array product_categories?

My Chrome console is only outputting the data as shown after the code.

function makeFilter(data)
    {
    
    var product_categories = {}; 
    var dataset = [];



        $.each(data, function(k, v) 
        {
        var row='',
        currRecord = this;

              
            $.each(this, function(k , v) 
            {




                v = "business_id=" 
                   + currRecord['business_id'] 
                   + "department=" 
                   + currRecord['product_department'] 
                   + " & category=" 
                   + currRecord['category'] 
                   + " & sub_category=" 
                   + currRecord['sub_category'] 
                   + " & colour=" 
                   + currRecord['colour'] 
                   + " & size=" 
                   + currRecord['size'] 
                   + "<br />";

                var cat= currRecord['category'];
                var subCat = currRecord['sub_category'];
                var col = currRecord['colour'];

                product_categories = [ 
                                            { 
                                               category: "cat", 
                                               sub_category: "subCat",
                                               colour: "col"
                                            }
                                         ]; 

 
                
           
            })
             
            dataset += "<div class='something'>"+product_categories+"</div>";
    })

    
          console.log( dataset );
    
    return dataset;
    }

Loads of outputs which seem unhelpful.

<div class='something'>[object Object]</div><div class='something'>[object Object]</div><div class='something'>[object Object]</div><div class='something'>[object Object]</div><div class='something'>[object Object]</div><div class='something'>[object Object]</div><div class='something'>[object Object]</div><div class='something'>[object Object]</div><div class='something'>[object Object]</div><div class='something'>[object Object]</div><div class='something'>[object Object]</div><div class='something'>[object Object]</div><div class='something'>[object Object]</div><div class='something'>[object Object]</div><div class='something'>[object Object]</div><div class='something'>[object Object]</div><div class='something'>[object Object]</div><div class='something'>[object Object]</div><div class='something'>[object Object]</div><div class='something'>[object Object]</div><div class='something'>[object Object]</div><div class='something'>[object Object]</div><div class='something'>[object Object]</div>

Bazz

Worked further on this and I think I have got it…

function makeFilter(data)
    {
    
    var product_categories = {}; 
    var dataset = [];



        \$.each(data, function(k, v) 
        {
        var row='',
        currRecord = this;

              


            \$.each(this, function(k , v) 
            {



            v = "business_id=" 
              + currRecord['business_id'] 
              + "department=" 
              + currRecord['product_department'] 
              + " & category=" 
              + currRecord['category'] 
              + " & sub_category=" 
              + currRecord['sub_category'] 
              + " & colour=" 
              + currRecord['colour'] 
              + " & size=" 
              + currRecord['size'] 
              + "<br />";

              cat= currRecord['category'];
              subCat = currRecord['sub_category'];
              col = currRecord['colour'];

              product_categories = [ 
                                     { 
                                     category: currRecord['category'], 
                                     sub_category: subCat,
                                     colour: col
                                     }
                                   ]; 

 
               
              dataset += product_categories;
            })
             
            dataset += "<div class='something'>"+product_categories+"</div>";
        })

    
        console.log(  dataset );
    
    return dataset;
    }
 

I was mis-initiating the vars
I was wrongly “quoting” the vars when building the array

I still would like advice on how to access the data within [object Object] in the Chrome console. Doesn’t necessarily need to be Chrome :wink:
Firebug gives this message after running the code above

unreachable code after return statement[Learn More]

Bazz

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.