Извлечь данные из json-вывода

Question

В настоящее время я работаю над приложением, которое позволяет пользователю создавать подобную блок-схеме, перетаскивая элементы из панели инструментов в контейнер и присваивая свойства этим элементам. В конце, когда пользователь решит Сохраните модель, в текстовом поле будет отображаться выход Json модели, как показано.

Теперь мне нужно сгенерировать/воссоздать ту же модель с этого выхода Json. Чтобы выполнить эту задачу, мне нужно извлечь каждый бит информации, которую я сохранил на выходе Json. Любые предложения о том, как я могу извлечь данные с выхода Json, будут приветствоваться.

Интерфейс с генерируемым Json

формате

Пример Json

Из этого, если мне нужно, чтобы получить индивидуальные данные, такие как

• идентификатор (Пример: 1)
• класс (Пример: streamdrop щ-перетаскиваемым)
• положение: верхнее (Пример: 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" 
     } 
     } 

    ] 
}