JavaScript Array of Objects Merging (Unwanted behaviour)

Question

This:

var requestOptions = [
                {
                    id: 1
                },
                {
                    id: 2
                }];

console.log(requestOptions);

Is returning me this:

0: Object
id: 2
1: Object
id: 2

Why so? Looks like they are being merged and I don't want it to.

**** The full code is below *** As I mentioned in the comments, the simplified version above, runs fine (sorry). But, the below isn't.

setDataTable function, uses the same variable name to merge and validate, then sending an Ajax call.

google.charts.setOnLoadCallback(function() {
        // Set datasources

        var requestOptions = [
            {
                id: 1,
                fields: 'cidade_uf, uf, data as Data, SUM(demanda) AS Demanda, SUM(mercado) AS Mercado',
                formats: '[{"type":"string"}, {"type":"string"}, {"type":"date", "options": {"format":"M Y"}},{"type":"decimal","options":{"cases":2}},{"type":"money","options":{"sign":"R$"}}]',
                groupby: 'cidade_uf, uf, data',
                s: '<?=$source1?>'
            },
            {
                id: 2,
                fields: 'data as Data, SUM(demanda)/SUM(mercado) as `Mkt Share (%)`',
                formats: '[{"type":"date", "options": {"format": "M Y"}}, {"type":"percent", "options":{"cases": 0}}]',
                groupby: 'data',
                s: '<?=$source1?>'
            }];

        console.log(requestOptions);
        setDataTable(requestOptions,dataCallback);
    });

Are you sure? When I run your code, I can choose `requestOptions[0]` and I get `{id: 1}`, and `requestOptions[1]` gives me `{id: 2}`. — Justin K, Jun 21 '17 at 17:01
How are you generating that output? Works fine https://codepen.io/pjabbott/pen/OggPjq — Paul Abbott, Jun 21 '17 at 17:01
Give us a complete set of code that can reproduce the issue. "Is returning me this" **What** is returning you that? — , Jun 21 '17 at 17:03
I'm just using console.log just after this object declaration, and it returns as duplicated in Chrome Console... Only then this var is sent to a function that will will be merged with a "default" variable. — Paulo Henrique, Jun 21 '17 at 17:05
Are you doing a console.log? what browser or environment you are using? I think what you see is super normal. — Charlie Ng, Jun 21 '17 at 17:05
Can you edit your question to include the `console.log()` call please? We are all running your code and it is returning two separate objects. — Justin K, Jun 21 '17 at 17:06
what you see is fine. It just displays differently in different browsers. Not your problem. — Charlie Ng, Jun 21 '17 at 17:07
@CharlieNg - It's not fine, why should both `id` values be `2`? — RJM, Jun 21 '17 at 17:10
@JustinK: done! Charlie> You mean, it shows duplicated in Chrome, but in the real life the variable is correct? I'll recheck this, but I'm almost sure the variable is sent incorrect as exposed above. This variable is used in an Ajax call, but before the call was already duplicated. — Paulo Henrique, Jun 21 '17 at 17:10
my bad guys, didn't see the duplicated id. You need to show more your code then. — Charlie Ng, Jun 21 '17 at 17:14
@PauloHenrique is your log output showing different ID's if you run `console.log(requestOptions[0]); console.log(requestOptions[1]);`? I am running your code in my Chrome console and it's giving me both your objects, with the different ID fields. — Justin K, Jun 21 '17 at 17:14
Okay, this is the short version, if I use it, it's okay. Posting the rest of the code. — Paulo Henrique, Jun 21 '17 at 17:15
Note: the console doesn't output an object's value at the time that it was logged, rather it shows the object's value at the time you're viewing it, so it's possible that the value has been changed since the object was logged. [see this post here](https://stackoverflow.com/questions/4057440/is-chromes-javascript-console-lazy-about-evaluating-arrays) — Patrick Barr, Jun 21 '17 at 17:16
Okay, thank you. Would appreciate if you review the down voting, since this is generating something not totally useless here? thank you. — Paulo Henrique, Jun 21 '17 at 17:19
@PatrickBarr, just checked now, and the PHP script called by AJAX is really receiving the duplicated variable, not a timing problem — Paulo Henrique, Jun 21 '17 at 17:21

Paulo Henrique · Answer 1 · 2017-06-21T17:59:24.537

I found the problem, actually was here (sorry I didn't posted that):

var mergeRequest = {
    fields: '',
    formats: '',
    condition: '',
    groupby: '',
    orderby: '',
    order: '',
    limit: '',
    s: '',
}
        $.each(requestOptions, function( index ) {
            requestOptions[index] = $.extend(mergeRequest, requestOptions[index]);
        });

And changed it to (used a new variable to merge the options) and redeclaring mergeOptions as empty inside the loop:

    var requestOptionsVal = []
        $.each(requestOptions, function( index ) {
var mergeRequest = {
            fields: '',
            formats: '',
            condition: '',
            groupby: '',
            orderby: '',
            order: '',
            limit: '',
            s: '',
        };
            requestOptionsVal[index] = $.extend(mergeRequest, requestOptions[index]);
        });

Turns out that, as mentioned by @PatrickBarr, there's a delay in logging the results, which output the variable value when at an uncertain point of the execution. I didn't know that and I'll certainly not rely so much in debugging via the console.

Thanks,

JavaScript Array of Objects Merging (Unwanted behaviour)

1 Answers1