如何使用JSON文件在HTML中動態創建元素

我想使用JSON文件動態創建HTML元素。如何使用JSON文件在HTML中動態創建元素

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

這是我的JSON文件。我想動態地創建HTML按鈕。按鈕應該像JAVA，C＃，C++一樣創建。如果我旁邊添加到C的東西++則該按鈕應該得到動態

來源

2014-03-12 User1038

這將是有益的，如果你會提供您預期的HTML輸出這JSON（在實際的HTML中，不只是一個描述）。 –

@RajaprabhuAravindasamy 我還沒有嘗試過，我沒有得到如何去做。 – User1038

在普通的javascript中，從'document.createElement（）'和'.appendChild（）'開始。兩者都在[MDN]（https://developer.mozilla.org/en-US/）上完整記錄。你真的應該表明你嘗試了一些東西並做了一些研究。 – jfriend00

創建但是你可以嘗試這樣的事情FIDDLE

，我改變了myObject的，以JSON對象的數組如下：

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

來源

2014-03-12 06:03:19

第一件事你需要做的是讓你的JSON轉換成JS對象：

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

現在得到你的對象的值轉換成類似字典如下：

var dctLanguages = myJSON["myObject"];

現在呈現按鈕動態，只是這樣做：

VAR strHTML中= '';

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

這個HTML添加到您的div容器如下：

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

希望這會爲你工作..

來源

2014-03-12 06:29:58

如何使用JSON文件在HTML中動態創建元素

回答

相關問題