Question

160

how to create elements dynamically in HTML using JSON file

rated 0 times [ 165] [ 5] / answers: 1 / hits: 9530 / 10 Years ago, wed, march 12, 2014, 12:00:00

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

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

harleedayanarar

Add To Favorites

Follow

Total Points: 303

Total Questions: 90

Total Answers: 102

Location: Virgin Islands (U.S.)

Member since Tue, Jul 7, 2020

4 Years ago

answered 10 Years ago deonkalvinw · Accepted Answer

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;

}