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

Posted 2023-02-22

【中文标题】如何使用 JSON 文件在 HTML 中动态创建元素

【英文标题】：how to create elements dynamically in HTML using JSON file

【发布时间】：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 输出）放入实际问题中（使用编辑链接），以便阅读问题的人能够更好地理解。

【参考方案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");

希望这对你有用..