What is wrong with this code in creating an equivalent javascript object?

Question

This is the original javascript object;

$scope.XXXChart.options =
{
    'title': '10-year (%)',    
    'hAxis': {
        'title': "Date",
        'format': "MMM-yyyy",
    },    
    'explorer': {      
        actions: ['dragToZoom', 'rightClickToReset'],
        maxZoomIn: 0.01,
        axis: 'horizontal',
        keepInBounds: true,
    }
};

I want to make an equivalent object with the following;

    var common_Chart_options =
    {
        'hAxis': {
            'title': "Date",
            'format': "MMM-yyyy",
        },
        'explorer': {
            //actions: ['dragToPan', 'rightClickToReset'],
            actions: ['dragToZoom', 'rightClickToReset'],
            maxZoomIn: 0.01,
            axis: 'horizontal',
            keepInBounds: true,
        }
    };

$scope.XXXChart.options =
    {
        'title': '10-year (%)', 
        common_Chart_options 
    }
};

What is wrong with this code? There was no error message but the Google Chart zoom features stopped working.

May I ask why the negative vote? Could you explain so that I can improve in future? — guagay_wk, Nov 01 '15 at 13:20
Can those who down-voted care to explain why the 2 negative votes? It is for my self-improvement. This question generated 3 answers. I really cannot see what is wrong with it. — guagay_wk, Nov 02 '15 at 10:06

score 4 · Accepted Answer · answered Nov 01 '15 at 13:22

4

In ES5 and earlier, this is a syntax error:

$scope.XXXChart.options =
    {
        'title': '10-year (%)', 
        common_Chart_options      // <=== Here
    }
};

A property initializer has to have a colon and a value after it.

In ES2015+, that creates a property on the object called common_Chart_options. It doesn't merge the propeties from common_Chart_options into the object you're creating.

You can do that using extend:

$scope.XXXChart.options = angular.extend(
    {},
    {
        'title': '10-year (%)'
    },
    common_Chart_options
);

answered Nov 01 '15 at 13:22

T.J. Crowder

1,031,962
187
1,923
1,875

Upvoted. Tested that it works. But suppose I was using node.js and not angularjs. How would the correct code look like? – guagay_wk Nov 01 '15 at 13:28
1

@user768421: Look at the source code for `extend`. jQuery also has a similar function. ES2015 provides `Object.assign` which also does something similar, and the latest Node (v4) has a version of V8 which supports it. – T.J. Crowder Nov 01 '15 at 13:31

score 1 · Answer 2 · edited May 23 '17 at 12:14

I did something like that before, and I solved it by merging two objects with the function from this answer.

The function looks like

function merge_options(obj1,obj2){
 var obj3 = {};
 for (var attrname in obj1) { obj3[attrname] = obj1[attrname]; }
 for (var attrname in obj2) { obj3[attrname] = obj2[attrname]; }
 return obj3;
}

and I used it like

var standardOptions = {height:700,width:500};
var customOptions = {height:500, title:'TestingTitles'};
var finalOptions = merge_options(standardOptions, customOptions);

the final options would then result in

{height:500, width:500, title:'TestingTitles'}

user2837491 · Answer 3 · 2015-11-01T13:27:46.143

To manually merge the object. Try:

$scope.XXXChart.options =
{
    'title': '10-year (%)', 
    'hAxis': common_Chart_options.hAxis,
    'explorer': common_Chart_options.explorer
}

or:

$scope.XXXChart.options =
{
    'title': $scope.XXXChart.options.title
    'hAxis': {
        'title': "Date",
        'format': "MMM-yyyy",
    },
    'explorer': {
        //actions: ['dragToPan', 'rightClickToReset'],
        actions: ['dragToZoom', 'rightClickToReset'],
        maxZoomIn: 0.01,
        axis: 'horizontal',
        keepInBounds: true,
    }
};

Otherwise use som kind of merge like underscore.extend.

What is wrong with this code in creating an equivalent javascript object?

3 Answers3