从 json 输出中检索数据

Question

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

现在，我需要从这个 Json 输出中 re-generate/re-create 相同的模型。为了完成这项预期的任务，我需要提取保存在 Json 输出中的每一点信息。欢迎任何关于如何从 Json 输出中提取数据的建议。

与生成的接口 Json

示例Json格式

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

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

以便我可以使用相同的数据（id、class、位置等）创建这些元素，我如何检索这些元素？

以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 输出中检索数据

Retrieve data from json output

javascript

jquery

json

extract

stringify