javascript - 单击保存按钮后，使用 jQuery 从输入创建 JSON

Question

我对使用 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 生成的元素以及使用管理面板后添加的元素。

示例:

<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 - 现在我很困惑，我不知道如何正确创建新对象。

我请求您帮助构建对象，并在单击保存按钮后更改变量。

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

谢谢幻想

Answer 1

我认为您需要的是JSON.stringify()。您可以使用它从输入生成 json 字符串，并用它做任何您想做的事情。

这个例子有点困惑，但我正在工作:)

	(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));
	  });
	})();

<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>