Retrieve data from json output

Question

I'm currently working on an application that allows the user to create flowchart-like model by dragging and dropping elements from the toolbox on to the container and assigning properties to these elements. At the end, when the user decides to Save the model, a Json output of the model will be displayed in the textarea as shown.

Now, I need to re-generate/re-create the same model from this Json output. To do this intended task, I need to extract each and every bit of information that I've saved in the Json output. Any suggestions on how I can extract data from Json output will be welcomed.

Interface with Generated Json

Example Json format

From this if I need to get individual data such as

• id ( Example: 1 )
• class ( Example: streamdrop ui-draggable )
• position:top ( Example: 108.21181556762696 )

so that I can create these elements with the same data(id, class, position,etc.), how can I retrieve these?

Code that saves the model in Json format

function saveFlowchart(){
    var nodes = [];
    var matches = [];
    var totalElementCount=0;
    var searchEles = document.getElementById("container").children;
    for(var i = 0; i < searchEles.length; i++)
    {
        matches.push(searchEles[i]);
        var idOfEl = searchEles[i].id;
        totalElementCount=idOfEl;

        if(searchEles[i].id !=null || searchEles[i].id !="")
        {
            var $element = $("#" + searchEles[i].id);
            var dropElem = $("#" + searchEles[i].id).attr('class');

            var position = $element.position();

            finalArray[i] = [];

            var elId = parseInt(idOfEl);

            if (dropElem=="streamdrop ui-draggable")
            {
                finalArray[idOfEl-1][0]= {id:idOfEl};
                finalArray[idOfEl-1][1]= {class:dropElem};
                position.bottom = position.top + $element.height();
                position.right = position.left + $element.width();
                finalArray[idOfEl-1][2]= {position:[{top:position.top,left:position.left,bottom:position.bottom,right:position.right}]};
                for(var count=0;count<100;count++)
                {
                    if(createdImportStreamArray[count][0]==idOfEl)
                    {
                        finalArray[elId-1][3]=  {predefinedStream:createdImportStreamArray[count][1]}; //Selected Stream from Predefined Streams
                        finalArray[elId-1][4]= {name:createdImportStreamArray[count][2]}; //asName
                        //alert("createdImportStreamArray[count][0]==elId\n"+count);
                    }
                    else if(createdExportStreamArray[count][0]==idOfEl)
                    {
                        finalArray[elId-1][3]= {predefinedStream:createdExportStreamArray[count][1]}; //Selected Stream from Predefined Streams
                        finalArray[elId-1][4]= {name:createdExportStreamArray[count][2]}; //asName
                    }
                    else if(createdDefinedStreamArray[count][0]==idOfEl)
                    {
                        finalArray[elId-1][3]= {name:createdDefinedStreamArray[count][1]}; //Stream Name
                        finalArray[elId-1][4]= {numberOfAttributes:createdDefinedStreamArray[count][4]-1}; //Number of Attributes
                        var attrNum = createdDefinedStreamArray[count][4];
                        for(var f=0;f<attrNum;f++)
                        {
                            //Todo Uncaught TypeError: Cannot read property '0' of undefined
                            //finalArray[elId-1][5]={attribute:[{attributeName:createdDefinedStreamArray[count][2][f][0],attributeType:createdDefinedStreamArray[count][2][f][1]}]};
                        }
                    }
                }
            }

            else if (dropElem=="wstreamdrop ui-draggable")
            {
                finalArray[elId-1][0]= {id:idOfEl};
                finalArray[elId-1][1]= {class:dropElem};
                position.bottom = position.top + $element.height();
                position.right = position.left + $element.width();
                finalArray[elId-1][2]= {position:[{top:position.top,left:position.left,bottom:position.bottom,right:position.right}]};

                finalArray[elId-1][3]= {windowName:createdWindowStreamArray[elId][1]};
                finalArray[elId-1][4]= {selectedStream:[{index:createdWindowStreamArray[elId][2],name:createdWindowStreamArray[elId][3]}]};
                for(var af=0;af<createdWindowStreamArray[elId][4].length;af++)
                {
                    //Todo Uncaught TypeError: Cannot read property '0' of undefined
                    //finalArray[elId-1][5]={attributes:[{name:createdWindowStreamArray[elId][4][af][0],type:createdWindowStreamArray[elId][4][af][0]}]};
                }
            }

            else if (dropElem=="squerydrop ui-draggable")
            {
                finalArray[idOfEl-1][0]= {id:idOfEl};
                finalArray[idOfEl-1][1]= {class:dropElem};
                position.bottom = position.top + $element.height();
                position.right = position.left + $element.width();
                finalArray[idOfEl-1][2]= {position:[{top:position.top,left:position.left,bottom:position.bottom,right:position.right}]};
                finalArray[elId-1][3]= {queryName:createdSimpleQueryArray[elId][1]};
                finalArray[elId-1][4] ={fromStream:[{index:createdSimpleQueryArray[elId][2][0],name:createdSimpleQueryArray[elId][2][1]}]};
                var arrlen = createdSimpleQueryArray[elId][4].length;
                alert("squery attr array len: "+arrlen);
                finalArray[elId-1][5]= {filter:createdSimpleQueryArray[elId][3]};
                for(var ct=0;ct<createdSimpleQueryArray[elId][4].length;ct++)
                {
                    finalArray[elId-1][6]= {attributes:[{name:createdSimpleQueryArray[elId][4][ct][0],type:createdSimpleQueryArray[elId][4][ct][1]}]};
                }

                finalArray[elId-1][7] ={intoStream:[{index:createdSimpleQueryArray[elId][5][0],name:createdSimpleQueryArray[elId][5][1]}]};
            }

        else if (dropElem=="wquerydrop ui-draggable")
            {
             //Continues with other else-if statements in the above same
             manner
        }

    }

    var connections = [];
    $.each(jsPlumb.getConnections(), function (idx, connection) {
        connections.push({
            connectionId: connection.id,
            pageSourceId: connection.sourceId,
            pageTargetId: connection.targetId
        });
    });

    var flowChart = {};
    flowChart.elements =finalArray;
    flowChart.connections = connections;

    var flowChartJson = JSON.stringify(flowChart);
    //console.log(flowChartJson);

    $('#jsonOutput').val(flowChartJson);
}

Answer 1

You will use JSON.parse() and loop through the array to get the data.

var objFromJson = JSON.parse(data);

objFromJson.elements.forEach(function(element) {

    var id = element.id;
    var classes = element.class;
    var positionTop = element.position.top

});

Also i would suggest to change the structure of your json to not have so many nested arrays and use more objects to make it easier to assign them to variables

Something like this.

{
   elements:[
      {
         id:"218931",
         class:"this that",
         position:{
            top:"2321312312",
            bottom:"2312312312"
         }
      },
      {
         id:"218931",
         class:"this that",
         position:{
            top:"2321312312",
            bottom:"2312312312"
         }
      },
      {
         id:"218931",
         class:"this that",
         position:{
            top:"2321312312",
            bottom:"2312312312"
         }
      }

   ]
}