How to print dynamic contents of array at different positions in HTML5

Question

I have to fetch data from the PHP web service in an array and then display it on HTML page using JavaScript. I have used a for loop to do so. But it doesn’t render proper output. Due to innerHTML the output gets replaced. Please help with your suggestions. Here is my code:

function jsondata(data){
    alert("JSONdata");
    var parsedata = JSON.parse(JSON.stringify(data));
    var main_category = parsedata["main Category"];
    for (var i = 0; i <= main_category.length; i++) {
        menu = JSON.parse(JSON.stringify(main_category[i]));
        menu_id[i] = menu['mcatid'];
        menu_title[i] = menu['mcattitle'];
        menu_img[i] = menu['mcatimage'];
        pop_array.push(menu_id[i], menu_title[i], menu_img[i]);
        //alert(pop_array);
        for (var i = 0; i < main_category.length; i++) {
            alert("for start");
            var category = document.createElement("li");
            document.getElementById("mylist").appendChild(category);
            //document.getElementById("mylist").innerHTML='<table><tr><td>'+pop_array[i]+'</td></tr></table>';
            document.write(pop_array.join("<br></br>"));
            alert("for end");
        }
    }
}

Answer 1

Although I don't get why pop_array was used here but I assume that you are trying to display the category info as a li tag.

You should set category.innerHTML instead of document.getElementById("mylist").innerHTML.

function jsondata(data){
    var parsedata = JSON.parse(JSON.stringify(data));
    var main_category = parsedata["main Category"];

    for (var i = 0; i < main_category.length; i++) {
        var menu = main_category[i];
        var category = document.createElement("li");
        category.innerHTML = menu['mcattitle'];      // construct your own html here
        document.getElementById("mylist").appendChild(category);
    }
}