Creating a Javascript version of a PHP multidimensional associated array

Question

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

JavaScript does not have a push operator like PHP’s []=, you need to use push instead. — Gumbo
– Gumbo, Commented Mar 12, 2012 at 20:07

user17753 · Accepted Answer · 2012-03-15 19:27:07Z

1

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.

edited Mar 15, 2012 at 19:27

answered Mar 12, 2012 at 20:04

user17753

3,18110 gold badges41 silver badges75 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Saif Bechan Over a year ago

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 Over a year ago

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.

user17753 Over a year ago

Javascript has no problem using strings as array indices. I will update answer with an example.

Saif Bechan Over a year ago

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

Daniel Ribeiro · Accepted Answer · 2012-03-12 19:57:59Z

1

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.

answered Mar 12, 2012 at 19:57

Daniel Ribeiro

10.3k12 gold badges50 silver badges80 bronze badges

3 Comments

Saif Bechan Over a year ago

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.

Daniel Ribeiro Over a year ago

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.

Saif Bechan Over a year ago

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.

Collectives™ on Stack Overflow

Creating a Javascript version of a PHP multidimensional associated array

Problem

Edit

2 Answers 2

4 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Problem

Edit

2 Answers 2

4 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related