how to create elements dynamically in HTML using JSON file

Question

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

It would be helpful if you would provide your expected HTML output for this JSON (in actual HTML, not just a description). — Two-Bit Alchemist
– Two-Bit Alchemist, Commented Mar 12, 2014 at 5:16
@RajaprabhuAravindasamy i Have not tried, i am not getting how to do it. — User1038
– User1038, Commented Mar 12, 2014 at 5:20
In plain javascript, start with document.createElement() and .appendChild(). Both are fully documented on MDN. You really ought to show that you tried something and did some research. — jfriend00
– jfriend00, Commented Mar 12, 2014 at 5:21
@Two-BitAlchemist <input type="button" name="java" value="json/data.json"> i want to create button like this format where value of button is path in JSON file — User1038
– User1038, Commented Mar 12, 2014 at 5:21
@Phoenix - put your question clarifications (like the desired HTML output) into the actual question (use the edit link) so people reading the question can understand better. — jfriend00
– jfriend00, Commented Mar 12, 2014 at 5:22

T J · Accepted Answer · 2014-03-12 06:03:19Z

4

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;
}

answered Mar 12, 2014 at 6:03

T J

43.2k13 gold badges87 silver badges142 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Arpit Jain · Accepted Answer · 2014-03-12 06:29:58Z

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..

Jakub Kurdziel · Accepted Answer · 2022-04-27 22:10:26Z

0

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
})

edited Apr 27, 2022 at 22:10

Jakub Kurdziel

3,7702 gold badges15 silver badges23 bronze badges

answered Apr 23, 2022 at 8:06

Magician

1

Comments

Jakub Kurdziel · Accepted Answer · 2022-04-28 10:34:00Z

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
})

Collectives™ on Stack Overflow

how to create elements dynamically in HTML using JSON file

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related