XMLまたはJSONを作成した後にHTMLダイナミックを作成する方法

ウェブページを動的に作成する必要があります。レイアウト作成者はXMLやJSONを編集しているかのように情報を入力できます。 json。 XMLまたはJSONを作成した後にHTMLダイナミックを作成する方法

は、私がこのように、例えばAJAXを使用していくつかの例を発見し、既にHTML形式のJSONを変換するには：

$.fn.serializeObject = function() 
{ 
    var o = {}; 
    var a = this.serializeArray(); 
    $.each(a, function() { 
     if (o[this.name] !== undefined) { 
      if (!o[this.name].push) { 
       o[this.name] = [o[this.name]]; 
      } 
      o[this.name].push(this.value || ''); 
     } else { 
      o[this.name] = this.value || ''; 
     } 
    }); 
    return o; 
}; 

$(function() { 
    $('form').submit(function() { 
     $('#result').text(JSON.stringify($('form').serializeObject())); 
     return false; 
    }); 
});

しかし、それは要素がJSONとして注文することができますHTMLを作ることが可能だ場合、私は考えています。 http://minikomi.github.io/Bootstrap-Form-Builder/

疑いがある：をJSONに変換するには、これらの要素をソート

は、私はこのようなブートストラップとのダイナミックなフォームを作成する例を見つけましたか？配列がどこになるか、またはキー値セットだけがわかるか？

何かを作成することはできますか？

シナリオ：今日、開発者はシステムに情報を入力するためのJSONを作成しています。商用利用者はフレンドリーなインターフェースでJSONを知らずにこれを行うことができます。

ありがとうございます！

出典

2016-08-12 sola.carol

'$ .serializeArray（）'、すでにあなたの値を持つフォームフィールドのソートされた配列を与える、HTTPSを参照してください：// API .jquery.com/serializeArray/- 一般：配列要素は順序を保持し、オブジェクトプロパティは固定順序を持ちません。フォームをシリアル化して配列にすると、順序を確認できます。オブジェクトにシリアル化すると、プロパティの順序がランダムになります。 –

私が心配しているのは、どのような値がどのキーに属しているかを知り、例えば配列を形成することです。 { "キー"：{ "キー"：[ "値"、 "値"、 { "キー"： "値"} ] } } –

フォームが同じで複数の入力を有する場合名前の場合、値は配列になります。それが配列か文字列かどうかをチェックするには、プロパティ/値を繰り返し処理し、型をチェックします。 'typeof value === 'string''または' Array.isArray（value） 'を指定してください。 –

あなたが試みることができる：：のように見えるJSONにすることができます変換

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Test 1</title> 
<script type="text/javascript" src="jquery-1.4.min.js"></script> 

<script type="text/javascript"> 

$(document).ready(function() { 
    createTextBox('formulario','campo1','valor1'); 
}); 

function createTextBox(parent, name, value) 
{ 
    var node = '<div class="node" id="node_'+name+'">' 
       + '<input placeholder="" type="text" id="value_'+name+'" name="value_'+name+'" value="'+value+'" />' 
       + '<input placeholder="" type="text" id="value2_'+name+'" name="value2_'+name+'" value="'+value+'" />' 
       + '<input placeholder="" type="text" id="parent_'+name+'" name="parent_'+name+'" value="'+parent+'" />' 
       + '<div id="nested_'+name+'" style="padding-left: 10%;" ><a href="#" onclick="addNested(this)" >ADD NESTED</a></div>' 
       +'</div>';    

    $('#'+parent).append(node); 
    //parse2Json();     
} 

function addNested(object) 
{ 
    var name = getNewName(); 
    createTextBox(object.parentElement.id, name , name); 
} 

function getRandomName() { 
    var ret; 

    if (!Date.now) { 
     ret = function() { return new Date().getTime(); 
     } 
    } else { 
     ret = Date.now(); 
    } 

    return ret; 
} 

function getNewName() { 
    var ret = $("#count_campo").val(); 

    $("#count_campo").val(parseInt(ret)+1); 

    return ret; 
} 

function parse2Json() 
{ 
    //pegando todos os elementos node 
    $('.node').each(function(index, obj) { 

     alert("pai:"+ obj.parentElement.id); 
     alert("id:"+ obj.id); 

     alert("Campo 1: Id["+$("#"+obj.id).children(1).attr('name') +"] Value["+$("#"+obj.id).children(1).val()+"]");  
     alert("Campo 2: Id["+$("#"+obj.id).children(2).attr('name') +"] Value["+$("#"+obj.id).children(2).val()+"]"); //  IGUAL -> //var c = obj.childNodes[2].text; 

     //getting all elements inside div 
     var array = Array.prototype.slice.call(obj.childNodes); 

     array.forEach(function(objecto_filho) { 
      alert("Dentro Foreach: "+ objecto_filho.id); 
     });  

     //ou 

    }); 

} 

</script> 

</head> 

<body> 
    <input type="text" id="count_campo" name="count_campo" value="1" /> 

    <h1>Testes XML config</h1> 
    <div id="formulario"> 

    </div> 

</body> 
</html>

出典

2016-09-01 14:28:51 Vitorlui

ご注意いただきありがとうございます！ –

私が正しく理解していれば、XMLまたはJSONファイルから動的にインターフェース要素を作成する必要があります。あなたの顧客のためのすべての動的入力のためのクラスを追加することができ、HTMLからJSONコードに変換するには

//Stored elements description for dynamic creation. Value if you need to store users data from elements 
var dynamicElements = { 
    'firstName' :{ 
    'type': 'input', 
    'value': '' 
    }, 
    'lastName': { 
    'type': 'input', 
    'value': '' 
    } 
} 

for (elementId in dynamicElements) { 
    var elementDescription = dynamicElements[elementId]; 
    var element = document.createElement(elementDescription.type); 
    element.id = elementId; 

    //do smth ... append it to form or any container 
}

：可能な方法の一つは、のように見えることができます。

var inputsData = []; 

jQuery(".oneOfMyAwesomeDynamicElements").each(function(index, element) { 
    inputsData.push({ 
    'type': element.tagName, 
    'value': element.value, 
    'id': element.id 
    //all element attribute you need 
    }); 
})

出典

2016-08-12 13:49:54 Sabik

いいえ...私はその逆が必要です... JSONのようなHTMLのダイナミックレイアウトが必要です。ここでは、人がjsonの背後にある（またはXML）を作成しているかのように情報を入力できますシナリオ：今日の開発者は、システムに情報を入力するためのJSONを作成します。フレンドリーなインターフェイスでJSONを知らなくても商用利用者がこれを行うことができます。 –

ご迷惑をおかけして申し訳ありません。私は答えを更新しました。 – Sabik

XMLまたはJSONを作成した後にHTMLダイナミックを作成する方法

答えて

関連する問題