javascript - 从 JSON 传递空值？

标签 javascript jquery json

我正在使用 Github Gists 在这里保存我的代码。但是，如果编辑器为空，则无法保存，因此我使用三元/条件运算符来检查它是否有值；如果它确实将其保存为要点并且它不移动到下一个值。

不幸的是，控制台返回了:

Uncaught SyntaxError: Unexpected token (

我该如何保存具有要点值(value)的编辑器和那些不可以跳过的编辑器？

$("[data-action=save]").click(function() {
  data = {
    "description": "sample description",
    "public": true,
    "files": {
      ( !htmlEditor.getValue() ) ? "" : "index.html" : { "content": htmlEditor.getValue() },
      ( !cssEditor.getValue() )  ? "" : "index.css"  : { "content": cssEditor.getValue() },
      ( !jsEditor.getValue() )   ? "" : "index.js"   : { "content": jsEditor.getValue() },
      "README.md"       : { "content": "# readme sample" }
    }
  }

  // Post on Github via JQuery Ajax
  $.ajax({
    url: "https://api.github.com/gists",
    type: "POST",
    dataType: "json",
    data: JSON.stringify(data)
  }).success(function(e) {
    $("[data-action=saved]").text(e.html_url)
    $("[data-action=saved]").attr("href", e.html_url).attr("target", "_blank")

    // Let user view gist
    console.log("Your weave is saved!")
  }).error(function(e) {
    console.warn("Error: Could not save weave!", e)
  })
})

var delay

// Initialize CodeMirror editor
var htmlEditor = CodeMirror.fromTextArea(document.getElementById("htmlEditor"), {
  mode: "text/html",
  tabMode: "indent",
  styleActiveLine: true,
  lineNumbers: true,
  lineWrapping: true,
  autoCloseTags: true,
  foldGutter: true,
  gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"]
})
var cssEditor = CodeMirror.fromTextArea(document.getElementById("cssEditor"), {
  mode: "text/css",
  tabMode: "indent",
  styleActiveLine: true,
  lineNumbers: true,
  lineWrapping: true,
  autoCloseTags: true,
  foldGutter: true,
  gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"]
})
var jsEditor = CodeMirror.fromTextArea(document.getElementById("jsEditor"), {
  mode: "text/javascript",
  tabMode: "indent",
  styleActiveLine: true,
  lineNumbers: true,
  lineWrapping: true,
  autoCloseTags: true,
  foldGutter: true,
  gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"]
})

// Live preview
function updatePreview() {
  var previewFrame = document.getElementById("preview")
  var preview =  previewFrame.contentDocument ||  previewFrame.contentWindow.document
  preview.open()
  var htmlContent = "<st"+"yle>" + cssEditor.getValue() + "</st"+"yle>" + htmlEditor.getValue() + "<scr"+"ipt>" + jsEditor.getValue() + "</scr"+"ipt>"
  preview.write(htmlContent)
  preview.close()
}
setTimeout(updatePreview, 300)

// Call live preview when code changes
htmlEditor.on("change", function() {
  clearTimeout(delay)
  delay = setTimeout(updatePreview, 300)
})
cssEditor.on("change", function() {
  clearTimeout(delay)
  delay = setTimeout(updatePreview, 300)
})
jsEditor.on("change", function() {
  clearTimeout(delay)
  delay = setTimeout(updatePreview, 300)
})

// Setup Grid
$("#splitContainer, #leftSplitter, #rightSplitter").jqxSplitter({ theme: "metro" })
$("#splitContainer").jqxSplitter({
  height: "auto",
  width: "100%",
  orientation: "horizontal",
  showSplitBar: true,
  panels: [
    {
      size: "50%",
      collapsible: false
    },
    { size: "50%" }
  ]
})
$("#leftSplitter").jqxSplitter({
  height: "100%",
  width: "100%",
  orientation: "vertical",
  showSplitBar: true,
  panels: [
    {
      size: "50%",
      collapsible: false
    },
    { size: "50%" }
  ]
})
$("#rightSplitter").jqxSplitter({
  height: "100%",
  width: "100%",
  orientation: "vertical",
  showSplitBar: true,
  panels: [
    { size: "50%" },
    {
      size: "50%",
      collapsible: false
    }
  ]
})
body {
  overflow: hidden;
}

header {
  position: absolute;
  left: 0;
  right: 0;
  padding: 8px 5px;
  overflow: hidden;
}

.fl {
  float: left;
}

.fr {
  float: right;
}

.save {
  padding: 11px;
}

#splitContainer {
  position: absolute;
  top: 40px;
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff;
}

.CodeMirror {
  font-family: monospace;
  font-size: 14px;
  font-weight: normal;
  display: block;
  width: 100%;
  background: transparent;
  height: 100% !important;
}

.CodeMirror-gutters {
  height: 100% !important;
}

.lint-error {
  font-family: arial;
  font-size: 70%;
  background: #ffa;
  color: #a00;
  padding: 2px 5px 3px;
}

.lint-error-icon {
  color: white;
  background-color: red;
  font-weight: bold;
  border-radius: 50%;
  padding: 0 3px;
  margin-right: 7px;
}

.editor-container {
  width: 100%;
  height: 100%;
  background: #fff;
}
.editor-container > * {
  width: 100%;
  height: 100%;
  border: 0;
  outline: 0;
  padding: 0;
  margin: 0;
  background: transparent;
  resize: none;
}

iframe {
  width: 100%;
  height: 100%;
  border: 0;
}
<link rel="stylesheet" href="https://necolas.github.io/normalize.css/4.0.0/normalize.css">
<link rel="stylesheet" href="http://codemirror.net/lib/codemirror.css">
<link rel="stylesheet" href="http://codemirror.net/addon/fold/foldgutter.css">
<link rel="stylesheet" href="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/styles/jqx.base.css">
<link rel="stylesheet" href="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/styles/jqx.metro.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://codemirror.net/lib/codemirror.js"></script>
<script src="http://codemirror.net/mode/javascript/javascript.js"></script>
<script src="http://codemirror.net/mode/xml/xml.js"></script>
<script src="http://codemirror.net/mode/css/css.js"></script>
<script src="http://codemirror.net/mode/htmlmixed/htmlmixed.js"></script>
<script src="http://codemirror.net/addon/edit/closetag.js"></script>
<script src="http://codemirror.net/addon/edit/matchbrackets.js"></script>
<script src="http://codemirror.net/addon/selection/active-line.js"></script>
<script src="http://codemirror.net/addon/fold/foldcode.js"></script>
<script src="http://codemirror.net/addon/fold/foldgutter.js"></script>
<script src="http://codemirror.net/addon/fold/brace-fold.js"></script>
<script src="http://codemirror.net/addon/fold/xml-fold.js"></script>
<script src="http://codemirror.net/addon/fold/comment-fold.js"></script>
<script src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxcore.js"></script>
<script src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxsplitter.js"></script>

<header>
  <a href="javascript:void(0)" data-action="save" class="save">save</a>
  <a data-action="saved"></a>
</header>
<form class="fill">
  <div id="splitContainer">
    <div>
      <div id="leftSplitter">
        <div>
          <textarea id="htmlEditor"><!-- sample html --></textarea>
        </div>
        <div>
          <textarea id="cssEditor"></textarea>
        </div>
      </div>
    </div>
    <div>
      <div id="rightSplitter">
        <div>
          <textarea id="jsEditor">// sample js</textarea>
        </div>
        <div>
          <iframe id="preview" sandbox="allow-same-origin allow-scripts allow-popups allow-forms"></iframe>
        </div>
      </div>
    </div>
  </div>
</form>

最佳答案

这就是我所做的!

我把它全部放在一个 JSON 中；检查它是否有值，如果有，我将其设置为要保存的文件，如果没有值，则文件将不存在，因此不会被保存。

$("[data-action=save]").click(function() {
  var files = {}
  if (htmlEditor.getValue()) {
    files["index.html"] = htmlEditor.getValue() ? { content: htmlEditor.getValue() } : null
  }
  if (cssEditor.getValue()) {
    files["index.css"] = cssEditor.getValue() ? { content: cssEditor.getValue() } : null
  }
  if (jsEditor.getValue()) {
    files["index.js"] = jsEditor.getValue() ? { content: jsEditor.getValue() } : null
  }

  data = {
    "description": "sample description",
    "public": true,
    "files": files
  }

  // Post on Github via JQuery Ajax
  $.ajax({
    url: "https://api.github.com/gists",
    type: "POST",
    dataType: "json",
    data: JSON.stringify(data)
  }).success(function(e) {
    $("[data-action=saved]").text(e.html_url)
    $("[data-action=saved]").attr("href", e.html_url).attr("target", "_blank")

    // Let user view gist
    console.log("Your weave is saved!")
  }).error(function(e) {
    console.warn("Error: Could not save weave!", e)
  })
})

var delay

// Initialize CodeMirror editor
var htmlEditor = CodeMirror.fromTextArea(document.getElementById("htmlEditor"), {
  mode: "text/html",
  tabMode: "indent",
  styleActiveLine: true,
  lineNumbers: true,
  lineWrapping: true,
  autoCloseTags: true,
  foldGutter: true,
  gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"]
})
var cssEditor = CodeMirror.fromTextArea(document.getElementById("cssEditor"), {
  mode: "text/css",
  tabMode: "indent",
  styleActiveLine: true,
  lineNumbers: true,
  lineWrapping: true,
  autoCloseTags: true,
  foldGutter: true,
  gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"]
})
var jsEditor = CodeMirror.fromTextArea(document.getElementById("jsEditor"), {
  mode: "text/javascript",
  tabMode: "indent",
  styleActiveLine: true,
  lineNumbers: true,
  lineWrapping: true,
  autoCloseTags: true,
  foldGutter: true,
  gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"]
})

// Live preview
function updatePreview() {
  var previewFrame = document.getElementById("preview")
  var preview =  previewFrame.contentDocument ||  previewFrame.contentWindow.document
  preview.open()
  var htmlContent = "<st"+"yle>" + cssEditor.getValue() + "</st"+"yle>" + htmlEditor.getValue() + "<scr"+"ipt>" + jsEditor.getValue() + "</scr"+"ipt>"
  preview.write(htmlContent)
  preview.close()
}
setTimeout(updatePreview, 300)

// Call live preview when code changes
htmlEditor.on("change", function() {
  clearTimeout(delay)
  delay = setTimeout(updatePreview, 300)
})
cssEditor.on("change", function() {
  clearTimeout(delay)
  delay = setTimeout(updatePreview, 300)
})
jsEditor.on("change", function() {
  clearTimeout(delay)
  delay = setTimeout(updatePreview, 300)
})

// Setup Grid
$("#splitContainer, #leftSplitter, #rightSplitter").jqxSplitter({ theme: "metro" })
$("#splitContainer").jqxSplitter({
  height: "auto",
  width: "100%",
  orientation: "horizontal",
  showSplitBar: true,
  panels: [
    {
      size: "50%",
      collapsible: false
    },
    { size: "50%" }
  ]
})
$("#leftSplitter").jqxSplitter({
  height: "100%",
  width: "100%",
  orientation: "vertical",
  showSplitBar: true,
  panels: [
    {
      size: "50%",
      collapsible: false
    },
    { size: "50%" }
  ]
})
$("#rightSplitter").jqxSplitter({
  height: "100%",
  width: "100%",
  orientation: "vertical",
  showSplitBar: true,
  panels: [
    { size: "50%" },
    {
      size: "50%",
      collapsible: false
    }
  ]
})
body {
  overflow: hidden;
}

header {
  position: absolute;
  left: 0;
  right: 0;
  padding: 8px 5px;
  overflow: hidden;
}

.fl {
  float: left;
}

.fr {
  float: right;
}

.save {
  padding: 11px;
}

#splitContainer {
  position: absolute;
  top: 40px;
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff;
}

.CodeMirror {
  font-family: monospace;
  font-size: 14px;
  font-weight: normal;
  display: block;
  width: 100%;
  background: transparent;
  height: 100% !important;
}

.CodeMirror-gutters {
  height: 100% !important;
}

.lint-error {
  font-family: arial;
  font-size: 70%;
  background: #ffa;
  color: #a00;
  padding: 2px 5px 3px;
}

.lint-error-icon {
  color: white;
  background-color: red;
  font-weight: bold;
  border-radius: 50%;
  padding: 0 3px;
  margin-right: 7px;
}

.editor-container {
  width: 100%;
  height: 100%;
  background: #fff;
}
.editor-container > * {
  width: 100%;
  height: 100%;
  border: 0;
  outline: 0;
  padding: 0;
  margin: 0;
  background: transparent;
  resize: none;
}

iframe {
  width: 100%;
  height: 100%;
  border: 0;
}
<link rel="stylesheet" href="https://necolas.github.io/normalize.css/4.0.0/normalize.css">
<link rel="stylesheet" href="http://codemirror.net/lib/codemirror.css">
<link rel="stylesheet" href="http://codemirror.net/addon/fold/foldgutter.css">
<link rel="stylesheet" href="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/styles/jqx.base.css">
<link rel="stylesheet" href="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/styles/jqx.metro.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://codemirror.net/lib/codemirror.js"></script>
<script src="http://codemirror.net/mode/javascript/javascript.js"></script>
<script src="http://codemirror.net/mode/xml/xml.js"></script>
<script src="http://codemirror.net/mode/css/css.js"></script>
<script src="http://codemirror.net/mode/htmlmixed/htmlmixed.js"></script>
<script src="http://codemirror.net/addon/edit/closetag.js"></script>
<script src="http://codemirror.net/addon/edit/matchbrackets.js"></script>
<script src="http://codemirror.net/addon/selection/active-line.js"></script>
<script src="http://codemirror.net/addon/fold/foldcode.js"></script>
<script src="http://codemirror.net/addon/fold/foldgutter.js"></script>
<script src="http://codemirror.net/addon/fold/brace-fold.js"></script>
<script src="http://codemirror.net/addon/fold/xml-fold.js"></script>
<script src="http://codemirror.net/addon/fold/comment-fold.js"></script>
<script src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxcore.js"></script>
<script src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxsplitter.js"></script>

<header>
  <a href="javascript:void(0)" data-action="save" class="save">save</a>
  <a data-action="saved"></a>
</header>
<form class="fill">
  <div id="splitContainer">
    <div>
      <div id="leftSplitter">
        <div>
          <textarea id="htmlEditor"><!-- sample html --></textarea>
        </div>
        <div>
          <textarea id="cssEditor"></textarea>
        </div>
      </div>
    </div>
    <div>
      <div id="rightSplitter">
        <div>
          <textarea id="jsEditor">// sample js</textarea>
        </div>
        <div>
          <iframe id="preview" sandbox="allow-same-origin allow-scripts allow-popups allow-forms"></iframe>
        </div>
      </div>
    </div>
  </div>
</form>

关于javascript - 从 JSON 传递空值？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36299035/

上一篇：javascript - 如何检测tinymce 4中菜单何时呈现？

下一篇：javascript - 在不同 DIV 内单击时显示文本

相关文章：

javascript - 将项目添加到列表顶部并向下滚动

jquery - 卡片轮播

java - 使用列表/表中的 json 创建树

json - 如何在 Play Framework REST API 中将 json 转换为实体

javascript - RxJS 每 x 秒从数组发出值，使用该值调用函数，如果失败则重试

javascript - 如何为计算结果为 bool 值 false 的变量提供可选值？

javascript - 数组 forEach 不返回 bool 值

javascript - 如何在 blogspot 中编码 javascript？

java - 在 Java 中创建一个 JSON 对象并在 javascript/jquery 中访问它

android - JSONObject.put(string,string) 不工作

©2024 IT工具网  联系我们