Получить данные каждого элемента из json-вывода в Javascript

Question

Я пытаюсь получить данные каждого элемента, хранящиеся в формате вывода Json. В настоящее время я попытался следующие

загружать отдельные данные JSon

function loadFlowchart() { 
    var flowChartJson = $('#jsonOutput').val(); 

    var objFromJson = JSON.parse(flowChartJson); 
    var node = objFromJson.node; 
    $.each(node, function (index, element) { 
     var id = element.id; 
     var classes = element.class; 
     var positionTop = element.position.top 
     alert("Id of element parsed: " + id + "\nclass: " + classes 
     + "\npositionTop: " + positionTop); 
    }); 
} 

Метод, который создает JSon выход

function saveFlowchart(){ 
    var node = []; 
    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(); 

      var elId = parseInt(idOfEl); 

      if (dropElem=="streamdrop ui-draggable") 
      { 
       position.bottom = position.top + $element.height(); 
       position.right = position.left + $element.width(); 

       node.push({ 
        id: idOfEl, 
        class: dropElem, 
        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) 
        { 
         node.push({ 
          predefinedStream: createdImportStreamArray[count][1], 

        //...Continued 

var flowChart = {}; 
flowChart.elements =node; 
var flowChartJson = JSON.stringify(flowChart); 
$('#jsonOutput').val(flowChartJson); 
} 

Интерфейс выглядит, как показано ниже. Когда нажата кнопка Load, в соответствии с методом loadFlowChart(), как показано в первом фрагменте кода, необходимо предупредить каждое из элементов, класса и верхнего положения.

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

Error: Uncaught TypeError: Cannot read property 'length' of undefined

Я хотел бы знать, что я делаю неправильно, пытаясь петлю через узел выхода Json и любую помощь в этой связи будет высоко оценен.

Answer 1

В соответствии с вашими комментариями эта часть верна, но, если ее читать, похоже, это не так.

В следующей функции:

function loadFlowchart() { 
    // Here you get the contents of the input field as text 
    var flowChartJson = $('#jsonOutput').val(); 
    // Here you parse it into a Javascript object 
    var objFromJson = JSON.parse(flowChartJson); 
    // Here you access the "node" attribute of that object, but if I look to the screenshot 
    // you provided there is no "node" attribute in the input field. If that's the case, 
    // then "node" is "undefined" and it would produce the error you indicate. 
    var node = objFromJson.node; 
    // you can verify by showing the full object on the console 
    console.log(objFromJson); 
    // The input field, as seen on the screenshot, would suggest you need to access the 
    // "elements" attribute instead of "node". 
    var node = objFromJson.elements; 
    $.each(node, function (index, element) { 
     var id = element.id; 
     var classes = element.class; 
     var positionTop = element.position.top 
     alert("Id of element parsed: " + id + "\nclass: " + classes 
     + "\npositionTop: " + positionTop); 
    }); 
}