how to parse a tree into JSON object with jQuery

Question

I am trying to build a JSON object from the tree class, I just need the span values. the tree structure is dynamic and nested so i think the best approach to do that is using some recursion function. currently I just succeed to extract the key and the values but I am not succeeding to build the JSON object.

I am using jinja2 when I building the html file.

this is the html code:

<div class="tree well">
            <ul id="treeList">
                <li >
                    <span id="deviceName" class="fa fa-tablet"> {{report["name"]}}</span>
                    <ul>
                        {% for v in report["reports"] %}
                        <li >
                            <span id="{{v['_id']}}" class="fa fa-code-fork"> {{v["_id"]}} </span>
                            <ul>
                                {% for key, value in v.items() recursive %}
                                    {% if key != '_id' %}
                                    <li  id="li_{{key}}">
                                        {% if value is not mapping %}
                                            {% if key == 'status' %}
                                                <span class="status" id="{{key}}"> {{value}}</span>
                                            {% elif key == 'issues' %}
                                                <span class="fa fa-bug issues" id="issues"> issues</span>
                                            {% elif key == 'updated_on' %}
                                                <span id="updateOn" class="fa fa-calendar-o "> {{value}} </span>
                                            {% endif %}

                                        {% endif %}
                                        {% if value is mapping  %}
                                            {% if key == 'attackProccess' %}
                                            <span id="attackProccess" class="fa fa-sitemap"> {{key}} </span>
                                            {% elif key == 'data' %}
                                            <span id="data" class="fa fa-database">  data </span>
                                            {% else %}
                                            <span id="{{key}}" class="fa fa-minus-circle"> {{key}} </span>
                                            {% endif %}
                                            <ul id="ul-attack-items">
                                                {{ loop(value.items())}}
                                            </ul>
                                        {% endif %}
                                    </li>
                                    {% endif %}
                                {% endfor %}
                            </ul>
                        </li>
                        {% endfor %}
                    </ul>
                </li>
            </ul>
        </div>

this is the jquery part:

// empty string to save the result
    var dataList = "";

    // find all li elements within the element with the id list
    var $entries = $("#treeList").find('span');

    // iterate through all these items, with i as index and item itself as entry
    $entries.each(function(i, entry) {

        // append the elements id attribute and its content to the string, like: item_1=Item1 for <li id="item_1">Item1</li>
        dataList += ' '+$(entry).attr('id') + ':' + $(entry).text();

        // add & to the string, if the entry is not the last one
        if (i != $entries.length-1) {
            dataList += '';
        }
        dataList = dataList.replace(/(\r\n|\n|\r)/gm,"");

and this is the model i want:

{
"_id" : "aa:dd:ff:ff:cc:ac",
"account" : "iphonex@gmail.com",
"name" : "Iphone X",
"reports" : [ 
    {
        "updated_on" : "2017-11-27",
        "_id" : "iOS 11.1",
        "attackProccess" : {
            "item1" : {
                "status" : "todo"
            },
            "item2" : {
                "status" : "todo"
            },
            "item3" : {
                "status" : "todo"
            },
            "item4" : {
                "status" : "todo"
            },
            "item5" : {
                "status" : "todo"
            },
            "item6" : {
                "status" : "todo"
            }
        },
        "issues" : [],
        "data" : {
            "files" : {
                "status" : "todo"
            },
            "chats" : {
                "viber" : {
                    "status" : "todo"
                },
                "facebook" : {
                    "status" : "todo"
                },
                "instagram" : {
                    "status" : "todo"
                },
                "twitter" : {
                    "status" : "todo"
                },
                "skype" : {
                    "status" : "todo"
                },
                "telegram" : {
                    "status" : "todo"
                },
                "whatsapp" : {
                    "status" : "todo"
                },
                "line" : {
                    "status" : "todo"
                }
            },
            "sms" : {
                "status" : "todo"
            },
            "app_list" : {
                "status" : "todo"
            },
            "telegram" : {
                "status" : "todo"
            },
            "downloads" : {
                "status" : "todo"
            },
            "locations" : {
                "status" : "todo"
            },
            "catchapp" : {
                "status" : "todo"
            },
            "bookmarks" : {
                "status" : "todo"
            },
            "calendar" : {
                "status" : "todo"
            },
            "contacts" : {
                "status" : "todo"
            },
            "media" : {
                "status" : "todo"
            },
            "notes" : {
                "status" : "todo"
            },
            "posts" : {
                "status" : "todo"
            },
            "call_history" : {
                "status" : "todo"
            }
        }
    }
]

}

It would be a little more helpful if you could show us the HTML output instead of the template spaghetti, and also an example of the object format you're trying to create — Rory McCrossan, Nov 27 '17 at 14:46
i found that the html output is not correct but i add the model i want. — Matan Tubul, Nov 27 '17 at 14:59
what do you mean the HTML is not correct? That implies your template is not correct, then. How can we suggest code to make the correct JSON output if the HTML (i.e. the input) is incorrect. Rory means show the HTML which is finally rendered to your page, rather than your template code. Your script acts on the final rendered HTML. This is the "input" to your function. Your template creates HTML based on some other inputs which we can't see, and are not really interested in. The actual real HTML which gets created from that is what we need to see. — ADyson, Nov 27 '17 at 15:34

score -2 · Accepted Answer · answered Dec 18 '17 at 09:55

I finally solved it using the following code:

$('#saveReport').click(function() {
    $('#processing-modal').modal('show');
    setTimeout(function(){
        $('#processing-modal').modal('hide');
    }, 10000);
    var reportToJson = {};
    var mapkeyToDepth = {};
    $('ul.treeList').each(function(i, ul) {
        $(ul).find("li").each(function(j,li){
            // Now you can use $(ul) and $(li) to refer to the list and item
            var value = $($(li).children("span")).text();
            var key = ($($(li).children("span")).attr('id'));
            var reportDepth = $($(li).children("span")).parents('li').length;
            // console.log(li);
            if ($(li).hasClass('parent_li') ) {
                setReportValKey(reportToJson, mapkeyToDepth, key, null,reportDepth)

            } else {
                if (typeof key == "undefined") {
                    var key = ($($(li).children("span")).attr('class'));
                }
                if ($($(li).children("span")).hasClass('span_issue_url')) {
                    console.log(reportDepth)
                    value = $($(li).children("span")).attr('title');
                    key =   ($($(li).children("span")).find('a:first').attr('href')).split("https://")[1]

                    console.log(key)
                    console.log(value)
                }
                if ($($(li).children("span")).hasClass('add_issues')) {
                    return true;
                }

                setReportValKey(reportToJson, mapkeyToDepth, key, value,reportDepth);
            }
        });
    });

    if (reportToJson) {
        $.ajax({
            url:'/updateReportDocument',
            data:JSON.stringify({'report':reportToJson,
                'mac':$('.macAddress').text(),
                'attack':djangoData['name']}),
            dataType: 'json',
            contentType: 'application/json',
            type:'POST',
            success: function(response){
                $('#processing-modal').modal('hide');
                if(response.hasOwnProperty('error')){
                    console.log(response);
                }else{
                    location.reload();
                }
            },
            error: function(error){
                $('#processing-modal').modal('hide');
                console.log(error);
            }
        });
    }
});

how to parse a tree into JSON object with jQuery

1 Answers1