Question

我需要使用name - value创建动态隐藏的元素来存储json对象。

对于此输入：

json_structure = {
    'var_1':'value_1',
    'var_2': {
        'var_2_1':'value_2_1',
        'var_2_2':'value_2_2'
    },
    'var_3': 'value_3'
};

应该有

<input type="hidden" name="var_1" value="value_1" />
<input type="hidden" name="var_2[var_2_1]" value="value_2_1" />
<input type="hidden" name="var_2[var_2_2]" value="value_2_2" />
<input type="hidden" name="var_3" value="value_3" />

EDIT1 这是我的例子，但只适用于一个级别的对象。对于多级需要做一个递归函数来构建entyre结构。

for(var key in json_structure ) {
        if(json_structure .hasOwnProperty(key)) {
            var hiddenField = document.createElement("input");
            hiddenField.setAttribute("type", "hidden");
            hiddenField.setAttribute("name", key);
            hiddenField.setAttribute("value", json_structure [key]);

            form.appendChild(hiddenField);
         }
    }

有没有办法在javascript或jquery函数中执行此操作才能使这个更容易？

提前谢谢！

Answer 1

您可以使用一些递归方法生成输入代码，其中使用Object.keys和Array#forEach方法迭代对象属性。

var json_structure = {
  'var_1': 'value_1',
  'var_2': {
    'var_2_1': 'value_2_1',
    'var_2_2': 'value_2_2'
  },
  'var_3': 'value_3'
};

// function forr generating input
function genInput(obj, res, prefix) {
  // get all the object keys and iterate
  Object.keys(obj).forEach(function(k) {
    // generate the name with prefix
    var name = prefix ? prefix + '[' + k + ']' : k;

    // check property value is object
    // in case its object call the function recursively
    if (typeof obj[k] == 'object')
      // skip null by checking value is truthy
      obj[k] && genInput(obj[k], res, name);

    // else generate the input and push into the output array  
    else
      res.push('<input type="hidden" name="' + name + '" value="' + obj[k] + '"/>')
  })

  // finally return the array generated
  return res;
}

console.log(
  genInput(json_structure, [])
)

为了生成DOM元素并更新你可以使用jQuery和上面的代码，或者使用纯java做类似的事情。

var json_structure = {
  'var_1': 'value_1',
  'var_2': {
    'var_2_1': 'value_2_1',
    'var_2_2': 'value_2_2'
  },
  'var_3': 'value_3'
};

function genInput(obj, form, prefix) {
  Object.keys(obj).forEach(function(k) {
    var name = prefix ? prefix + '[' + k + ']' : k;
    if (typeof obj[k] == 'object') {
      obj[k] && genInput(obj[k], form, name);
    } else {
      var hiddenField = document.createElement("input");
      hiddenField.setAttribute("type", "hidden");
      hiddenField.setAttribute("name", name);
      hiddenField.setAttribute("value", obj[k]);
      form.appendChild(hiddenField);
    }
  })
}

genInput(json_structure, document.getElementsByTagName('form')[0])

<form></form>

使用jQuery：

var json_structure = {
  'var_1': 'value_1',
  'var_2': {
    'var_2_1': 'value_2_1',
    'var_2_2': 'value_2_2'
  },
  'var_3': 'value_3'
};

// function forr generating input
function genInput(obj, res, prefix) {
  Object.keys(obj).forEach(function(k) {
    var name = prefix ? prefix + '[' + k + ']' : k;
    if (typeof obj[k] == 'object')
      obj[k] && genInput(obj[k], res, name);
    else
      res.push('<input type="hidden" name="' + name + '" value="' + obj[k] + '"/>')
  })
  return res;
}

// append the array of html string
$('form').append(genInput(json_structure, []))

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form></form>

Answer 2

在这种情况下，你实际上并不需要jQuery。

这是一个略有不同的版本。

var json_structure = {
    'var_1':'value_1',
    'var_2': {
        'var_2_1':'value_2_1',
        'var_2_2':'value_2_2'
    },
    'var_3': 'value_3'
};

function createHiddenInput(name, value) {
  var hiddenInput = document.createElement("input");
  hiddenInput.setAttribute("type", "hidden");
  hiddenInput.setAttribute("name", name);
  hiddenInput.setAttribute("value", value);
  document.body.appendChild(hiddenInput);
  console.log(hiddenInput);
}

function generateInputs(structure, prepend) {
  for (var propertyKey in structure) {
    if (structure.hasOwnProperty(propertyKey)) {
      var property = json_structure[propertyKey]
      if (typeof property === 'object') {
        generateInputs(property, propertyKey)
      } else {
        var name = prepend ? prepend + '[' + propertyKey + ']' : property;
        createHiddenInput(name, propertyKey)
      }
    }
  }
}

generateInputs(json_structure)

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
</head>
<body>
</body>
</html>

将json对象结构转换为html输入元素

2 个答案: