javascript - how to create elements dynamically in HTML using JSON file - Stack Overflow

admin管理员组

文章数量:1289586

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

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

• javascript
• jquery
• json
• html
• twitter-bootstrap

Share Improve this question Follow edited Mar 12, 2014 at 5:27 jfriend00 708k103103 gold badges1k1k silver badges1k1k bronze badges asked Mar 12, 2014 at 5:14 User1038User1038 45533 gold badges77 silver badges1717 bronze badges 12

• 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 Commented Mar 12, 2014 at 5:16
• @RajaprabhuAravindasamy i Have not tried, i am not getting how to do it. – User1038 Commented Mar 12, 2014 at 5:20
• 1 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 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 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 Commented Mar 12, 2014 at 5:22

 |  Show 7 more ments

4 Answers 4

Sorted by: Reset to default 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;
}

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

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

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

本文标签： javascripthow to create elements dynamically in HTML using JSON fileStack Overflow