Get the Height & width of Outmost layer in json

Question

I need to fetch the outermost layer's height and width [600* 600] from below json dynamically....

{
      "path" : " shape\/",
      "info" : {
        "author" : ""   
      },
      "name" : "shape",
      "layers" : [
        {     
          "height" : 600,
          "layers" : [
            {         
              "name" : "bg_rectangle_1"
            },
            {         
              "height" : 475,
              "layers" : [
                {

                  "src" : "http://sitename.com/images/oneheart.png",             
                  "name" : "mask_image_1"
                },
                {              
                  "name" : "useradd_ellipse1"
                }
              ],          
              "name" : "user_image_1"
            }
          ],      
          "width" : 600
        }
      ]
    }

So i tried below code , but height and width are not displaying, also there is no console error....

$(document).ready(function() {

    function json(data) {
        var dataObj = {};
        var width = 0;
        var height = 0;

        let layer1 = data.layers;
        width = layer1.width;
        height = layer1.height;

        let layer2 = layer1[0].layers;

        for (i = 1; i < layer2.length; i++) {
            var x = layer2[i].x;
            var y = layer2[i].y;
            var src = layer2[i].layers[0].src;
            $(".container").css('width', width + "px").css('height', height + "px");           
        }
    }
    json(jsonData);

}); // end of document ready

Below is code snippet :

 var mask1; let jsonData = { "path" : " newyear collage\\/", "info" : { "author" : "", "keywords" : "", "file" : "newyear collage", "date" : "sRGB", "title" : "", "description" : "Normal", "generator" : "Export Kit v1.2.8" }, "name" : "newyear collage", "layers" : [ { "x" : 0, "height" : 612, "layers" : [ { "x" : 0, "color" : "0xFFFFFF", "height" : 612, "y" : 0, "width" : 612, "shapeType" : "rectangle", "type" : "shape", "name" : "bg_rectangle" }, { "x" : 160, "height" : 296, "layers" : [ { "x" : 0, "height" : 296, "src" : "vw6ZYre.png", "y" : 0, "width" : 429, "type" : "image", "name" : "mask_image_1" }, { "radius" : "26 \\/ 27", "color" : "0xACACAC", "x" : 188, "y" : 122, "height" : 53, "width" : 53, "shapeType" : "ellipse", "type" : "shape", "name" : "useradd_ellipse1" } ], "y" : 291, "width" : 429, "type" : "group", "name" : "user_image_1" }, { "x" : 25, "height" : 324, "layers" : [ { "x" : 0, "height" : 324, "src" : "kbXMnVP.png", "y" : 0, "width" : 471, "type" : "image", "name" : "mask_image_2" }, { "radius" : "26 \\/ 27", "color" : "0xACACAC", "x" : 209, "y" : 136, "height" : 53, "width" : 53, "shapeType" : "ellipse", "type" : "shape", "name" : "useradd_ellipse_2" } ], "y" : 22, "width" : 471, "type" : "group", "name" : "user_image_2" } ], "y" : 0, "width" : 612, "type" : "group", "name" : "newyearcollage08" } ] }; $(document).ready(function() { var maskedImageUrla = ""; var coordinates = { x: 0, y: 0 }; function json(data) { var dataObj = {}; var width = 0; var height = 0; let layer1 = data.layers; width = layer1.width; height = layer1.height; let layer2 = layer1[0].layers; for (i = 1; i < layer2.length; i++) { var x = layer2[i].x; var y = layer2[i].y; var src = layer2[i].layers[0].src; $(".container").css('width', width + "px").css('height', height + "px").addClass('temp'); var mask1 = $(".container").mask({ maskImageUrl: 'https://i.imgur.com/' + src, onMaskImageCreate: function(img) { img.css({ "position": "fixed", "left": x + "px", "top": y + "px" }); } }); fileupa1.onchange = function() { mask1.loadImage(URL.createObjectURL(fileupa1.files[0])); }; } } json(jsonData); }); // end of document ready // jq plugin for mask (function($) { var JQmasks = []; $.fn.mask = function(options) { // This is the easiest way to have default options. var settings = $.extend({ // These are the defaults. maskImageUrl: undefined, imageUrl: undefined, scale: 1, id: new Date().getUTCMilliseconds().toString(), x: 0, // image start position y: 0, // image start position onMaskImageCreate: function(div) {}, }, options); var container = $(this); let prevX = 0, prevY = 0, draggable = false, img, canvas, context, image, timeout, initImage = false, startX = settings.x, startY = settings.y, div; container.mousePosition = function(event) { return { x: event.pageX || event.offsetX, y: event.pageY || event.offsetY }; } container.selected = function(ev) { var pos = container.mousePosition(ev); var item = $(".masked-img canvas").filter(function() { var offset = $(this).offset() var x = pos.x - offset.left; var y = pos.y - offset.top; var d = this.getContext('2d').getImageData(x, y, 1, 1).data; return d[0] > 0 }); JQmasks.forEach(function(el) { var id = item.length > 0 ? $(item).attr("id") : ""; if (el.id == id) el.item.enable(); else el.item.disable(); }); }; container.enable = function() { draggable = true; $(canvas).attr("active", "true"); div.css({ "z-index": 2 }); } container.disable = function() { draggable = false; $(canvas).attr("active", "false"); div.css({ "z-index": 1 }); } container.onDragStart = function(evt) { container.selected(evt); prevX = evt.clientX; prevY = evt.clientY; }; container.getImagePosition = function() { return { x: settings.x, y: settings.y, scale: settings.scale }; }; container.onDragOver = function(evt) { if (draggable && $(canvas).attr("active") === "true") { var x = settings.x + evt.clientX - prevX; var y = settings.y + evt.clientY - prevY; if (x == settings.x && y == settings.y) return; // position has not changed settings.x += evt.clientX - prevX; settings.y += evt.clientY - prevY; prevX = evt.clientX; prevY = evt.clientY; container.updateStyle(); } }; container.updateStyle = function() { clearTimeout(timeout); timeout = setTimeout(function() { context.clearRect(0, 0, canvas.width, canvas.height); context.beginPath(); context.globalCompositeOperation = "source-over"; image = new Image(); image.setAttribute('crossOrigin', 'anonymous'); image.src = settings.maskImageUrl; image.onload = function() { canvas.width = image.width; canvas.height = image.height; context.drawImage(image, 0, 0, image.width, image.height); div.css({ "width": image.width, "height": image.height }); }; img = new Image(); img.src = settings.imageUrl; img.setAttribute('crossOrigin', 'anonymous'); img.onload = function() { settings.x = settings.x == 0 && initImage ? (canvas.width - (img.width * settings.scale)) / 2 : settings.x; settings.y = settings.y == 0 && initImage ? (canvas.height - (img.height * settings.scale)) / 2 : settings.y; context.globalCompositeOperation = 'source-atop'; context.drawImage(img, settings.x, settings.y, img.width * settings.scale, img.height * settings.scale); initImage = false; }; }, 0); }; // change the draggable image container.loadImage = function(imageUrl) { if (img) img.remove(); // reset the code. settings.y = startY; settings.x = startX; prevX = prevY = 0; settings.imageUrl = imageUrl; initImage = true; container.updateStyle(); }; // change the masked Image container.loadMaskImage = function(imageUrl, from) { if (div) div.remove(); canvas = document.createElement("canvas"); context = canvas.getContext('2d'); canvas.setAttribute("draggable", "true"); canvas.setAttribute("id", settings.id); settings.maskImageUrl = imageUrl; div = $("<div/>", { "class": "masked-img" }).append(canvas); div.find("canvas").on('touchstart mousedown', function(event) { if (event.handled === false) return; event.handled = true; container.onDragStart(event); }); div.find("canvas").on('touchend mouseup', function(event) { if (event.handled === false) return; event.handled = true; container.selected(event); }); div.find("canvas").bind("dragover", container.onDragOver); container.append(div); if (settings.onMaskImageCreate) settings.onMaskImageCreate(div); container.loadImage(settings.imageUrl); }; container.loadMaskImage(settings.maskImageUrl); JQmasks.push({ item: container, id: settings.id }) return container; }; }(jQuery)); 

 .temp { border: 1px solid #DDDDDD; display: flex; background :gold; } .container { border: 1px slolid #DDDDDD; display: flex; background :silver ; } .container canvas { display: block; } .masked-img { overflow: hidden; margin-top: 50px; position: relative; } 

 <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> image 1 <input id="fileupa1" type="file" > <div class="container"> </div> 

There are images inside that layer, but as height and width are not displaying, images are also not displaying, you can test by uploading an image in snippet....

Answer 1

layers are arrays

    width = layer1[0].width;
    height = layer1[0].height;