up vote 0 down vote favorite

I have a set of data that is not normalized. I do the normalization in PHP it it works just fine.

The dataset looks like this (screenshot bellow), it is a lot larger tho. I am only interested in orginizing the category and the type. With those two orginized I can make good tables and menu's.

Problem

Now the problem is, I am switching to an AJAX system, and the data no longer comes into PHP. Instead it comes directly into the page using node.js/mongodb. Is there a way I can do something like this:

<script type="text/javascript">

// Array containing all the objects from the server
// looks like this
var data = [Object, Object, Object];
var artikelen = [];

for(var i=0; i<data.length; i++){
  artikelen[data[i].categorie][data[i].type][] = data[i];
}

</script>

// ----------------
OLD SITUATION
//-----------------

In PHP I did this:

$sql = "SELECT *
        FROM mydb
        WHERE merk = 'webecos'
        ORDER BY categorie, type, code";

$result = $wpdb->get_results( $sql );

foreach($result as $row){
    $artikelen[$row->categorie][$row->type][] = $row;
}

Now I can make good sorted tables / menu with nested loops. The code I used is this.

<ul id="inkoop_menu">
    <?php foreach ( $artikelen as $categorie => $row ): ?>
    <li>
        <a class="inkoop_button" data-menu="categorie" href="#">
            <?=$categorie; ?>
        </a>
        <ul>
            <?php foreach ( $row as $type => $artikel ): ?>
            <li>
                <a class="inkoop_button" data-menu="type" href="#">
                    <?=$type; ?>
                </a>
            </li>
            <?php endforeach; ?>
        </ul>
    </li>
    <?php endforeach; ?>
</ul>

Edit

Maybe this is a but better to understand. The array I am after looks like this:

array['categorie-name']['type-name'][x] = whole object;

enter image description here

share|improve this question
JavaScript does not have a push operator like PHP’s []=, you need to use push instead. – Gumbo Mar 12 '12 at 20:07
feedback

2 Answers

up vote 1 down vote accepted

I'm not really sure I totally follow you, but do you mean something like this?

var data = [Object, Object, Object];
var artikelen = [];

for(var i=0; i<data.length; i++){

    if( !artikelen[data[i].category])
        artikelen[data[i].category] = new Array();

    if( !artikelen[data[i].category][data[i].type] )
        artikelen[data[i].category][data[i].type] = new Array();

    artikelen[data[i].category][data[i].type].push(data[i]);
}

More complete example: (also note I put category instead of categorie, change if needed).

<script language="javascript" type="text/javascript">

var obj1 = new Object();
obj1.category = 1;
obj1.type = 2;
obj1.id = 1;

var obj2 = new Object();
obj2.category = 1;
obj2.type = 2;
obj2.id = 2;

var obj3 = new Object();
obj3.category = 2;
obj3.type = 4;
obj3.id = 3;


// Array containing all the objects from the server
// looks like this
var data = [obj1, obj2, obj3];
var artikelen = [];

for(var i=0; i<data.length; i++){

    if( !artikelen[data[i].category])
        artikelen[data[i].category] = new Array();

    if( !artikelen[data[i].category][data[i].type] )
        artikelen[data[i].category][data[i].type] = new Array();

    artikelen[data[i].category][data[i].type].push(data[i]);
}

alert( artikelen[1][2] ); // expected [object], [object]

alert( artikelen[1][2][0].type ); // expected 2

</script>

Key things to take away from this approach:

  • Check if array at key exists
  • If not, create it
  • .push can be used on a javascript array to add an item to an array

Using a string as a type for an object:

var obj1 = new Object();
obj1.category = 1;
obj1.type = "hello hello";
obj1.id = 1;

var obj2 = new Object();
obj2.category = 1;
obj2.type = 2;
obj2.id = 2;

var obj3 = new Object();
obj3.category = 2;
obj3.type = 4;
obj3.id = 3;


// Array containing all the objects from the server
// looks like this
var data = [obj1, obj2, obj3];
var artikelen = [];

for(var i=0; i<data.length; i++){

    if( !artikelen[data[i].category])
        artikelen[data[i].category] = new Array();

    if( !artikelen[data[i].category][data[i].type] )
        artikelen[data[i].category][data[i].type] = new Array();

    artikelen[data[i].category][data[i].type].push(data[i]);
}

alert( artikelen[1][2] ); // expected [object], [object]

alert( artikelen[1]["hello hello"][0].type ); // expected "hello hello"

EDIT

I gave it some more, thought and after reading this, it turns out that arrays in Javascript are not well suited to be used as associative arrays (like in PHP). In actuality, you are just adding attributes to an object. So making it an object instead is better. For example, the following:

var obj1 = new Object();
obj1.category = 1;
obj1.type = "hello hello";
obj1.id = 1;

var obj2 = new Object();
obj2.category = 1;
obj2.type = 2;
obj2.id = 2;

var obj3 = new Object();
obj3.category = 2;
obj3.type = 4;
obj3.id = 3;


// Array containing all the objects from the server
// looks like this
var data = [obj1, obj2, obj3];
var artikelen = [];

for(var i=0; i<data.length; i++){

    if( !artikelen[data[i].category])
        artikelen[data[i].category] = new Object();

    if( !artikelen[data[i].category][data[i].type] )
        artikelen[data[i].category][data[i].type] = new Object();

    artikelen[data[i].category][data[i].type] = (data[i]);
}

console.dir( artikelen ); // if using a debugger with console, gives detailed info

Also, if using a debugger, such as Firebug in Firefox, you can see detailed info with the console.dir function.

share|improve this answer
Thanks for your answer, and I think you got my concept. I will try it out in a few minutes. The categorie/category is a dutch/english thing. Ill switch it up. I will report back soon, thanks again! – Saif Bechan Mar 12 '12 at 20:19
Unfortunately this does not work. Object.categorie is a String, and so is type. If you take a look the screenshot, categorie is the second column of strings, and type is the 5th. There are no row numbers, either, it's all Strings. I edited in a better screenshot. – Saif Bechan Mar 12 '12 at 20:39
Javascript has no problem using strings as array indices. I will update answer with an example. – user17753 Mar 12 '12 at 20:51
I see, Yes it works now. I was experiencing some other small problem, but your code works great. WOW this kept me up for days, but the solution was so simple. The node.js/mongo works much much fater than the php implementation on my dataset. Just great!! – Saif Bechan Mar 12 '12 at 20:56
feedback
up vote 1 down vote

Are you still able to work with PHP? If so, you can always bring the data from the server in the JSON format and let the client (in your case, the javascript language) read it and interpret it.

share|improve this answer
I'd rather not take that route. Eventually the whole system has to be a node.js/mongodb system. Now the data is mixed together with a wordpress setup. Eventually everything has to work without PHP and Mysql. – Saif Bechan Mar 12 '12 at 20:00
Even though, I think if you generate the final array as in JSON format, you will have an easier time. Inside the loop where you actually get data together, make it in the JSON format. – Daniel Ribeiro Mar 12 '12 at 20:04
The data already comes in json format, but it does not come organized in categories and types. If I can get is organized in an "array in array" way I can use a templating engine to create everyting I need. If I use the raw JSON from the database the templating engine can;t use it. By the way, node.js is server side JavaScript, so both on the server and the client Javascript is the only language I can use. – Saif Bechan Mar 12 '12 at 20:46
feedback

Your Answer

 
or
required, but never shown
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.