How To Output Data As Html From Json Object Using Getjson

Hello there I will try and keep this simple and short I have a getJSON function that runs every 5 seconds. Now when I display the data using document.write function it dosent seem

Solution 1:

Don't actually use document.write. Once the page is loaded, that will erase the page. Use (jQuery's) DOM methods to manipulate the DOM.

$.getJSON('names.json', function(data){
    for(var i in data){
        $('#myDiv').append(data[i]);
    }
});

Solution 2:

I would recommend you use jQuery,

I used this to create a form from my json item, I hope this helps...

functionjsonFormCreator(frmJSON)
{
    var createdHTML = ""; var elementType, id;
    console.log(JSON.stringify(frmJSON));



    for(item in frmJSON)
    {
        formElement = frmJSON[item];    elementType = formElement.elementType;  id = formElement.id;

        if(elementType == "input")
        {
            createdHTML += "<input id='" + id +"'";
            if(formElement.type == "checkbox") 
            {createdHTML += " type='" + formElement.type + "' checked='" + formElement.checked + "'";}
            else{createdHTML += "type='" + formElement.type + "' value='" + formElement.value + "' onclick='" + formElement.onclick + "'";}
            createdHTML += "/><br>"
        }
        elseif(elementType == "textarea")
        {createdHTML += "<textarea id='" + formElement.id  + "' rows='" + formElement.rows +  "' cols='" + formElement.cols + "' value='" + formElement.value + "'></textarea><br>";}
        elseif(elementType == "select")
        {
            var options = formElement.values;
            createdHTML += "<select id='" + formElement.id+ "'>";
                for(i = 0 ; i < options.length ; i++)
                {createdHTML += "<option value='" + options[i][0] + "'>" + options[i][1] + "</option>";} //Adding each option
            createdHTML+= "</select><br>";
        }
    }
    console.log("Complete");console.log(createdHTML);
    document.getElementById('mainContainer').innerHTML = createdHTML;//Adding to the DOM
}

And my JSON would look like this

{"0":{"elementType":"input","id":"frm1","type":"text","value":"form Liam","label":"Test Text Input"},"itemBTN":{"elementType":"input","id":"frmAlert","type":"button","onclick":"loader(homePage);","value":"Home Page","label":""},"item2":{"elementType":"textarea","id":"frm2","rows":5,"cols":30,"value":"helddddddddlo","label":"Test Textarea"},"item3":{"elementType":"select","id":"frm3","values":[["value1","Pick Me"],["value2","UserDis2"],["value3","UserDis3"],["value4","UserDis4"],["value5","UserDis5"],["value6","UserDis6"]],"label":"Test Select"},"item4":{"elementType":"input","id":"frm4","label":"Checkbox","type":"checkbox","checked":true}}

This code adds the form in to my div tag with the id mainContainer I know its alot of code, but i hope it helps !

Solution 3:

You want to render dom which will contain the data, then when you get the data update the dom.

As an exceedingly simple example, on your page have a container

<div id="one"></div>

and then in your ajax success handler

$("#one").text(json.one);

This uses jquery to grab the dom element with id "one", and update its text.