JSONオブジェクトの動的UI

Question

動的JSONオブジェクトを有効なHTML Webページに変換する方法を探しています。このアイデアは、IoTデバイスから表示される必要があるものをクラウドに押し上げることができ、ユーザーが設定を入力して保存できるようにすることです。

JSONはこの

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

ようになりますそして、理想的な出力は、文字列loginConfigurationというセクションの下の入力と1つの整数を入力した後、別のセクションで3つのテキストボックスになります。しかし、jsonオブジェクトは異なり、そのために対応できるはずです。

私はテクノロジスタックを公開していますが、javascript/jQueryを使用すると可能です。このために作成されたダーツのような代替品がある場合は、これをどのように達成できるかを示してください。

Answer 1

私はあなたが私のコードを理解することを望みます、そして、私はそれをポーズ可能なダイナミックなものにしました、あなたは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) 


     } 

    })