转换JSON形式并渲染为HTML

Question

我正在开发一个保存并显示的表单生成器，目前已卡住。 我对JSON的概念完全陌生，但是我希望将以下代码呈现为html形式（仅作为示例）

[{"type":"text","label":"Test","req":1},{"type":"textarea","label":"123456789","req":0},{"type":"select","label":"example","req":0,"choices":[{"label":"1","sel":0},{"label":"2","sel":0},{"label":"3","sel":0}]}]

任何帮助将不胜感激。 我在网上看到的大多数示例都是针对提交后的json数据，而不是显示实际表单

Answer 1

您必须编写代码来解析json对象，如下所示：

function buttonclick() {
  var jsonvalue = [{"type":"text","label":"Test","req":1},{"type":"textarea","label":"123456789","req":0}];
  var htmlstring ="";

  for(var i=0; i<jsonvalue.length; i++)
  {
      htmlstring+= "<input type=\"" + jsonvalue[i].type + "\" name=\"" + jsonvalue[i].label + "\" />";
  }
  alert (htmlstring);
}

Answer 2

这将为您工作。 我创建了一个遍历对象数组的函数。 我通过switch语句运行字段类型，当找到该类型时，它将创建该输入类型。

我还为select选项创建了一个函数，以使forEach循环解耦。 它使阅读和维护变得更加容易。

    var formData = [{"type":"text","label":"Test","req":1},{"type":"textarea","label":"123456789","req":0},{"type":"select","label":"example","req":0,"choices":[{"label":"1","sel":0},{"label":"2","sel":0},{"label":"3","sel":0}]}];


    createForm(formData);

    function createForm(arr){
        var $formTmp = $('<form></form>');

        arr.forEach( function(obj, idx) {
            var $fieldSet,
                $selctOpts = $('<select name=""></select>'),
                inputType = obj.type; 

            switch (inputType){
                case 'text':
                    $fieldSet = $('<label for="">'+obj.label+'</label>');

                    if ( obj.req === 1) {
                        $fieldSet.append('<input type="text" required>');
                    } else {
                        $fieldSet.append('<input type="text">');
                    }
                    $formTmp.append($fieldSet, '<br />');
                    break;
                case 'textarea':
                    $fieldSet = $('<label for="">'+obj.label+'</label><br /><textarea rows="4" cols="50"></textarea>');
                    $formTmp.append($fieldSet, '<br />');
                    break;
                case 'select':
                    $fieldSet = $('<label for=""></label>').text(obj.label);
                    addOptions($selctOpts, obj.choices);                    
                    $formTmp.append($fieldSet, $selctOpts, '<br />');
                    break;
                default:
                    alert('There was no input type found.');
                    break;
            }               
        });

        // render to body.
        $('body').append($formTmp);


        // Loop for the select options.
        function addOptions(elem, arr){
            arr.forEach(function(obj){
                elem.append('<option value="'+obj.sec+'">'+obj.label+'</option>');              
            });
        }
    }