Embedded JSON data automatically writes back HTML webpages

Embedded JSON data automatically writes back HTML webpages

This article introduces the solution and technical implementation code for parsing JSON nested strings from MongoDB and displaying data content based on custom attributes of HTML interface elements.

HTML Web Page Definition

Form display data write-back test JavaScript

This is an example of form data parsing.

Name:
You can use the custom attribute "fieldtype" to define the data type.

Test and display form data

Title:
Age:
For a multi-row sub-form, the field attribute is defined as "subid". The form is defined by the data field attribute and identifies a sub-table. The attribute is "subtable", which defines the number of columns separately, and the others remain unchanged.

Data name	Data Type	Value

End mark:

Note: The form definition rules are as follows:
(1) display page data with Label;
(2) In label, the custom attribute "fieldid" is defined. If it is a table, the custom attribute is "subid ";
(3) Add the custom attribute subtable In the table element. The attribute value is the number of columns in the table.

When designing the page, the definition of multiple child forms must be designed according to the rules. The requirements are as follows:

A header row is required. A data row is defined in advance.

This usage must be <〈! DOCTYPE> Declaration, all browsers support <〈! DOCTYPE> declaration.
Definition and usage:

<〈! The DOCTYPE> Declaration must be the first line of the HTML document, before the

Tip: always add a declaration to the HTML document so that the browser can learn the document type.

JavaScript code

<Script> // insert a row of function insertRow () {var dytb_id = 'dynamictable'; var dy_row_num = document. getElementById (dytb_id ). rows. length; // obtain the second row of cells in the table var dy_row = document. getElementById (dytb_id ). rows [1]. cells; // At the end of the table, append a line var dytb = document. getElementById (dytb_id ). insertRow (dy_row_num); for (I = 0; I
  

The JSON data content and format are as follows:

{Name: Test JSON, title: Test title, subtable: [{fieldid: Data name a, fieldtype: string}, {fieldid: Data name B, fieldtype: number }, {fieldid: Data name c, fieldtype: datetime}], flag: Test ended !}

According to the system design, this JSON data is obtained 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 lable on the HTML webpage.

The following sequence diagram shows the simple principle of processing JSON data. The process and content of reading MongoDB databases are omitted.

Created with Rapha rjl 2.1.2 Browser Browser HTML page HTML page JS Functions JS Functions MongoDB MongoDB JSON object JSON object Design page, custom attributes () Get JSON data () Reading BSON data () Traversing HTML interface elements () Parse (JSON string) Obtain the JSON object value by the interface element key value ()

Note: JSON is supported in the following document modes: Internet Explorer 8 standard mode, Internet Explorer 9 standard mode, Internet Explorer 10 standard mode, and Internet Explorer 11 standard mode. It is also supported in App Store applications (Windows 8 and Windows Phone 8.1.
Not supported in the following document modes: Quirks, Internet Explorer 6 standard mode, Internet Explorer 7 standard mode.