我如何從JSON對象轉換為元素的形式？

Question

我有一個JSON對象為{a: 1, b: 2, c: [4, 5, 6], d: {x: 7, y: 8, z: [9, 0]}} ，我該如何轉換它是一種形式的元素？

我想轉換成這個：

<input type="hidden" name="obj[a]" value="1"/>
<input type="hidden" name="obj[b]" value="2"/>
<input type="hidden" name="obj[c][]" value="4"/>
<input type="hidden" name="obj[c][]" value="5"/>
<input type="hidden" name="obj[c][]" value="6"/>
<input type="hidden" name="obj[d][x]" value="7"/>
<input type="hidden" name="obj[d][y]" value="8"/>
<input type="hidden" name="obj[d][z][]" value="9"/>
<input type="hidden" name="obj[d][z][]" value="0"/>

有任何想法嗎？

Answer 1

這些應該這樣做：

用jQuery

var obj = { a: 1, b: 2, c: [4, 5, 6], d: { x: 7, y: 8, z: [9, 0] } };

function analyzer(o, trail) {
    if (!trail) trail = 'obj';
    for (var n in o) {
        var el = $('<input>', { type: 'hidden' });
        el.attr('name', trail + '[' + n + ']');
        if (typeof o[n] === 'number') {
            el.attr('value', o[n]);
            $('body').append(el);
        } else if (Array.isArray(o[n])) {
            el.attr('name',function(i,v) { return v + '[]'; });
            for (var i = 0; i < o[n].length; ++i) {
                el.clone().attr('value', o[n][i] ).appendTo('body');
            }
        } else {
            analyzer(o[n], trail + '[' + n + ']');
        }
    }
}
analyzer(obj);

JSFIDDLE DEMO

僅供參考，您可以在MDN上找到Array.isArray的兼容性補丁。

或者你可以使用jQuery.isArray()代替。

---

jQuery重做了

你可能會喜歡這個。 它不會創建一個元素，然后在Array循環中克隆它，而是使用一些冗余代碼來創建元素。

function analyzer(o, trail) {
    if (!trail) trail = 'obj';
    for (var n in o) {
        if (typeof o[n] === 'number') {
            $('<input>', { type: 'hidden', name: trail + '[' + n + ']', value: o[n] })
                .appendTo( 'body' );
        } else if (Array.isArray(o[n])) {
            for (var i = 0; i < o[n].length; ++i) {
                $('<input>', { type: 'hidden', name: trail + '[' + n + '][]', value: o[n][i] })
                    .appendTo( 'body' );
            }
        } else {
            analyzer(o[n], trail + '[' + n + ']');
        }
    }
}

JSFIDDLE DEMO

---

使用原生DOM API

如果您遇到任何性能問題，請使用本機API，並緩存DOM選擇。

function analyzer(o, trail) {
    var el;
    if (!trail) trail = 'obj';
    for (var n in o) {
        if (typeof o[n] === 'number') {
            el = document.createElement('input');
            el.type = 'hidden';
            el.name = trail + '[' + n + ']';
            el.value = o[n];
            container.appendChild( el );
        } else if (Array.isArray(o[n])) {
            for (var i = 0; i < o[n].length; ++i) {
                el = document.createElement('input');
                el.type = 'hidden';
                el.name = trail + '[' + n + '][]';
                el.value = o[n][i];
                container.appendChild( el );
            }
        } else {
            analyzer(o[n], trail + '[' + n + ']');
        }
    }
}

JSFIDDLE DEMO

不需要更多代碼，應該在所有通常支持的瀏覽器中工作，並且應該非常快。

---

原生API重新縮短以縮短

function analyzer(o, trail) {
    var el;
    if (!trail) trail = 'obj';
    for (var n in o) {
        (el = document.createElement('input')).type = 'hidden';
        el.name = trail + '[' + n + ']';
        if (typeof o[n] === 'number') {
            container.appendChild( el ).value = o[n];
        } else if (Array.isArray(o[n])) {
            el.name += '[]';
            for (var i = 0; i < o[n].length; ++i) {
                container.appendChild( el.cloneNode(false) ).value = o[n][i];
            }
        } else {
            analyzer(o[n], trail + '[' + n + ']');
        }
    }
}

JSFIDDLE DEMO

Answer 2

快速回復 -

創建一個循環遍歷對象的函數。 使用for in循環創建一個字符串以連接這些輸入。 測試為每個對象找到的值是否包含primitive value ， array或對象。

例如Object.prototype.toString.call(val) === '[object Object]';

如果是，則遞歸調用該函數以從所述找到的object / array提取值

Answer 3

這里沒有給出用於創建HTML的代碼，但是它創建了一個具有兩個數組的對象。 一個包含名稱，另一個包含值。 此外，無論您嵌入物體的深度如何，這都將起作用。

Array.prototype.isArray=true;//Not sure this is the best solution, but it seems to work

function parse(a){
  var b,c,i,obj={
    name:[],
    value:[]
  };
  for(x in a){
    b=a[x];
    if(b.isArray){
      for(i=0;i<b.length;i++){
        obj.name.push('['+x+'][]');
        obj.value.push(b[i]);
      }
    }
    else if(typeof b==='object'){
      var f=x;
      var d=parse(b);
      for(i=0;i<d.name.length;i++){
        d.name[i]='['+f+']'+d.name[i];
      }
      console.log(d.name);
      obj.name.push.apply(obj.name, d.name);
      obj.value.push.apply(obj.value, d.value);
    }
    else{
      obj.name.push('['+x+']');
      obj.value.push(b);
    }
  }
  return obj;
}
console.log(parse({a: 1, b: 2, c: [4, 5, 6], d: {x: 7, y: 8, z: [9, 0]}}));