如何使用 JSON 文件在 HTML 中动态创建元素答案

【问题标题】：how to create elements dynamically in HTML using JSON file如何使用 JSON 文件在 HTML 中动态创建元素
【发布时间】：2014-04-16 01:24:44
【问题描述】：

我想使用 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++ 旁边添加一些东西，那么应该动态创建该按钮

【问题讨论】：

如果您为此 JSON 提供预期的 HTML 输出（在实际的 HTML 中，而不仅仅是描述），将会很有帮助。
@RajaprabhuAravindasamy 我没试过，我不知道怎么做。
在纯 JavaScript 中，以 document.createElement() 和 .appendChild() 开头。两者都在MDN 上有完整记录。你真的应该表明你尝试了一些东西并做了一些研究。
@Two-BitAlchemist 我想创建像这种格式的按钮，其中按钮的值是 JSON 中的路径文件
@Phoenix - 将您的问题说明（如所需的 HTML 输出）放入实际问题中（使用编辑链接），以便阅读问题的人能够更好地理解。

标签： javascript jquery json html twitter-bootstrap

【解决方案1】：

你可以试试这样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;
}

【讨论】：

【解决方案2】：

您需要做的第一件事就是将您的 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");

希望这对你有用..

【讨论】：