Question

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

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

Answer 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 =＆＃39;＆＃39;;

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

并将此HTML附加到容器div中，如下所示：

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

希望这对你有用..

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

2 个答案: