JSFiddle - React, Tailwind, and code Playground

by jojeda

HTML

<div id="mydata"></div>

JavaScript

var jsonStr = '{
  "version":"0.3",
  "window-center":93.2,
  "window-width":161.95,
  "position":{"i":0,"j":0,"k":0},
  "scale":1,
  "scaleCenter":{"x":0,"y":0},
  "translation":{"x":0,"y":0},
  "drawings":{"attrs":{"listening":true,"visible":true},"className":"Layer","children":[{"attrs":{"name":"position-group","id":"slice-0_frame-0","visible":true},"className":"Group","children":[{"attrs":{"name":"freeHand-group","visible":true,"id":"duz45psw1hg","draggable":true},"className":"Group","children":[{"attrs":{"points":[113,73,117,82,126,91,146,93,168,75,157,65,93,41,114,71],"stroke":"#ffff80","strokeWidth":0.8165869218500797,"name":"shape","tension":0.5},"className":"Line"},{"attrs":{"x":113,"y":83,"name":"label"},"className":"Label","children":[{"attrs":{"fontSize":4.899521531100478,"fontFamily":"Verdana","fill":"#ffff80","name":"text"},"className":"Text"},{"attrs":{"height":4.899521531100478},"className":"Tag"}]}]}]}]},"drawingsDetails":{"duz45psw1hg":{"textExpr":"","longText":"","quant":null}}}
';

var parsedData = JSON.parse(jsonStr);
alert(parsedData.attrs.width)


$.each(parsedData.children, function (index, value) {
    $.each(this.children, function (index, value) {
        $('#mydata').append(' x value is : '+this.attrs.x);
        $('#mydata').append(' y value is : '+this.attrs.y);
    });
    console.log(this);
});