วัน: 26 ธันวาคม 2015

javascript: string to JSON.parse()javascript: string to JSON.parse()

2015-12-262015-12-26| phunsanitphunsanit| 0 Comment | 07:00

หลังจากใช้ MySQL: return json format กันเป็นแล้วเรามาลองใช้กับ joget แทนที่จะต้องไปเขียน BeanShell ให้ยุ่งยาก (พลาดง่าย ๆ อีกตะหาก) ดูจริง ๆ แล้วสามารถใช้กับหน้าเว็บทั้งหมดไม่ใช่แค่ joGet เพราะมันคือ javascript พื้นฐาน

เปิดฟอร์มที่ต้องการมา

  1. สร้าง section ขึ้นมา โดยกำหนด Load Binder เป็น JDBC Binder และ SQL SELECT Query ใส่ query ที่ต้องการ เช่น
    Load Binder for optionsList
    SELECT CONCAT ('[', GROUP_CONCAT (JSON_OBJECT ('label', name, 'value', appId)) , ']') AS optionsList FROM jwdb.app_app ORDER BY name ASC
  2. ลาก Hidden Field มาตั้ง id เป็น optionsList ใน section ที่สร้างไว้
  3. เขียน javascript ดึงค่ามาจาก string json ที่เก็บไว้ใน input ชื่อ optionsList โดยใช้ JSON.parse () เผื่อความปลอดภัย ควรใช้ JSON.parse () ใน try catch เพราะว่าถ้า json ที่ได้ผิดปกติจะสามารถควบคุมได้ ลาก Custom HTML มาแล้วใส่ codeJSON.parse () example
    <table class="table table-striped" id="tableA"> <thead> <tr> <th scope="col" style="width:20px;">#</th> <th scope="col">Name</th> <th scope="col">Value</th> </tr> </thead> <tbody></tbody>
</table>
<script>
$ (document) .ready (function () { let html = new Array () ; let no = 0; let optionsList = $ ('#optionsList') ; try { let temp = JSON.parse (optionsList.val ()) ; if (temp.length > 0) { $.each (temp, function (index, value) { no++; html.push ('<tr><th scope="row">' + no + '</th><td>' + value.label + '</td><td>' + value.value + '</td><tr>') ; }) ; } if (html.length == 0) { html = '<tr><th scope="row">-</th><td>-</td><td>-</td><tr>'; } else { html = html.join ("\n") ; } } catch (e) { console.log (e.message) ; html = '<h1>Error!!</h1> - Untitled-1:29'; } $ ('#tableA > tbody') .html (html) ;
}) ;
</script>

สามารถ copy form ตัวอย่างได้จาก json
Form:JSON Parse

{ "className": "org.joget.apps.form.model.Form", "properties": { "noPermissionMessage": "", "loadBinder": { "className": "org.joget.apps.form.lib.WorkflowFormBinder", "properties": {} }, "name": "JSON Parse", "description": "", "postProcessorRunOn": "both", "permission": { "className": "", "properties": {} }, "id": "JSONParse", "postProcessor": { "className": "", "properties": {} }, "storeBinder": { "className": "org.joget.apps.form.lib.WorkflowFormBinder", "properties": {} }, "tableName": "prototypes" }, "elements": [ { "elements": [ { "elements": [ { "className": "org.joget.apps.form.lib.HiddenField", "properties": { "useDefaultWhenEmpty": "", "workflowVariable": "", "id": "optionsList", "value": "" } } ], "className": "org.joget.apps.form.model.Column", "properties": { "width": "100%" } } ], "className": "org.joget.apps.form.model.Section", "properties": { "readonly": "", "loadBinder": { "className": "org.joget.plugin.enterprise.JdbcLoadBinder", "properties": { "jdbcDatasource": "default", "sql": "SELECT \n CONCAT ('[',\n GROUP_CONCAT (JSON_OBJECT ('label', name, 'value', appId)) ,\n ']') AS optionsList\nFROM\n jwdb.app_app\nORDER BY name ASC" } }, "permissionReadonly": "", "permission": { "className": "", "properties": {} }, "comment": "", "id": "section1", "label": "", "storeBinder": { "className": "", "properties": {} }, "readonlyLabel": "" } }, { "elements": [ { "elements": [ { "className": "org.joget.apps.form.lib.CustomHTML", "properties": { "autoPopulate": "", "id": "field2", "label": "", "value": "<table class=\"table table-striped\" id=\"tableA\">\n <thead>\n <tr>\n <th scope=\"col\" style=\"width:20px;\">#</th>\n <th scope=\"col\">Name</th>\n <th scope=\"col\">Value</th>\n </tr>\n </thead>\n <tbody>\n </tbody>\n</table>\n<script>\n $ (document) .ready (function () {\n\n let html = new Array () ;\n let no = 0;\n let optionsList = $ ('#optionsList') ;\n try {\n let temp = JSON.parse (optionsList.val ()) ;\n\n if (temp.length > 0) {\n $.each (temp, function (index, value) {\n no++;\n html.push ('<tr><th scope=\"row\">' + no + '</th><td>' + value.label + '</td><td>' + value.value + '</td><tr>') ;\n }) ;\n }\n if (html.length == 0) {\n html = '<tr><th scope=\"row\">-</th><td>-</td><td>-</td><tr>';\n } else {\n html = html.join (\"\\n\") ;\n }\n } catch (e) {\n console.log (e.message) ;\n html = '<h1>Error!!</h1>';\n }\n $ ('#tableA > tbody') .html (html) ;\n\n }) ;\n</script>" } } ], "className": "org.joget.apps.form.model.Column", "properties": { "width": "100%" } } ], "className": "org.joget.apps.form.model.Section", "properties": { "readonly": "", "loadBinder": { "className": "", "properties": {} }, "permissionReadonly": "", "permission": { "className": "", "properties": {} }, "comment": "", "id": "section2", "label": "Options List", "storeBinder": { "className": "", "properties": {} }, "readonlyLabel": "" } } ]
}
Read MoreRead More