从 Javascript 中的 json 输出中获取每个元素的数据

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()方法，需要提醒每个元素的is、class和top位置。

但是我遇到了一个错误，这个错误甚至不在我编写的任何脚本中，而是在 jquery 帮助脚本中。

错误：未捕获的类型错误：无法读取未定义的属性“长度”

我想知道我在尝试循环 Json 输出的节点时做错了什么，我们将非常感谢这方面的任何帮助。

Answer 1

根据您的 cmets 这部分是正确的，但是当人们阅读它时，它似乎不是。

在以下函数中：

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);
    });
}