如何将 html 元素的 Json 对象转换为我可以使用 C# 或 js 或 jquery 在视图上呈现的实际 HTML 元素答案

【问题标题】：How to convert Json object of html element into actual HTML element that i can render on view using C# or js or jquery如何将 html 元素的 Json 对象转换为我可以使用 C# 或 js 或 jquery 在视图上呈现的实际 HTML 元素
【发布时间】：2021-01-08 13:35:55
【问题描述】：

我的要求是，我想从 DB 中获取一个 json（以 html 标签的形式）并将其转换为 html。

{"input":{
"name":"fname",
"type":"text",
"placeholder":"Enter your firstname",
"Id":"fname"
 }
}

{"button" :{
"name":"btn",
"class":"save",
"type":"submit",
"Id":"btn1",
"text":"save"
 }
}

我想把这个json转换成html标签，比如

<input type="text" id="fname" name="fname" placeholder="Enter your firstname">

<button type="submit" class="save" id="btn1" name="btn">save</button>

我怎样才能使用 c# 或 javascript 或 jquery 转换它，任何东西都会帮助我

【问题讨论】：

看看如何从后面的代码创建 html 对象：softwareengineering.stackexchange.com/questions/170258/…

标签： javascript c# html jquery json

【解决方案1】：

要解决您的问题，您需要一路循环抛出您的 json 和 createElement。


let json = {
    "input": {
        "name": "fname",
        "type": "text",
        "placeholder": "Enter your firstname",
        "id": "fname"
    },
    "button" : {
        "name": "btn",
        "class": "save",
        "type": "submit",
        "id": "btn1",
        "text": "save"
    }
}

Object.keys(json).forEach( (element) => {
    let foo = document.createElement(element)

    Object.keys(json[element]).forEach( (nestedAttribute) => {
        foo.setAttribute(nestedAttribute, json[element][nestedAttribute]);
    })
    document.body.appendChild(foo)
})

Object.keys(json) 允许您获取 json 的密钥

这样结果看起来像这样：

祝你有美好的一天！

【讨论】：