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

   ]
}