Concat two JSON object for adding data in fabic.js canvas

Question

{
  "objects": [{
    "type": "i-text",
    "originX": "left",
    "originY": "top",
    "left": 253.75,
    "top": 377.4,
    "width": 293.49609375,
    "height": 45.199999999999996,
    "fill": "#454545",
    "stroke": null,
    "strokeWidth": 1,
    "strokeDashArray": null,
    "strokeLineCap": "butt",
    "strokeLineJoin": "miter",
    "strokeMiterLimit": 10,
    "scaleX": 1,
    "scaleY": 1,
    "angle": 0,
    "flipX": false,
    "flipY": false,
    "opacity": 1,
    "shadow": null,
    "visible": true,
    "clipTo": null,
    "backgroundColor": "",
    "fillRule": "nonzero",
    "globalCompositeOperation": "source-over",
    "transformMatrix": null,
    "skewX": 0,
    "skewY": 0,
    "text": "Start typing here",
    "fontSize": 40,
    "fontWeight": "normal",
    "fontFamily": "arial",
    "fontStyle": "",
    "lineHeight": 1.16,
    "textDecoration": "",
    "textAlign": "left",
    "textBackgroundColor": "",
    "charSpacing": 0,
    "originalScaleX": 1,
    "originalScaleY": 1,
    "originalLeft": 253.751953125,
    "originalTop": 377.4,
    "lockMovementX": false,
    "lockMovementY": false,
    "lockScalingX": false,
    "lockScalingY": false,
    "lockUniScaling": false,
    "lockRotation": false,
    "id": 8454,
    "styles": {}
  }],
  "background": "#ffffff",
  "height": 800,
  "width": 801,
  "originalHeight": 800,
  "originalWidth": 801
}

{
  "objects": [{
    "type": "i-text",
    "originX": "left",
    "originY": "top",
    "left": 253.75,
    "top": 377.4,
    "width": 293.49609375,
    "height": 45.199999999999996,
    "fill": "#454545",
    "stroke": null,
    "strokeWidth": 1,
    "strokeDashArray": null,
    "strokeLineCap": "butt",
    "strokeLineJoin": "miter",
    "strokeMiterLimit": 10,
    "scaleX": 1,
    "scaleY": 1,
    "angle": 0,
    "flipX": false,
    "flipY": false,
    "opacity": 1,
    "shadow": null,
    "visible": true,
    "clipTo": null,
    "backgroundColor": "",
    "fillRule": "nonzero",
    "globalCompositeOperation": "source-over",
    "transformMatrix": null,
    "skewX": 0,
    "skewY": 0,
    "text": "Start typing here",
    "fontSize": 40,
    "fontWeight": "normal",
    "fontFamily": "arial",
    "fontStyle": "",
    "lineHeight": 1.16,
    "textDecoration": "",
    "textAlign": "left",
    "textBackgroundColor": "",
    "charSpacing": 0,
    "originalScaleX": 1,
    "originalScaleY": 1,
    "originalLeft": 253.751953125,
    "originalTop": 377.4,
    "lockMovementX": false,
    "lockMovementY": false,
    "lockScalingX": false,
    "lockScalingY": false,
    "lockUniScaling": false,
    "lockRotation": false,
    "id": 6668,
    "styles": {}
  }],
  "background": "#ffffff",
  "height": 800,
  "width": 801,
  "originalHeight": 800,
  "originalWidth": 801
}

i have this 2 fabric.js json object which i want to concat and load to canvas by using fabric loadJSON method??

Please share effort? I'm not closing as dupe as i'm not sure about fabric, but you can refer [how to merge objects in JS](http://stackoverflow.com/questions/171251/how-can-i-merge-properties-of-two-javascript-objects-dynamically) for merging — Rajesh, Feb 24 '17 at 08:58
I don't believe that's what Sagar Adke is looking for, but only he can speak to it. I have given him what I believe is what he's looking for below. — Tim Harker, Feb 24 '17 at 14:52

score 0 · Answer 1 · answered Feb 24 '17 at 09:31

For this kind of object manipulation, I always have underscore.js ready. It's the first js library I import when starting a new project.

http://underscorejs.org

Take a look at: _.extend (better even, take a look at the whole lib ;))

_.extend({name: 'moe'}, {age: 50});
=> {name: 'moe', age: 50}

score 0 · Accepted Answer · edited May 23 '17 at 12:25

There are many options depending on what Sagar Adke is ultimately trying to achieve. However, I think these might be closer to what he's looking for:

OPTION 1:

Load the canvas with json1 stringify'ing first, clone the object since loading again will clear the canvas, load the canvas with json2 stringify'ing first, and then add the cloned object.

canvas.loadFromJSON(JSON.stringify(json1), canvas.renderAll.bind(canvas));
var item = canvas.item(0).clone();
canvas.loadFromJSON(JSON.stringify(json2), canvas.renderAll.bind(canvas));
// only needed since objects are identical and I wanted to show both objects
item.set({
  top: item.top - 70
});
canvas.add(item);
canvas.renderAll();

Working JSFiddle, http://jsfiddle.net/rekrah/wxjnu7pd/.

OPTION 2:

Push json2 object onto json1 object stack, and then load the canvas with json1 stringify'ing first.

json1.objects.push(json2.objects[0]);
// the next line will put both objects on top of each other, since they're identical
canvas.loadFromJSON(JSON.stringify(json1), canvas.renderAll.bind(canvas));
canvas.renderAll();

Working JSFiddle, http://jsfiddle.net/rekrah/okb2uj1m/.

OPTION 3:

No need to stringify json first with this option, just pass an array of fabric objects to enlivenObjects (in fabric.util), and then add each object to the canvas in its callback.

fabric.util.enlivenObjects([json1.objects[0], json2.objects[0]], function(objects) {
  var origRenderOnAddRemove = canvas.renderOnAddRemove;
  canvas.renderOnAddRemove = false;
  objects.forEach(function(o, i) {
    // IF only needed since objects are identical and I wanted to show both objects
    if (i == 0) o.set({
      top: o.top - 70
    });
    canvas.add(o);
  });
  canvas.renderOnAddRemove = origRenderOnAddRemove;
  canvas.renderAll();
});

Working JSFiddle, http://jsfiddle.net/rekrah/jnkLjrn4/.

(Option 3 credit goes to a FabricJS master, https://stackoverflow.com/a/19364574/3389046)

Concat two JSON object for adding data in fabic.js canvas

2 Answers2