'how to create elements dynamically in HTML using JSON file

I want to create HTML elements dynamically using JSON file.

{"myObject": {
"JAVA": {
    "id": "JAVAsubj",
    "path": "json/data.json"
},
"C#": { 
    "id": "JAVAsubj",
    "path": "json/data1.json"
},
"C++": {
   "id": "JAVAsubj",
    "path": "json/data2.json"
}
}
}

This is my JSON file. i want to create HTML buttons dynamically. Buttons should be create like JAVA,C#,C++. if i add something next to C++ then that button should get created dynamically

javascriptjqueryjsonhtmltwitter-bootstrap


Solution 1:[1]

You can try something like this FIDDLE

however, i changed the myObject to an array of json objects as follows:

var jsonObj = {"myObject":
 [
    {
     title: 'JAVA',
     id: "JAVAsubj",
     path: "json/data.json"
    },
    { 
    title: "C#",
    id: "JAVAsubj",
    path: "json/data1.json"
    },
    {
    title: "C++",
    id: "JAVAsubj",
    path: "json/data2.json"
    }
  ]
}


var count = Object.keys(jsonObj.myObject).length;
var container= document.getElementById('buttons'); // reference to containing elm
for(var i=0;i<count;i++){
var obj= jsonObj.myObject[i];
var button = "<input type='button' value="+obj.title+"></input>"
container.innerHTML+=button;
}

Solution 2:[2]

First thing you need to do that get your JSON into js object :

var myJSON= {"myObject": {
"JAVA": {
    "id": "JAVAsubj",
    "path": "json/data.json"
},
"C#": { 
    "id": "JAVAsubj",
    "path": "json/data1.json"
},
"C++": {
   "id": "JAVAsubj",
    "path": "json/data2.json"
}
}
}

now get the value of your object into dictionary like below :

var dctLanguages = myJSON["myObject"];

now to render buttons dynamically, just do this :

var strHTML = '';

for (var key in dctLanguages)
{
   var language = dctLanguages[key];
   strHTML += '<input type="button" id="'+language.id+'" value="'+key+'"/>';
}

and append this HTML into your container div as follows :

$(strHTML).appendTo("#container");

Hope this will work for you..

Solution 3:[3]

const info = [
    {
        "id": 1,
        "img": "a.jpg",
        "name": "Avinash Mehta",
        "desc": "I am Web Developer"
       
    },
    {
        "id": 2,
        "img": "c.jpg",
        "name": "Avinash",
        "desc": "I am Web"
       
    },
    {
        "id": 3,
        "img": "b.jpg",
        "name": "Mehta",
        "desc": "I am Developer"
       
    },
    
]
const main = document.querySelector(".main");

window.addEventListener("DOMContentLoaded", function(){
    let displayInfo = info.map(function(profile){

        return` <div class="profile">
        <img src="${profile.img}" alt="">
        <h2>${profile.name}</h2>
        <p>${profile.desc}</p>
    </div>`
    });
    displayInfo = displayInfo.join("");
    main.innerHTML = displayInfo
})

Solution 4:[4]

This shoule help you

const info = [
    {
        "id": 1,
        "img": "a.jpg",
        "name": "Avinash Mehta",
        "desc": "I am Web Developer"
       
    },
    {
        "id": 2,
        "img": "c.jpg",
        "name": "Avinash",
        "desc": "I am Web"
       
    },
    {
        "id": 3,
        "img": "b.jpg",
        "name": "Mehta",
        "desc": "I am Developer"
       
    },
    
]
const main = document.querySelector(".main");

window.addEventListener("DOMContentLoaded", function(){
    let displayInfo = info.map(function(profile){

        return` <div class="profile">
        <img src="${profile.img}" alt="">
        <h2>${profile.name}</h2>
        <p>${profile.desc}</p>
    </div>`
    });
    displayInfo = displayInfo.join("");
    main.innerHTML = displayInfo
})

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 T J
Solution 2 Arpit Jain
Solution 3 Jakub Kurdziel
Solution 4 Jakub Kurdziel

Related Questions