从json输出中检索数据

Question

我目前正在开发一个应用程序，该应用程序允许用户通过将元素从工具箱拖放到容器上并为这些元素分配属性来创建类似于流程图的模型。 最后，当用户决定保存模型时，模型的Json输出将显示在文本区域中，如图所示。

现在，我需要从此Json输出中重新生成/重新创建相同的模型。 为了完成这项预期的任务，我需要提取保存在Json输出中的每一个信息。 关于如何从Json输出中提取数据的任何建议都将受到欢迎。

与生成的Json接口

示例Json格式

从中如果我需要获取诸如

• id（ 示例：1 ）
• 类（ 示例：streamdrop ui-draggable ）
• 位置：顶部（ 示例：108.21181556762696 ）

这样我就可以使用相同的数据（id，class，position等）创建这些元素，如何检索这些元素？

以Json格式保存模型的代码

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

您将使用JSON.parse()并遍历数组以获取数据。

var objFromJson = JSON.parse(data);

objFromJson.elements.forEach(function(element) {

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

});

我也建议将json的结构更改为不具有太多嵌套数组，并使用更多对象以使其更容易将它们分配给变量

这样的事情。

{
   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"
         }
      }

   ]
}