动态定义JSON - 无法找到我做错的事情

时间:2015-11-04 13:32:30

标签: javascript json

我正在尝试动态地将表单内容放入JSON中。 它之前有用,但是在我添加了一个额外的图层(数组中的数组)后,似乎有些东西我做错了:

aJSON = {'properties':[], 'options':[], 'arrays':[]}

前4行只是试用,我也尝试过:

sudo apt-get install libssl-dev openssl

但我得到的唯一结果是一个带有空数组属性,选项和数组的对象。

在我将所有值直接放在aJSON中并且完美运行之前。 但是对于分类,我需要存在3个类别。

知道为什么我的值没有写入aJSON吗?

修改

在此处添加了JSfiddle:http://jsfiddle.net/abayob/pob32fs1/

2 个答案:

答案 0 :(得分:1)

我假设您正在尝试序列化表单。

使用jQuery的 serializeArray 功能

var myform = $("#myform");
var data = JSON.stringify( myform.serializeArray() );

<强>更新

因为您尝试使用像arrays

这样的object-maps

解决方案: http://jsfiddle.net/pob32fs1/8/

    var oJSON = {
        properties: {},
        options: {},
        arrays: {}
    };
    $('input[name]').each(function(){  
        var $el = $(this),
            value = $el.attr("value"),
            name = $el.attr('name');
        if(name.indexOf('[]') >= 0)
        {
            oJSON.arrays[name] = oJSON.arrays[name] || {};
            oJSON.arrays[name][value] = $el.is(':checked') ? 1 : 0;            
        } else {
            oJSON.properties[name] = $el.val();
        }
    });
    $('select[name]').each(function(){
        var $el = $(this);
        oJSON.properties[$el.attr('name')] = $el.val();
    });

    oJSON.options['type'] = 'user';
    oJSON.options['id'] = 1;
    oJSON.options['view'] = 'user-settings';
    console.log(oJSON);

答案 1 :(得分:1)

假设各种输入的namevalue属性是字符串,而不仅仅是数字,您应该使用嵌套的对象,而不是嵌套数组。您正在尝试使用JavaScript中不可用的关联数组。

&#13;
&#13;
var oJSON = {};

$('._save, .btn-success').click(function() {
  oJSON = {
    properties: {},
    options: {},
    arrays: {}
  };

  $('input').each(function() {
    if ($(this).attr('name') != undefined) {
      if ($(this).attr('name').indexOf('[]') > -1) {
        if (oJSON['arrays'][$(this).attr('name')] == undefined) {
          oJSON['arrays'][$(this).attr('name')] = {};
        }
        if ($(this).is(':checked')) {
          oJSON['arrays'][$(this).attr('name')][$(this).attr('value')] = 1;
        } else {
          oJSON['arrays'][$(this).attr('name')][$(this).attr('value')] = 0;
        }
      } else {
        oJSON['properties'][$(this).attr('name')] = $(this).val();
      }
    }
  });
  $('select').each(function() {
    if ($(this).attr('name') != undefined) {
      oJSON['properties'][$(this).attr('name')] = $(this).val();
    }
  });

  oJSON['options']['type'] = 'user';
  oJSON['options']['id'] = 1;
  oJSON['options']['view'] = 'user-settings';
  console.log(oJSON);
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="tab-content">
  <div id="tab-general" class="tab-pane active">
    <h4>Gebruikersnaam</h4>

    <input type="text" value="John Doe" name="username" class="form-control" required="" placeholder="J. Average">
    <h4>E-mailadres</h4>

    <input type="email" value="info@info.info" name="mailaddress" class="form-control" required="" placeholder="E-mail@adres.nl">
    <div class="row">
      <div class="col-md-6">
        <input type="password" name="password" minlength="10" class="form-control" placeholder="Nieuw wachtwoord">
      </div>
      <div class="col-md-6">
        <input type="password" name="password_retype" minlength="10" class="form-control" placeholder="Herhaal wachtwoord">
      </div>
    </div>
    <input type="password" name="password_old" class="form-control margin-y-10" placeholder="Huidig Wachtwoord">
  </div>
  <div id="tab-sites" class="tab-pane">
    <h4>Websites</h4>

    <div id="site_container">
      <div class="checkbox block">
        <input name="sites[]" checked="" type="checkbox" value="0">
        <label>A</label>
      </div>
      <div class="checkbox block">
        <input name="sites[]" checked="" type="checkbox" value="1">
        <label>B</label>
      </div>
      <div class="checkbox block">
        <input name="sites[]" checked="" type="checkbox" value="2">
        <label>C</label>
      </div>
    </div>
  </div>
</div>
<div class="panel-footer">
  <button type="button" class="btn btn-warning _cancel">Annuleren</button>
  <button type="button" class="btn btn-success _save">Opslaan</button>
</div>
&#13;
&#13;
&#13;