Question

我正在尝试找到一种将动态JSON对象转换为有效HTML网页的方法。我们的想法是能够将需要从物联网设备显示的内容推送到云中，并让用户能够输入和保存配置。

json看起来像这样

{
  "loginConfiguration": {
    "username": "string",
    "password": "string",
    "hostname": "string"
  },
  "systemConfiguration": {
    "numberOfEvents": "int"
  }
}

理想的输出是3个文本框，在一个名为loginConfiguration的部分下有字符串输入，然后是另一个带有1个整数输入的部分。但请注意，json对象会有所不同，应该可以适应它。

我对技术堆栈持开放态度，但javascript / jQuery似乎最有可能。如果您有像Dart这样的替代方案，那么请说明如何实现这一目标。

Answer 1

我希望你能理解我的代码，并且我已经把它变得像posible一样动态，只有你需要知道的json元素才是初级对象。例如，我使用过：

var json = 
'{
    "result" : {
        "loginConfiguration" : {
            "username" : "string",
            "password" : "string",
            "hostname" : "string"
        },
        "systemConfiguration" : {
            "numberOfEvents" : "int"
        }
    }
}'

这是jsFiddle：https://jsfiddle.net/22dx9u7d/

这是jquery代码

var sectionHtml = ""
var controlHtml = ""

var data = JSON.parse(json) 


    $(data.result).each(function(index,value){ 

        //Counts how many sections there are
        var countSections = Object.keys(this).length;
        var i = 0

        //Goes through sections 
         while(i != countSections){   
         var sectionName = Object.keys(this)[i]

         sectionHtml = "<div id='"+ sectionName +"'><h1>Section:"+ sectionName +"</h1>"

            //Goes through sections
            $(data.result[Object.keys(this)[i]]).each(function (index, value) {



                //Count controls inside section
                var countControls = Object.keys(this).length
                var j = 0

                //For each control take data needed
                while(j != countControls){    
                    var controlName = Object.keys(this)[j]
                    var controlType = value[controlName] 

                        //Do your checking  for control type and generate html
                        if(controlType == 'string'){
                            sectionHtml += '<label>'+ controlName +' : </label><input type="text" id="'+ controlName +'" /><br />'
                        }else if(controlType == 'int'){
                            sectionHtml += '<label>'+ controlName +' : </label><input type="number" id="'+ controlName +'" /><br />'
                        }


                    j++
                }

            }); 
            i++

            //Close section html
            sectionHtml += "</div>"
            //Append it to html 
            $("#appendDiv").append(sectionHtml)


         }  

    })

来自JSON对象的动态UI

1 个答案: