how to merge two objects

Question

I have two objects

var defPathValues={'id':'','fill':'','fill-opacity':'','stroke-width':'','stroke-linecap':'','stroke-linejoin':'',
                        'stroke':'','d':'','transform':''};

var options={'id':'ele1', 'fill':'white'};

I want to merge these two objects and remove other empty properties from defPathValues (i.e. based on options we passed).

After merge I want to set these attributes in svg path element.

before that am having like

var path = document.createElementNS(this.svgLink, "path");
        $(path).attr({
            'id': this.SvgObject.id+ "_" + series.Name + "_"+ seriesIndex,
            'fill': 'none',
            'stroke-width': style.SeriesStyle.BorderWidth,
            'stroke': style.SeriesInterior,
            'stroke-linecap': style.SeriesStyle.LineCap,
            'stroke-linejoin':style.SeriesStyle.LineJoin,     
            'd': direction,

        });

instead of that I want to set object directly to attr of path element. how can I do this ?

Answer 1

This may not be the most elegant solution, but I'm confident it would work: I'm assuming you have previously defined defPathValues and options as JS objects before this code runs.

for(var i in options) defPathValues[i] = options[i];

var newDefPathValues = {};
for(var i in defPathValues) {
    if(typeof defPathValues[i] == 'undefined' || defPathValues[i] == '' || defPathValues[i] == null) continue;
    newDefPathValues[i] = defPathValues[i];
}
defPathValues = newDefPathValues;