Question

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

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

与生成的Json的接口

示例Json格式

如果我需要获取个人数据，例如

id（示例：1 ）
class（示例：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"
         }
      }

   ]
}

从json输出中检索数据

1 个答案: