在保存btn点击后,从输入创建带有jQuery的JSON

时间:2015-08-14 12:43:31

标签: javascript php jquery json

对于使用jQuery创建JSON的问题我很简单。

我有一个基于JSON数据的管理面板。我已经将所有JSON变量放入输入(它们正在显示)。现在我需要将它们保存回新的JSON(必须是新的)并将其导出到php API。我已经尝试了一切,并阅读了很多堆栈主题,但我没有找到答案。

这是我的问题

JSON结构的某些部分:

"sayTextColor": "0xFF000000",
 "sayFrameColor": "0xFF000000",
 "sayRandom": "true",
 "sayCount": "6",
 "sayC": [
   {
     "active": "true",
     "text": "Work hard, play hard!",
     "iconId": "43"
   },
   {
     "active": "false",
     "text": "Work hard, play hard2!",
     "iconId": "44"
   }
 ],
 "thinkTextColor": "0xFF000000",
 "thinkFrameColor": "0xFF000000",
 "thinkC": [
   {
     "active": "false",
     "text": "I'll be back"
   },
   {
     "active": "false",
     "text": "I'll be back2"
   }
 ]
}

...等

我使用的是使用JSON生成的元素以及使用admin pannel后添加的元素。

示例:

<div class="say-item c">

        <div class="c-img"></div>

        <h4>Head text</h4>
        <textarea></textarea>
        <div class="delete-btn"></div>
        <div class="activate">
            <div class="squaredchb">
                <input type="checkbox" value="None" id="activate-c" name="check"  />
                <label for="activate-c"></label>
                <p>use this element</p>
            </div>
        </div>
        <div class="preview-btn">
            <img src="images/preview_icon.png" alt="" />
            <span>Preview</span>
        </div>
      </div>
    </div>

如何从中创建JSON - 现在我很困惑,以至于我不知道如何正确创建新的对象。

我请求您在单击save btn后帮助构建变量变化的对象。

即。 {"some string key", variableFromInput }使用$.each表示不同的JSON级别。

由于 Fantazy

1 个答案:

答案 0 :(得分:0)

我认为你需要的是JSON.stringify()。 您可以使用它从输入中生成json字符串,并随意使用它。

这是一个有点混乱的例子,但我正在工作:)

&#13;
&#13;
	(function() {
	  $('#createJson').on('click', function() {
	    var all_says = [];
	    $('.say-item').each(function(key, value) {
	      var text = $(this).find('textarea').val();
	      var active = $(this).find('input[type=checkbox]').is(':checked');
	      var obj = {
	        text: text,
	        active: active
	      };
	      all_says.push(obj);
	    })
	    $('#gen').val(JSON.stringify(all_says));
	  });
	})();
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="say-item cloud">
  <textarea></textarea>
  <input type="checkbox" value="None" id="activate-a" name="check" />
</div> 
   <div class="say-item cloud">
  <textarea></textarea>
  <input type="checkbox" value="None" id="activate-b" name="check" />
</div>
<div class="say-item cloud">
  <textarea></textarea>
  <input type="checkbox" value="None" id="activate-c" name="check" />
</div>

<h2>Generated Json</h2>
<textarea id="gen"></textarea>
<button id="createJson">Create JSON</button>
&#13;
&#13;
&#13;