- ベストアンサー
JSONデータをフォームにセットする方法
- JSONデータをフォームにセットする方法を教えてください
- 「jQuery.val」を使用してJSONデータをフォームにセットしようとしていますが、問題が発生しています。解決策を教えてください
- JSONデータは文字列の形式で表されるため、フォームにセットする際には注意が必要です。具体的には、配列からJSONデータに変換した際に一部の文字が削除されることがあります。解決策としては、配列をJSONデータに変換する前に適切な処理を行うことです。詳細なコード例を提供します。
- re999
- お礼率61% (476/777)
- JavaScript
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
> JSONは、「ある形式に沿った文字列」という認識でいた で、 [".\/im\/1a.j",".\/im\/2.j",".\/im\/9_1.jp"] では、「はいれつ」としかおもってもらえない。 jQuery なくとも だいにゅうくらいなら かんたん。 Array.forEach とか Array.some とか Array.indexOf とかが、ひつようです。 <!DOCTYPE html> <title></title> <meta charset="UTF-8"> <h1>Test</h1> <form> <p> <input type="text" name="@hoge" value="0"> <input type="text" name="@hoge" value="0"> <input type="text" name="@hoge" value="0"> <p> <select name="@fuga" multiple> <option value="aaa" selected>aaa <option value="bbb">BBB <option value="ccc">CCC <option value="ddd">DDD </select> <select name="@fuga"> <option selected>aaa <option value="bbb">BBB <option value="ccc">CCC <option value="ddd">DDD </select> <select name="@fuga"> <option selected>aaa <option value="bbb">BBB <option value="ccc">CCC <option value="ddd">DDD </select> <select name="@fuga"> <option selected>aaa <option value="bbb">BBB <option value="ccc">CCC <option value="ddd">DDD </select> <p> <input type="checkbox" name="@piyo" value="aaa">AAA <input type="checkbox" name="@piyo" value="bbb">BBB <input type="checkbox" name="@piyo" value="ccc">CCC <p> <input type="radio" name="@babu" value="aaa">AAA <input type="radio" name="@babu" value="bbb">BBB <input type="radio" name="@babu" value="ccc">CCC </form> <script> (function () { function Controller (form) { this.form = form; } function trim (str) { return str.replace (/^\s+|\s+$/g, ''); } function Ary (nodeList) { return ('tagName' in nodeList) ? [nodeList]: Array.prototype.slice.call (nodeList, 0); } function getOptionText (option) { return trim (option.hasAttribute ('value') ? option.value: option.text); } function setOptions (opt) { var v = trim (opt.hasAttribute ('value') ? opt.value: opt.text); var r = (this instanceof Array) ? (-1 < this.indexOf (v)) : (String (this) === v); return opt.selected = r; } function setValue (e, i) { var isArray = (this instanceof Array); var value = isArray ? this[i]: this; var optval; switch (e.type) { case 'select-one' : Ary (e.options).some (setOptions, value); break//途中で中止なので some case 'select-multiple' : Ary (e.options).forEach (setOptions, value); break; case 'radio' : case 'checkbox' : optval = getOptionText (e); e.checked = (isArray) ? (-1 < this.indexOf (optval)) : (optval === String (this)); break; default : e.value = value; } } function parseSetArguments (arg) { var es = this.form.elements; if (arg instanceof Array) { Ary (es[arg[0]]).forEach (setValue, arg[1]); } else if ('object' === typeof arg) { for (var i in arg) { if (arg.hasOwnProperty (i)) { Ary (es[i]).forEach (setValue, arg[i]); } } } else { // throw new Error (); } } function setControlsValue (parm/*[name, value], [],..*/) { if (1 > arguments.length) throw new Error ('引数がない'); Ary (arguments).forEach (parseSetArguments, this); } function create (form) { if (form && 'FORM' === form.tagName) return new Controller (form); return null; } Controller.prototype.setControlsValue = setControlsValue; // Controller.create = create; this.FormController = Controller; })(); //_______________________ var f = FormController.create (document.querySelector ('form')); f.setControlsValue ({ "@hoge" : [123, 456, 789], "@fuga" : [["ddd","aaa"], "bbb", "ccc", "bbb"], "@piyo" : ["aaa", "ccc"], "@babu" : "aaa" }); </script>
お礼
回答ありがとうございました。 内容難しかったので、これから勉強していきたいと思いますー