This article introduces the solution and technical implementation code for parsing JSON nested strings from the MongoDB database and displaying data content according to custom attributes of HTML interface elements.
, add the custom attribute subtable, whose attribute value is the column of the table number. When designing the page, the definition of multi-line subforms must be designed according to rules. The requirements are as follows:
A header row is required; Define a row of data in advance. JavaScript code <script>//表单增加插入一行function insertRow(){ var dytb_id = 'dynamictable'; var dy_row_num = document.getElementById(dytb_id).rows.length; //取table中第二行单元格集合 var dy_row = document.getElementById(dytb_id).rows[1].cells; //在table末尾，追加一行 var dytb=document.getElementById(dytb_id).insertRow(dy_row_num); for (i = 0;i<dy_row.length; i++){ var dy_td = dytb.insertCell(i); dy_td.innerHTML = dy_row[i].innerHTML; } }//显示所有回写数据function showAllElem(){ var elems = document.getElementsByTagName("*"); //遍历所有元素 var ret_json = ""; //定义返回JSON数据字符串 var m = 0; //JSON嵌套子文档起点 var subcolumns = 0; //多行表单列数 var subrows = 0; //多行表单数据行数 var row_num = 0; //数据行数 ret_json = "{\"name\":\"测试JSON\",\"title\":\"测试标题\",\"subtable\":[{\"fieldid\":\"数据名称a\",\"fieldtype\":\"string\"},{\"fieldid\":\"数据名称b\",\"fieldtype\":\"number\"},{\"fieldid\":\"数据名称c\",\"fieldtype\":\"datetime\"}],\"flag\":\"测试结束！\"}"; //将 JavaScript 对象表示法 (JSON) 字符串转换为对象。 json_obj = JSON.parse(ret_json); for(var i=0;i<elems.length;i++){ if (elems[i].hasAttribute("fieldid") && !(elems[i].hasAttribute("subtable"))){ //按键值获取对象的值 var tmp_key = elems[i].getAttribute("fieldid"); alert(tmp_key); elems[i].innerText = json_obj[tmp_key]; //n++; }else{ if (elems[i].hasAttribute("subtable")){ subcolumns = elems[i].getAttribute("subtable"); var tbl_id = elems[i].id; //取表单数据行数 subrows = document.getElementById(tbl_id).rows.length - 1; //按规则取多行子表单数据 var json_obj_dim = json_obj["subtable"]; for (var j=subrows;j<json_obj_dim.length;j++){ insertRow(); } m = 0; }else{ if (elems[i].hasAttribute("subid") && (m < subcolumns)){ var tmp_key = elems[i].getAttribute("subid"); alert(tmp_key); elems[i].innerText = json_obj_dim[row_num][tmp_key]; m++; }else{ if (elems[i].hasAttribute("subid")){ //多行子表单数据换行 row_num++; var tmp_key = elems[i].getAttribute("subid"); alert(tmp_key); elems[i].innerText = json_obj_dim[row_num][tmp_key]; m = 1; } } } } } }</script> The JSON data content and format are as follows:
{"name":"测试JSON","title":"测试标题","subtable":[ {"fieldid":"数据名称a","fieldtype":"string"}, {"fieldid":"数据名称b","fieldtype":"number"}, {"fieldid":"数据名称c","fieldtype":"datetime"} ],"flag":"测试结束！"}" According to the system design, this JSON data is BSON data taken out from the MongoDB database through Webservice. The "key" of the "key-value" pair in the data corresponds to the custom attribute "fieldid" or "subid" of label on the HTML web page.
The following sequence diagram shows a concise principle of processing JSON data, in which the process and content of reading the MongoDB database are omitted.
Created with Raphaël 2.1.2 Browser Browser HTML page HTML page JS function JS function MongoDB MongoDB JSON object JSON object design page, custom attribute () Get JSON data () Read BSON data () Traverse HTML interface element () parse (JSON string) Get the value of the JSON object according to the interface element key value ()
Note: JSON is supported in the following document modes: Internet Explorer 8 standards mode, Internet Explorer 9 Standards mode, Internet Explorer 10 Standards mode, Internet Explorer 11 Standards mode. Also supported in Store apps (Windows 8 and Windows Phone 8.1).
Not supported in the following document modes: Quirks, Internet Explorer 6 Standards Mode, Internet Explorer 7 Standards Mode.
Reference:
Web form document design and technical implementation Xiao Yongwei 2015.5
JavaScript traverses HTML form elements and form definition Xiao Yongwei 2015.5
W3School provides content: http://www.w3school.com. cn/jsref/dom_obj_document.asp
Provided by Microsoft: JSON.parse function (JavaScript)
