How to print dynamic array content at different positions in HTML5

I need to get data from a PHP web service in an array and then display it on an HTML page using JavaScript. For this, I used a loop for. But he does not give the correct conclusion. Due to the innerHTMLoutput will be 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");
        }
    }
}
+3
source share
1 answer

Although I do not understand why it was used here pop_array, but I assume that you are trying to display the information categoryas a tag li.

You should install category.innerHTMLinstead 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);
    }
}
0
source

All Articles