JS Mangling PHP Arrays

Question

I have this legacy app which is 98% PHP with a smattering of JS. I'm trying to make it a little more dynamic and user-friendly by buffing up the JS, but I'm running into issues in how JS treats the data coming from PHP. It keeps trashing the sort order and I haven't been able to figure out how to stop/repair it. My PHP data is an associative array called $events that looks like this:

The data is used for a variety of functions, but it needs to stay in order because it is used to populate a option list. I prep it for JS with json_encode like this.

$events = json_encode($events);

Then I toss that over the wall to JS with an echo statement and json.parse which makes a JS object.

var events = '<?php echo $events; ?>';
events = JSON.parse(events);

When I look at the data after the echo, it's still the same as the PHP version, but the order is changed after the parse. They appear to be ordered by event_id, which is the key for the object. (I won't take up space by posting the data again. Suffice to say "Week 1" and it's children are first with "Setup" and it's children following. I will post the data if asked.)

I know that JS objects don't really have an order, so I found several answers here that said it needed to be in an array to maintain the order, so I tried this:

var events = [<?php echo $events; ?>];

and then this:

var events = '<?php echo $events; ?>';
events = [events];
events = JSON.parse(events);

neither of which made any difference at all. The sorting was still trashed. So I tried sorting it after the parse. I added values to the event_order field to work with. I read and tried several different versions of this ranging from the simple:

events.sort((a, b) => a.event_order - b.event_order);

to the more complex:

var sort = function (prop, arr) {
prop = prop.split('.');
var len = prop.length;

arr.sort(function (a, b) {
    var i = 0;
    while( i < len ) { a = a[prop[i]]; b = b[prop[i]]; i++; }
    if (a < b) {
        return -1;
    } else if (a > b) {
        return 1;
    } else {
        return 0;
    }
});
return arr;
};

sort('events.event_order', events);

which didn't change anything either. So I tried writing it to a new, supposedly sorted, object with this:

var events_sorted = {};

Object
    .keys(events).sort(function(a, b){
        return events[a].event_order - events[b].event_order;
    })
    .forEach(function(key) {
        events_sorted[key] = events[key];
    });

The new object was mangled too.

I've run out of ideas and tried so many things that I'm losing track of what I did and didn't do. I feel like I'm either doing something fundamentally wrong or I'm missing some small detail that's derailing me. Hoping someone can help. Thanks.

deceze · Accepted Answer · 2018-03-22 16:33:19Z

2

var events = <?php echo json_encode(array_values($events)); ?>;

This is all you need.

json_encode already produces a valid Javascript literal, just use that directly; there's no need to make that into a string which you parse again. In fact you'll get into a lot of headaches with quotes if your data contains quotes.
It's simply not possible to translate that PHP data structure into an equivalent Javascript data structure. PHP arrays are both associative and ordered, while in Javascript you can either have ordered data structures (arrays) or associative data structures (objects), but not both.

The above creates a Javascript array which preserves the order of your events. You're also not losing any information by discarding the keys, since they seem to be identical with the embedded event_id property anyway. The only thing is that you cannot access your events by key in Javascript now (e.g. events[4972]), but this is a fact you need to wrangle with in Javascript anyway since, again, you can't have it both ordered and keyed at the same time.

edited Mar 22, 2018 at 16:33

answered Mar 22, 2018 at 16:18

deceze♦

525k89 gold badges806 silver badges954 bronze badges

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

6 Comments

IMSoP Over a year ago

As a side note, it's worth remembering that technically a JSON object is not the same thing as a JS object, but because one inspired the other they have similar rules. The point being that even if you were using JSON to transport to something other than JS, any parser is free to ignore the order of keys in the JSON object. And similarly, if you used any other format to transport the data into JS, as soon as you created a JS object (rather than array), it would have no defined order.

mckinnej Over a year ago

@deceze I'm not sure if this helps. Yes, I get an ordered array, but now I can't access the elements of that array. How do I extract the start date of task 4897 for example? Do I have to iterate through whole the array every time I need to read an element? How is that even possible?

deceze Over a year ago

@mckinnej Yes, you’d have to iterate. If you need both ordered and direct access, you can build a second unordered object acting as an index into the array, or perhaps use other techniques like a Map.

mckinnej Over a year ago

@deceze Now that I've had the weekend to mull it over, I came up with this. I've built a simple array where the index matches the object key. I look up the object values like this: var name = events[eventsIdx.indexOf(event_id)][event_name] Is this a valid solution?

deceze Over a year ago

indexOf just iterates over the array too; you should build an object with key-value association, so you can do events[eventsIdx[eventId]].

|

Collectives™ on Stack Overflow

JS Mangling PHP Arrays

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related