Rebuild html elements with the data stored in a json?

Question

Rebuild html elements with the data stored in a json?

Navigation

#1 by (0 votes)

0

I have a json object created with the tags and attributes of the html elements. Now that I have the json I want to rebuild the entire html running the json. Any suggestion would be of great help to me.

<div class='container'>
    <div id='padre'>
        <p>texto</p>
        <div id='hijo'>
            <h2>texto</h2>
            <div id='nieto'>
            </div>
            <div id='nieto2'>
            </div>
            <div id='nieto3' style='background: red;'>
                <p>texto</p>
            </div>
        </div>
    </div>
    <div id='padre'>
        <div id='hijo'>
            <p>texto</p>
        </div>
    </div>
    <div id='padre'>
        <div id='hijo'>
            <p>texto</p>
        </div>
    </div>
</div>    

<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
<script>

    var obj={};
    var body=document.body
    var element = document.body
    getAllChild(element,obj)

    console.log(obj)
    var json=JSON.stringify(obj);

    //showObject(json)

    function showObject(json){
        //convertimos en json en un objeto
        var obj = JSON.parse(json)
        console.log(obj.children)
        if(obj.children.length!=0){
            for( var i = 0; i <= obj.children.length; i++ ){
                document.body.innerHTML = obj.children[i].text
            }
        }else{
            console.log('no hijos')
        }
    }

    function getAllChild(element,obj){
        var attr = [];
        obj.tag=element.localName;
        obj.attr=attr;
        obj.name=element.name;
        obj.text = element.innerText;

        $(element.attributes).each(function(){
            var data = {'attr':this.name, 'val':this.value }
            attr.push(data)
        })

        if(element.children.length!=0){
            obj.children=[];
            [].forEach.call(element.children,(val,i)=>{
                obj.children[i]={};
                getAllChild(val,obj.children[i]);
            });
        }
    }


</script>

javascript html json dom

asked by Marcos Mauricio 23.05.2018 в 04:43

source

1 answer

Update In Excel IdentityServer4 with WebApi 4.6

score 0 · Answer 1

You could try something like this:

    function callback(req)
{
    var response = eval("("+req.responseText+")");
    response = response.response;

    createElementsFromJSON(response, document.body);
}

function createElementsFromJSON(json, parent)
{
    for(var i in json)
    {
        var object = json[i];

        var obj = document.createElement(object.element);

        for(var tag in object)
            if (tag!="children"&&tag!="element")
                obj.setAttribute(tag, object[tag]);

        parent.appendChild(obj);

        if (typeof(object.children)=="object")
            createElementsFromJSON(object.children, obj);
    }
}

For a JSON as follows:

{
    "response":
    [
        {
            "element":"div",
            "id":"james",
            "children":
            [
                {
                    "element":"h1",
                    "id":"bob",
                    "innerHTML":"bobs content",
                },
                {
                    "element":"h2",
                    "id":"rob",
                    "innerHTML":"robs content",
                },
                {
                    "element":"p",
                    "innerHTML":"some random text",
                },
            ],
        },
        {
            "element":"div",
            "id":"alex",
            "innerHTML":"this is a test message in a div box",
        },
    ]
}