CN111435372A - Data display method and system, data editing method and system, equipment and medium - Google Patents
Data display method and system, data editing method and system, equipment and medium Download PDFInfo
- Publication number
- CN111435372A CN111435372A CN201910028402.5A CN201910028402A CN111435372A CN 111435372 A CN111435372 A CN 111435372A CN 201910028402 A CN201910028402 A CN 201910028402A CN 111435372 A CN111435372 A CN 111435372A
- Authority
- CN
- China
- Prior art keywords
- data
- node
- json
- json data
- type
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
- 238000000034 method Methods 0.000 title claims abstract description 63
- 238000004458 analytical method Methods 0.000 claims description 6
- 230000008859 change Effects 0.000 claims description 6
- 238000001514 detection method Methods 0.000 claims description 6
- 238000002910 structure generation Methods 0.000 claims description 4
- 239000003086 colorant Substances 0.000 claims description 3
- 230000000007 visual effect Effects 0.000 description 5
- 238000010586 diagram Methods 0.000 description 3
- 230000005540 biological transmission Effects 0.000 description 2
- 238000013500 data storage Methods 0.000 description 2
- 230000000694 effects Effects 0.000 description 2
- 230000002708 enhancing effect Effects 0.000 description 2
- 230000006870 function Effects 0.000 description 2
- 230000004048 modification Effects 0.000 description 2
- 238000012986 modification Methods 0.000 description 2
- 230000008569 process Effects 0.000 description 2
- 238000003491 array Methods 0.000 description 1
- 238000006243 chemical reaction Methods 0.000 description 1
- 239000003550 marker Substances 0.000 description 1
- 230000003287 optical effect Effects 0.000 description 1
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/901—Indexing; Data structures therefor; Storage structures
- G06F16/9024—Graphs; Linked lists
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/901—Indexing; Data structures therefor; Storage structures
- G06F16/9027—Trees
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/904—Browsing; Visualisation therefor
Landscapes
- Engineering & Computer Science (AREA)
- Databases & Information Systems (AREA)
- Theoretical Computer Science (AREA)
- Data Mining & Analysis (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- Software Systems (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
The embodiment of the invention provides a data display method and a system, a data editing method and a system, equipment and a medium, wherein the data display method comprises the following steps: acquiring JSON data; analyzing the obtained JSON data to obtain the grammatical meaning of the JSON data; generating a graphic structure corresponding to the JSON data according to the grammatical meaning of the JSON data; and outputting and displaying the graph structure. By adopting the data display method, the readability of JSON data can be enhanced.
Description
Technical Field
The embodiment of the invention relates to the technical field of data processing, in particular to a data display method and system, a data editing method and system, equipment and a medium.
Background
JSON (JavaScript Object Notation) is a lightweight data exchange format. It stores and represents data in a text format completely independent of the programming language, based on a subset of ECMAScript (JS specification set by the european computer association). The simple and clear hierarchical structure enables JSON to become an ideal data exchange language, is easy to read and write by people, is easy to analyze and generate by machines, and effectively improves the network transmission efficiency.
JSON is a widely used and general data format, and the data format JSON is used for storing data in many application scenes, for example, parameters of a service interface, so that JSON data is often used for transmission. In a specific application, the parameters of the service interface need to be edited by a non-technical person such as a product manager. At present, data storage, editing and display of JSON are the same in data effect, namely original JSON data character string storage and display are directly provided for users to browse and edit.
Although the traditional JSON format is simple, readability is still poor for non-technical personnel such as product managers. If the meaning of the JSON data is not understood, the difficulty of editing the JSON data is very large, and the operation is very inconvenient.
Disclosure of Invention
In view of this, an aspect of the embodiments of the present invention provides a data presentation method and system, a data processing device, and a storage medium, so as to enhance readability of JSON data. In another aspect of the embodiments of the present invention, a method, a system, a data processing device, and a storage medium for editing data are provided to enhance the ease of JSON data editing.
The embodiment of the invention provides a data display method, which comprises the following steps: acquiring JSON data; analyzing the obtained JSON data to obtain the grammatical meaning of the JSON data; generating a graphic structure corresponding to the JSON data according to the grammatical meaning of the JSON data; and outputting and displaying the graph structure.
Optionally, the generating a graph structure corresponding to the JSON data according to the syntax meaning of the JSON data includes: and determining a hierarchical structure of the JSON data and a data type of each node according to the grammatical meaning of the JSON data, generating the JSON data into a tree structure, and displaying each node in a corresponding display mode according to the data type.
Optionally, each node displays the data type according to a preset corresponding display mode, including: and displaying the data type of the node by adopting at least one of preset display characters, display patterns, display graphics and display colors.
Optionally, the determining, according to the syntax meaning of the JSON data, a hierarchical structure of the JSON data and a data type of each node, and generating the JSON data into a tree structure includes: determining a root node data type, and generating a root node structure according to a display mode corresponding to the determined root node data type; and determining the data type of each node step by step according to the hierarchical structure of the JSON data, and determining the display mode of each node and the number of the child nodes thereof according to the data type of each node until the structures of all the child nodes are generated.
Optionally, the determining the display mode of each node according to the data type of each node includes: when the node is determined to be the object type, determining the display text of the node comprises: structure; when the node is determined to be the array type, determining the display text of the node comprises: gathering; when the node is determined to be of the basic type, determining the display text of the node comprises: name: < attribute name >, value: < attribute value >; wherein the < attribute name > and the < attribute value > are marks for showing corresponding data included in the node.
Optionally, the determining the number of child nodes of each node according to the data type of each node includes: when the node is determined to be the object type, determining the number of the child nodes corresponding to the node as the number of the attributes of the object corresponding to the node; and when the node is determined to be the array type, determining the number of the child nodes corresponding to the node as the number of elements in the array corresponding to the node.
Optionally, the data presentation method further includes: and for the nodes of the array type, generating and displaying the sequence identifiers of the child nodes in the array in the display areas of the child nodes.
Optionally, the data presentation method further includes: and updating the graph structure correspondingly based on the operation instruction.
Optionally, the updating the graph structure accordingly based on the operation instruction includes at least one of: based on an operation instruction for expanding the child nodes of a certain node, correspondingly expanding the child nodes of the certain node; based on an operation instruction for hiding the child node of a certain node, correspondingly hiding the child node of the certain node; and synchronously updating the change of the graph structure when the user performs the operation of adding the nodes, deleting the nodes or modifying the nodes in the graph structure based on the operation instructions of adding the nodes, deleting the nodes or modifying the nodes.
The embodiment of the invention also provides a data editing method, which comprises the following steps: displaying JSON data by adopting a graph structure; and when an editing operation instruction for the JSON data graph structure is received, updating the graph structure according to the editing operation instruction and a corresponding operation object, and updating and storing JSON data corresponding to the graph structure.
Optionally, the graph structure is a tree structure, each node in the tree structure is displayed according to a display mode corresponding to a data type, and a specific structure is determined by the hierarchical structure of the JSON data and the data type of each node.
Optionally, the edit operation instruction includes at least one of: adding nodes, deleting nodes and modifying nodes.
Optionally, the updating JSON data corresponding to the graph structure includes: and synchronously converting the graph structure into corresponding JSON data which accords with the syntax meaning of the JSON format by adopting a preset JS programming interface.
An embodiment of the present invention further provides a data display system, including: the acquisition unit is suitable for acquiring JSON data; the analysis unit is suitable for analyzing the JSON data acquired by the acquisition unit and exchanging syntax meanings of the JSON data; the generating unit is suitable for generating a graphic structure corresponding to the JSON data according to the grammatical meaning of the JSON data; and the output unit is suitable for outputting and displaying the graph structure.
Optionally, the generating unit includes: the node determining subunit is suitable for determining the hierarchical structure of the JSON data and the data type of each node according to the syntax meaning of the JSON data; and the graph structure generation subunit is suitable for generating the JSON data into a tree structure according to the hierarchical structure of the JSON data determined by the node determination subunit and the data type of each node, and each node is displayed in a corresponding display mode according to the data type.
Optionally, the node determination subunit is adapted to determine a data type of a root node, and determine the data type of each node and the number of child nodes thereof step by step according to the hierarchical structure of the JSON data until determining the data types of all nodes of the JSON data and the number of child nodes thereof; the graph structure generating subunit is suitable for determining to generate a root node structure according to a display mode corresponding to the data type of the root node; and generating the structure of all the nodes of the JSON data step by step according to the data type of each node and the number of the sub-nodes thereof determined by the node determination unit.
Optionally, the graph structure generation subunit is further adapted to generate, for a node of the array type, a sequence identifier of the child node in the array in a child node display area of the node.
Optionally, the data presentation system further comprises: the detection unit is suitable for detecting an operation instruction; the generating unit is further adapted to update the graph structure accordingly based on the operation instruction detected by the detecting unit.
Optionally, the operation instruction detected by the detection unit includes at least one of the following: expanding the operation instruction of the child node of a certain node; hiding an operation instruction of a child node of a certain node; adding an operation instruction of a node; deleting the operation instruction of the node; modifying the operation instruction of the node; the generating unit is further adapted to expand the child node of a certain node correspondingly based on an operation instruction for expanding or hiding the child node of the certain node, and is further adapted to synchronously update the change of the graph structure when a user performs an operation of adding, deleting or modifying the node in the graph structure based on an operation instruction for adding, deleting or modifying the node.
An embodiment of the present invention further provides a data editing system, including: the display unit is suitable for displaying JSON data by adopting a graph structure; the instruction receiving unit is suitable for receiving an editing operation instruction of the graph structure; the graphic processing unit is suitable for updating the graphic structure according to the editing operation instruction and the corresponding operation object; and the data processing unit is suitable for updating and storing the JSON data corresponding to the graphic structure according to the operation of the graphic processing unit.
Optionally, the display unit is adapted to display the JSON data by using a tree structure, each node in the tree structure is displayed according to a display mode corresponding to a data type, and a specific structure is determined according to the hierarchical structure of the JSON data and the data type of each node.
The embodiment of the present invention further provides a data processing device, which includes a memory and a processor, where the memory stores computer instructions capable of being executed on the processor, and the processor executes the steps of the data presentation method according to any one of the above embodiments when executing the computer instructions.
The embodiment of the present invention further provides another data processing apparatus, which includes a memory and a processor, where the memory stores computer instructions executable on the processor, and the processor executes the computer instructions to perform the steps of the data editing method according to any one of the above embodiments.
The embodiment of the present invention further provides a computer-readable storage medium, on which computer instructions are stored, and when the computer instructions are executed, the steps of the data presentation method according to any one of the above embodiments are executed.
The embodiment of the present invention further provides another computer-readable storage medium, on which computer instructions are stored, and when the computer instructions are executed, the steps of the data editing method according to any one of the above embodiments are executed.
By adopting the data display method and system, the data processing equipment and the medium of the embodiment of the invention, the grammatical meaning of the JSON data is obtained by analyzing the obtained JSON data, the corresponding graphic structure of the JSON data is generated according to the grammatical meaning of the JSON data and is output and displayed, namely the JSON data is displayed in a visual mode of the graphic structure, so that a user does not need to understand and memorize the grammatical meaning of the original JSON data, the readability of the JSON data can be enhanced, and non-technical personnel such as a product manager and the like can conveniently browse and edit the JSON data.
Further, according to the syntax meaning of the JSON data, a hierarchical structure of the JSON data and the data type of each node are determined, the JSON data is generated into a tree structure, and each node is displayed in a corresponding display mode according to the data type. The nested structure and the hierarchical relation of the JSON data can be visually and clearly displayed by adopting the tree structure, and each node is displayed in a corresponding display mode according to the data type, so that a user can visually know and distinguish the data type of each node without memorizing the specific grammar rule of the JSON data, and the readability of the JSON data can be further enhanced.
Furthermore, at least one of preset display characters, display patterns, display graphs and display colors is adopted to display the data types of the nodes, so that a user can distinguish the data types of each node more easily, and the readability of JSON data can be further enhanced.
Furthermore, the data type of each node is determined step by step according to the hierarchical structure of the JSON data, the display mode of each node and the number of the child nodes of each node are determined according to the data type of each node until the structures of all the child nodes are generated, the situations of omission or wrong relation can be avoided, and the JSON data can be accurately displayed in a visual mode.
Furthermore, for the nodes of the array type, in the display areas of the child nodes, the sequence identifiers of the child nodes in the array are generated and displayed, so that a user can intuitively know the positions of the child nodes in the array, and the readability of the JSON data can be further enhanced.
Furthermore, based on the operation instruction, the graph structure is correspondingly updated, so that the user can conveniently browse and edit the JSON data, the flexibility of JSON data display can be further enhanced, and the operability of JSON data editing can be enhanced.
By adopting the data editing method and system, the data processing equipment and the medium of the embodiment of the invention, when the editing operation instruction of the displayed JSON data graphic structure is received, the graphic structure is updated according to the editing operation instruction and the corresponding operation object, and the JSON data corresponding to the graphic structure is updated and stored, so that the JSON data editing can be realized without inputting the original JSON data by a user, and the user does not need to memorize the specific JSON syntax rule, thereby enhancing the easy operability of the JSON data editing and reducing the error probability during editing.
Drawings
FIG. 1 is a flow chart illustrating a data presentation method in an embodiment of the invention;
FIG. 2 is a flow chart of another data presentation method in an embodiment of the invention;
FIG. 3 shows a JSON graph structure diagram obtained by the data display method in the embodiment of the invention;
FIG. 4 is a flow chart illustrating a method of editing data in an embodiment of the present invention;
FIG. 5 is a schematic structural diagram of a data presentation system according to an embodiment of the present invention;
fig. 6 shows a schematic structural diagram of a data editing system in an embodiment of the present invention.
Detailed Description
As mentioned above, the data storage, editing and display of the JSON are the same data effect at present, namely, the original JSON data character string storage and display are directly provided for users to browse and edit.
For example, the call parameter JSON format of the service interface is as follows:
[ { "name": Zhang three "," age ":20}, {" name ": Liquan", "age":28} ].
The conventional solution is to directly display the data to the user for editing operation. The user can directly and manually modify the JSON data, but the syntax rule of the JSON data must be understood, otherwise, the actual meaning of the JSON data cannot be understood, and the JSON data cannot be edited and processed on the basis. Therefore, it is difficult for non-technical personnel to understand that the cost is high, the readability is poor and the operation is inconvenient.
In order to solve the above problems, in one aspect, an embodiment of the present invention provides a data display method, where a syntax meaning of JSON data is obtained by parsing the obtained JSON data, and a graphic structure corresponding to the JSON data is generated according to the syntax meaning of the JSON data and is output and displayed, that is, the JSON data is displayed in a visual manner of the graphic structure, so that a user does not need to understand and memorize the syntax meaning of original JSON data, and thus readability of the JSON data can be enhanced, and it is convenient for non-technical personnel such as a product manager to browse and edit the JSON data.
In order to make the aforementioned objects, features and advantages of the embodiments of the present invention more comprehensible, specific embodiments of the present invention are described in detail below with reference to the accompanying drawings.
Referring to the flowchart of the data presentation method shown in fig. 1, in the embodiment of the present invention, JSON data presentation may be performed by using the following steps.
And S11, acquiring JSON data.
In a specific implementation, the method for acquiring JSON data may be acquired from any storage medium storing JSON data, such as a memory, a cloud, and the like. In a specific implementation, any programming language such as JavaScript (JS) can be used to obtain JSON data from a space (e.g., a database) storing the JSON data.
And S12, analyzing the obtained JSON data, and obtaining the syntax meaning of the JSON data.
In the concrete implementation, taking JSON as an example, JSON data in JS and object type formats inside JS are extremely similar and can be converted into each other. For example, JSON (jsonData) represented by the parameter jsonData can be converted into an object inside JS to perform parsing operation directly by using a function JSON in JS.
The JSON data has a format characteristic of supporting arrays and objects, the element type of an array can be an object or a basic data type, an object can have a plurality of key value pairs (key, value), and the value in each key value pair (key, value) can be a basic data type, an array or an object. These concept rules in JSON data may correspond one-to-one to the object format in JS. By analyzing the JSON data, the syntax meaning of the analyzed JSON data can be obtained.
For example, parameters json data of a service interface [ { "name": three "," age ":20}, {" name ": lie four", "age": 24"} are analyzed by using a function json. [ { name: "Zhang three", age:20}, { name: "Li four", age: "24" }. The meaning of this JS object is: the array type comprises two elements, each element is an object, each object has two attributes, the attribute names are name and age, the values of the name and the age of the first object in the array are Zhang III and 20, and the values of the name and the age of the second object in the array are Li IV and 24.
And S13, generating a graph structure corresponding to the JSON data according to the syntax meaning of the JSON data.
In a specific implementation, a tree structure or other graphic structures capable of reflecting the JSON data hierarchy can be adopted to visually display the JSON data.
For the tree structure, in a specific implementation, the hierarchical structure of the JSON data and the data type of each node can be determined according to the syntax meaning of the JSON data, the JSON data is generated into the tree structure, and each node can be displayed in a corresponding display mode according to the data type. For example, at least one of preset display text, display pattern, display graph, display color, and the like may be used to display the data type of the node.
And S14, outputting and displaying the graph structure.
After the graph structure is generated in step S13, the display can be directly output. Therefore, the non-technical users including product managers do not need to understand and memorize the grammatical meaning of the original JSON data, and the original JSON data can be presented to the users in a simpler, direct and easily understood mode through the visual mode of the graphic structure, so that the readability of the JSON data can be enhanced.
The nested structure and the hierarchical relation of the JSON data can be visually and clearly displayed by adopting the tree structure, and each node is displayed in a corresponding display mode according to the data type, so that a user can visually know and distinguish the data type of each node without memorizing the specific grammar rule of the JSON data, and the readability of the JSON data can be further enhanced.
In specific implementation, the above embodiments can be further expanded and optimized. For a better understanding and realization of the embodiments of the invention for those skilled in the art, the following detailed description is given by way of specific application scenarios with reference to the accompanying drawings.
Referring to a flow chart of another data presentation method in the embodiment of the present invention shown in fig. 2, the following detailed description is made through specific steps.
And S21, acquiring JSON data.
And S22, analyzing the obtained JSON data, and obtaining the syntax meaning of the JSON data.
The steps S21 to S22 can be realized by referring to the manner of the foregoing embodiment. It should be noted that the specific manner of acquiring the JSON data and analyzing the acquired JSON data does not limit the embodiment of the present invention. The method of the embodiment of the present invention can be used for displaying any acquired JSON data, and the embodiment of the present invention does not limit the specific parsing manner or parsing tool used, as long as the grammatical meaning of the JSON data can be obtained.
And S23, generating a tree structure corresponding to the JSON data according to the syntax meaning of the JSON data.
In specific implementation, a corresponding tree structure can be generated step by step according to the structural characteristics of JSON data. Specifically, the hierarchical structure of the JSON data and the data type of each node can be determined according to the syntax meaning of the JSON data, the JSON data is generated into a tree structure, and each node is displayed in a corresponding display mode according to the data type.
The JSON data is characterized by comprising an array and an object besides basic types such as numbers, Boolean, character strings and the like, wherein the element type of the array can be the object, the object can comprise a plurality of key value pairs (key, value), each value can be the array or the object, and the structure that one node comprises a plurality of sub-nodes is extremely similar to a tree structure in a nested structure, so that the JSON data can be displayed by using the tree structure more simply and clearly.
Assuming that the variable record after the JSON data is analyzed as the JS object is data, a process of generating the tree structure is to create a root node, add a plurality of child nodes under the root node, if the child nodes are also child nodes, continue to add child nodes of the child nodes under the child nodes, and thus, until all the nodes are added, a complete tree structure can be generated.
In a specific implementation, the data type of the root node may be determined first, and the root node structure may be generated according to a display mode corresponding to the determined type of the root node. And then, according to the hierarchical structure of the JSON data, determining the data type of each node step by step, and determining the display mode of each node and the number of the child nodes thereof according to the number type of each node until the structures of all the child nodes are generated.
In an embodiment of the present invention, for each node of the tree structure, each node may be displayed in a text display manner according to the data type of the node, which is specifically as follows:
1) when the node is determined to be the object type, determining the display text of the node comprises: structure;
2) when the node is determined to be the array type, determining the display text of the node comprises: gathering;
3) when the node is determined to be of the basic type, determining the display text of the node comprises: name: < attribute name >, value: < attribute value >, wherein the < attribute name > and < attribute value > are tags for showing corresponding data contained in the node, wherein the shown node contains corresponding data.
In a specific implementation, judging whether the data of a certain node is an object, an array or a basic type can call the programming interface of the JS.
For example, the node data is data. Determining that the data type of the node is an array if a "true" condition is satisfied, and determining that the data type of the node is an object if a "object" condition is satisfied; and if the two conditions are not true, judging that the data of the node is of the basic type.
In addition, if the data of a certain node is of an object or array type, the node is determined to have a child node. In a specific implementation, the number of child nodes a certain node has may be determined as follows:
and when the node is determined to be the object type, the number of the child nodes is the number of the attributes of the object corresponding to the node. For example, the number of attributes of a node of a certain object type is object. keys (data). length, the name of each attribute is object. keys (data) [ i ], the attribute value is data [ object. keys (data) [ i ] ], i is a variable, and the range can be from 0 to object. keys (data). length-1.
When the node is determined to be of the array type, the number of the child nodes is the number of elements in the array corresponding to the node, that is, the length of the array corresponding to the node. The length of the array corresponding to the node can be specifically expressed as data.length, the data corresponding to each child node is expressed as data [ i ], and the range of i can be from 0 to data.length-1.
In a specific implementation, for a node of an array type, in a display area of a child node of the node, a sequence identifier of the child node in the array may be generated and displayed.
To make it more intuitive for those skilled in the art to understand, the following description is given by way of a specific conversion example.
Firstly, the obtained original JSON data is as follows:
by adopting the data display method of the embodiment of the invention, after the original JSON data is obtained, the data can be analyzed to obtain the grammatical meaning of the JSON data, and then the graph structure corresponding to the JSON data can be generated according to the grammatical meaning of the JSON data.
Specifically, the data type of each node can be determined step by step according to the hierarchical structure of JSON data, and the display mode of each node and the number of child nodes thereof can be determined according to the data type of each node. For the JSON data of the above example, in an embodiment of the present invention, it is preset to distinguish the data type of each node by different text display manners, and a generation process of the tree structure is approximately as follows:
firstly, determining that the student is a root node, and the data type is an array, determining that the corresponding display characters are a set, and obtaining that the length of the array is 3 through analysis, namely the number of elements in the array is 3, and determining that the number of child nodes is 3.
Then, according to the analysis result, the data type of the child node can be determined as the object, and the data type of the child node can be distinguished through a preset display character structure. For each child node, the data type of the child node can be determined in sequence, and a corresponding display mode is selected.
Specifically, for a child node:
according to the analysis result, it can be determined that the object type is the object type, and then the number of child nodes contained in the object type can be further determined according to the number of the attribute names of the object, where the attribute names are sequentially: name, age, address, and telephones, which may be determined to contain 4 child nodes. And then, the data types of the 4 child nodes and the number of the contained child nodes can be continuously determined, wherein according to the analysis result, the data types of the 4 child nodes are sequentially as follows: basic type (string), basic type (number), object, array. In the embodiment of the present invention, for a basic type, a key value pair (key) of the basic type may be directly presented, for example, the presentation form may be: name: < attribute name >, value: < attribute value >; wherein the < attribute name > and the < attribute value > are marks for showing data included in the node, where the shown node includes corresponding data. For example, for node data "name": "Zhang three", can be shown as: name, value: zhang III "; for node data "age" 20, it may be shown as: "name: age, value: 20". For node data "address" { "city": Beijing "," county ": "facing sun" }, according to the number of attribute names it contains, it may further be determined that it contains two child nodes, for the node data "leaftelephones": [ "18815238721", "18815232210" ], which can be further determined to contain 2 array elements according to the number of the array elements contained therein, the array elements are all of the basic type.
The graph structures of other two child nodes can be obtained in the same manner, and are not described in detail.
And S24, outputting and displaying the tree structure.
The tree structure generated via step S23 is as shown in fig. 3, as the JSON data exemplified above. The hierarchical relationship of JSON data, the data type and the data content of each node data can be visually seen, and a user does not need to know the specific syntactic format of the original JSON data. As can be known from the display character set of the root node, the data type of the root node students is an array, the data type of the root node students can be intuitively determined to contain 3 child nodes by three branches of the root node, the data type of the three child nodes can be determined to be an object type by the display character structure of the three child nodes, and the sequence identification of each node in the array students can be intuitively seen through the structure (0), the structure (1) and the structure (3). The 4 branches developed by the structure (0) can intuitively know that the data structure comprises 4 sub-nodes, wherein the first sub-node and the second sub-node are both basic types, the data content of the data structure is directly displayed in a tree structure, the third sub-node can be displayed as an object type by displaying a character structure, the data structure also comprises two branches, namely the two sub-nodes, the data type is two basic types and presents specific data content, and for the fourth sub-node, the data structure can be intuitively seen as an array type by displaying a character set and comprises two sub-nodes which are both basic types. For the other two child nodes of the root node students, the data type and the specific data content of each level of the node can be visually seen.
S25, based on the operation instruction, the tree structure is updated accordingly.
In specific implementation, operations such as browsing and editing the displayed graphic structure can be directly performed.
The data meaning of the JSON data is displayed to the user in a tree structure and other graphic structures, so that the JSON data is simpler and more intuitive and is easier to understand by non-technical personnel.
In order to facilitate browsing for a user, in a specific implementation, the child nodes of a certain node may be expanded accordingly based on an operation instruction for expanding the child nodes of the certain node. The child nodes of a certain node may be hidden accordingly based on the operation instructions to hide the child nodes of the certain node. For example, for the tree structure shown in FIG. 3, the presentation marker may be double clicked
To hide the child nodes behind it; and if hidden child nodes exist, the mark can be marked by double-click
(not shown) to expand the indicia
A hidden child node.
If a user wants to edit the JSON data, the tree structure can be directly edited, the JSON data editing is converted into operations of adding, deleting, modifying and the like of nodes of the tree structure, and specifically, the change of the tree structure when the user executes operations of adding the nodes, deleting the nodes or modifying the nodes in the graph structure can be synchronously updated based on the operation instructions of adding the nodes, deleting the nodes or modifying the nodes. And after the modification is finished, the data can be directly converted into the JSON data by using the JSON programming structure JSON. The storage location of JSON data is not limited here.
It should be noted that, in the embodiment of the present invention, how to edit a specific tree structure is not limited.
In order to enhance the easy operability of JSON data editing, the embodiment of the invention also provides a data editing method corresponding to the data display method. The following detailed description is presented to enable a person skilled in the art to better understand and implement the invention by means of specific steps.
Referring to the flowchart of the data editing method shown in fig. 4, in the embodiment of the present invention, the following steps may be specifically referred to for execution.
And S41, displaying the JSON data by adopting a graph structure.
In a specific implementation, the JSON data can be displayed by using the method described in the above embodiments.
If the adopted graph structure is a tree structure, each node in the tree structure can be displayed according to a display mode corresponding to the data type, and the specific structure can be determined by the hierarchical structure of the JSON data and the data type of each node.
And S42, when an editing operation instruction for the JSON data graph structure is received, updating the graph structure according to the editing operation instruction and the corresponding operation object, and updating and storing the JSON data corresponding to the graph structure.
In a specific implementation, the edit manipulation instruction may include one or more of adding a node, deleting a node, modifying a node, and the like.
In specific implementation, a preset JS programming interface can be adopted to synchronously convert the graph structure into corresponding JSON data which conform to the syntax meaning of the JSON format.
By adopting the embodiment, the user can directly edit the graph structure without inputting the original JSON data, so that the user does not need to memorize the specific JSON grammar rule, the easy operability of the JSON data editing can be enhanced, and the error probability during editing can be reduced.
In order to enable those skilled in the art to better understand and implement the present invention, the embodiment of the present invention further provides a corresponding data presentation system.
Referring to the data presentation system shown in fig. 5, in an embodiment of the present invention, the data presentation system 50 may include an obtaining unit 51, an analyzing unit 52, a generating unit 53, and an output unit 54, where:
an obtaining unit 51 adapted to obtain JSON data;
the analyzing unit 52 is adapted to analyze the JSON data acquired by the acquiring unit 51, and exchange syntax meaning of the JSON data;
the generating unit 53 is adapted to generate a graph structure corresponding to the JSON data according to the syntax meaning of the JSON data;
an output unit 54 adapted to output and present the graphical structure.
By adopting the data display system, the JSON data is displayed in a visual mode of a graphic structure, so that a user does not need to understand and memorize the grammatical meaning of the original JSON data, the readability of the JSON data can be enhanced, and non-technical personnel such as a product manager can conveniently browse and edit the JSON data.
In a specific implementation, the generating unit 53 may include: a node determination subunit 531, adapted to determine, according to the syntax meaning of the JSON data, a hierarchical structure of the JSON data and a data type of each node; the graph structure generating subunit 532 is adapted to determine, according to the node, the hierarchical structure of the JSON data determined by the node determining subunit 531 and the data type of each node, and generate the JSON data into a tree structure, where each node is displayed in a corresponding display manner according to the data type.
In a specific implementation, the node determining subunit 531 is adapted to determine a data type of a root node, and determine the data type of each node and the number of child nodes thereof step by step according to the hierarchical structure of the JSON data until determining the data types of all nodes of the JSON data and the number of child nodes thereof; the graph structure generating subunit 532 is adapted to determine to generate a root node structure according to a display mode corresponding to the data type of the root node; and generating the structure of all the nodes of the JSON data step by step according to the data type of each node and the number of the sub-nodes thereof determined by the node determination unit.
The graph structure generating subunit 532, in a specific implementation, is further adapted to generate, for a node of an array type, an order identifier of the child node in the array in a child node display area of the node.
In a specific implementation, the data presentation system 50 may further include: a detection unit 55 adapted to detect an operation instruction; the generating unit 53 is further adapted to update the graph structure accordingly based on the operation instruction detected by the detecting unit.
Specifically, the operation instruction detected by the detection unit 55 may include one or more of the following: expanding the operation instruction of the child node of a certain node; hiding an operation instruction of a child node of a certain node; adding an operation instruction of a node; deleting the operation instruction of the node; and modifying the operation instruction of the node. Correspondingly, the generating unit 53 is further adapted to expand the child node of a certain node correspondingly based on the operation instruction of expanding or hiding the child node of the certain node, and is further adapted to synchronously update the change of the graph structure when the user performs the operation of adding, deleting or modifying the node in the graph structure based on the operation instruction of adding, deleting or modifying the node.
An embodiment of the present invention further provides a data editing system, referring to the data editing system shown in fig. 6, in the embodiment of the present invention, the data editing system 60 may include: a presentation unit 61, an instruction receiving unit 62, a graphics processing unit 63, and a data processing unit 64, wherein:
the display unit 61 is suitable for displaying JSON data by adopting a graph structure;
an instruction receiving unit 61 adapted to receive an edit operation instruction for the graphic structure;
the graphic processing unit 63 is adapted to update the graphic structure according to the editing operation instruction and the corresponding operation object;
and the data processing unit 64 is suitable for updating and storing the JSON data corresponding to the graphic structure according to the operation of the graphic processing unit 63.
By adopting the data editing system, when an editing operation instruction for the displayed JSON data graphic structure is received, the graphic structure is updated according to the editing operation instruction and the corresponding operation object, and the JSON data corresponding to the graphic structure is updated and stored, so that the JSON data editing can be realized without inputting the original JSON data by a user, and the user does not need to memorize the specific JSON syntax rule, thereby enhancing the operability of the JSON data editing and reducing the error probability during editing.
In an embodiment of the present invention, the display unit 61 is adapted to display the JSON data by using a tree structure, each node in the tree structure is displayed according to a display mode corresponding to a data type, and a specific structure is determined by the hierarchical structure of the JSON data and the data type of each node.
The embodiment of the present invention further provides a data processing device, which includes a memory and a processor, where the memory stores computer instructions capable of being executed on the processor, and the processor, when executing the computer instructions, may execute the steps of the data presentation method according to any embodiment of the present invention. Reference may be made to the above embodiments of the data presentation method, which are not described herein again.
The embodiment of the present invention further provides another data processing device, which includes a memory and a processor, where the memory stores computer instructions executable on the processor, and the processor executes the computer instructions to perform the steps of the data editing method according to any embodiment of the present invention. Reference may be made to the above embodiments of the data editing method, and details are not described herein.
The embodiment of the present invention further provides a computer-readable storage medium, on which computer instructions are stored, and when the computer instructions are executed, the steps of the data presentation method according to any embodiment of the present invention may be executed. Reference may be made to the above embodiments of the data presentation method, which are not described herein again.
The embodiment of the present invention further provides another computer-readable storage medium, on which computer instructions are stored, and when the computer instructions are executed, the steps of the data editing method according to any embodiment of the present invention may be executed. Reference may be made to the above embodiments of the data editing method, and details are not described herein.
In particular implementations, the computer-readable storage medium may include: ROM, RAM, magnetic or optical disks, and the like.
Although the present invention is disclosed above, the present invention is not limited thereto. Various changes and modifications may be effected therein by one skilled in the art without departing from the spirit and scope of the invention as defined in the appended claims.
Claims (25)
1. A method for displaying data, comprising:
acquiring JSON data;
analyzing the obtained JSON data to obtain the grammatical meaning of the JSON data;
generating a graphic structure corresponding to the JSON data according to the grammatical meaning of the JSON data;
and outputting and displaying the graph structure.
2. The data presentation method according to claim 1, wherein the generating of the corresponding graph structure of the JSON data according to the syntax meaning of the JSON data comprises:
and determining a hierarchical structure of the JSON data and a data type of each node according to the grammatical meaning of the JSON data, generating the JSON data into a tree structure, and displaying each node in a corresponding display mode according to the data type.
3. The data presentation method of claim 2, wherein each node presents the data type according to a preset corresponding presentation manner, comprising:
and displaying the data type of the node by adopting at least one of preset display characters, display patterns, display graphics and display colors.
4. The data presentation method according to claim 2, wherein the determining a hierarchical structure of the JSON data and a data type of each node according to a syntax meaning of the JSON data, and generating the JSON data as a tree structure comprises:
determining a root node data type, and generating a root node structure according to a display mode corresponding to the determined root node data type;
and determining the data type of each node step by step according to the hierarchical structure of the JSON data, and determining the display mode of each node and the number of the child nodes thereof according to the data type of each node until the structures of all the child nodes are generated.
5. The method according to claim 4, wherein the determining the showing mode of each node according to the data type of each node comprises:
when the node is determined to be the object type, determining the display text of the node comprises: structure;
when the node is determined to be the array type, determining the display text of the node comprises: gathering;
when the node is determined to be of the basic type, determining the display text of the node comprises: name: < attribute name >, value: < attribute value >; wherein the < attribute name > and the < attribute value > are marks for showing corresponding data included in the node.
6. The data presentation method of claim 4, wherein the determining the number of child nodes of each node according to the data type of each node comprises:
when the node is determined to be the object type, determining the number of the child nodes corresponding to the node as the number of the attributes of the object corresponding to the node;
and when the node is determined to be the array type, determining the number of the child nodes corresponding to the node as the number of elements in the array corresponding to the node.
7. The data presentation method of claim 6, further comprising: and for the nodes of the array type, generating and displaying the sequence identifiers of the child nodes in the array in the display areas of the child nodes.
8. The data presentation method of claim 2, further comprising:
and updating the graph structure correspondingly based on the operation instruction.
9. The data presentation method of claim 8, wherein the updating the graph structure accordingly based on the operation instruction comprises at least one of:
based on an operation instruction for expanding the child nodes of a certain node, correspondingly expanding the child nodes of the certain node;
based on an operation instruction for hiding the child node of a certain node, correspondingly hiding the child node of the certain node;
and synchronously updating the change of the graph structure when the user performs the operation of adding the nodes, deleting the nodes or modifying the nodes in the graph structure based on the operation instructions of adding the nodes, deleting the nodes or modifying the nodes.
10. A method for editing data, comprising:
displaying JSON data by adopting a graph structure;
and when an editing operation instruction for the JSON data graph structure is received, updating the graph structure according to the editing operation instruction and a corresponding operation object, and updating and storing JSON data corresponding to the graph structure.
11. The data editing method of claim 10, wherein the graph structure is a tree structure, each node in the tree structure is displayed according to a display mode corresponding to a data type, and a specific structure is determined by the hierarchical structure of the JSON data and the data type of each node.
12. The data editing method according to claim 11, wherein the editing operation instruction includes at least one of: adding nodes, deleting nodes and modifying nodes.
13. The data editing method of claim 10, wherein the updating JSON data corresponding to the graphic structure comprises:
and synchronously converting the graph structure into corresponding JSON data which accords with the syntax meaning of the JSON format by adopting a preset JS programming interface.
14. A data presentation system, comprising:
the acquisition unit is suitable for acquiring JSON data;
the analysis unit is suitable for analyzing the JSON data acquired by the acquisition unit and exchanging syntax meanings of the JSON data;
the generating unit is suitable for generating a graphic structure corresponding to the JSON data according to the grammatical meaning of the JSON data;
and the output unit is suitable for outputting and displaying the graph structure.
15. The data presentation system of claim 14, wherein the generation unit comprises:
the node determining subunit is suitable for determining the hierarchical structure of the JSON data and the data type of each node according to the syntax meaning of the JSON data;
and the graph structure generation subunit is suitable for generating the JSON data into a tree structure according to the hierarchical structure of the JSON data determined by the node determination subunit and the data type of each node, and each node is displayed in a corresponding display mode according to the data type.
16. The data presentation system of claim 15, wherein the node determination subunit is adapted to determine a data type of a root node, and determine the data type of each node and the number of its child nodes step by step according to the hierarchical structure of the JSON data until determining the data types of all nodes of the JSON data and the number of their child nodes;
the graph structure generating subunit is suitable for determining to generate a root node structure according to a display mode corresponding to the data type of the root node; and generating the structure of all the nodes of the JSON data step by step according to the data type of each node and the number of the sub-nodes thereof determined by the node determination unit.
17. The data presentation system of claim 16, wherein the graph structure generation subunit is further adapted to generate, for a node of an array type, an order identification of the child node in the array at its child node presentation area.
18. The data presentation system of claim 15, further comprising: the detection unit is suitable for detecting an operation instruction;
the generating unit is further adapted to update the graph structure accordingly based on the operation instruction detected by the detecting unit.
19. The data presentation system of claim 18, wherein the operation instructions detected by the detection unit comprise at least one of: expanding the operation instruction of the child node of a certain node; hiding an operation instruction of a child node of a certain node; adding an operation instruction of a node; deleting the operation instruction of the node; modifying the operation instruction of the node;
the generating unit is further adapted to expand the child node of a certain node correspondingly based on an operation instruction for expanding or hiding the child node of the certain node, and is further adapted to synchronously update the change of the graph structure when a user performs an operation of adding, deleting or modifying the node in the graph structure based on an operation instruction for adding, deleting or modifying the node.
20. A data editing system, comprising:
the display unit is suitable for displaying JSON data by adopting a graph structure;
the instruction receiving unit is suitable for receiving an editing operation instruction of the graph structure;
the graphic processing unit is suitable for updating the graphic structure according to the editing operation instruction and the corresponding operation object;
and the data processing unit is suitable for updating and storing the JSON data corresponding to the graphic structure according to the operation of the graphic processing unit.
21. The data editing system of claim 20, wherein the display unit is adapted to display the JSON data in a tree structure, each node in the tree structure is displayed in a display manner corresponding to a data type, and a specific structure is determined by the hierarchical structure of the JSON data and the data type of each node.
22. A data processing apparatus comprising a memory and a processor, said memory having stored thereon computer instructions executable on said processor, wherein said processor, when executing said computer instructions, performs the steps of the data presentation method of any one of claims 1 to 9.
23. A data processing apparatus comprising a memory and a processor, said memory having stored thereon computer instructions executable on said processor, wherein said processor, when executing said computer instructions, performs the steps of the data editing method of any one of claims 10 to 13.
24. A computer readable storage medium having stored thereon computer instructions, wherein the computer instructions when executed perform the steps of the data presentation method of any one of claims 1 to 9.
25. A computer readable storage medium having stored thereon computer instructions, wherein said computer instructions when executed perform the steps of the data editing method of any one of claims 10 to 13.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201910028402.5A CN111435372A (en) | 2019-01-11 | 2019-01-11 | Data display method and system, data editing method and system, equipment and medium |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201910028402.5A CN111435372A (en) | 2019-01-11 | 2019-01-11 | Data display method and system, data editing method and system, equipment and medium |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN111435372A true CN111435372A (en) | 2020-07-21 |
Family
ID=71579795
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201910028402.5A Pending CN111435372A (en) | 2019-01-11 | 2019-01-11 | Data display method and system, data editing method and system, equipment and medium |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN111435372A (en) |
Cited By (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN112035040A (en) * | 2020-08-31 | 2020-12-04 | 北京润科通用技术有限公司 | Interface variable information processing method and device |
| CN113138761A (en) * | 2021-04-30 | 2021-07-20 | 南京电研电力自动化股份有限公司 | Interface programming method and system |
Citations (10)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN101101602A (en) * | 2007-07-27 | 2008-01-09 | 华为技术有限公司 | Data format verification method and device |
| CN102053987A (en) * | 2009-11-06 | 2011-05-11 | 商业对象软件有限公司 | Uniform interface for displaying and modifying data array |
| CN106293653A (en) * | 2015-05-19 | 2017-01-04 | 深圳市腾讯计算机系统有限公司 | Code process method and device |
| CN106484408A (en) * | 2016-09-29 | 2017-03-08 | 电子科技大学 | A kind of node relationships figure display methods based on HTML5 and system |
| CN106503026A (en) * | 2015-09-08 | 2017-03-15 | 华为技术有限公司 | A kind of method and apparatus of video data |
| CN107092656A (en) * | 2017-03-23 | 2017-08-25 | 中国科学院计算技术研究所 | A kind of tree data processing method and system |
| CN107193793A (en) * | 2017-06-20 | 2017-09-22 | 深圳易嘉恩科技有限公司 | Tree-like grid control based on actionscript |
| CN107545019A (en) * | 2017-03-02 | 2018-01-05 | 微云数聚（北京）科技有限公司 | A kind of method for visualizing and system of chart database data-driven |
| CN107562777A (en) * | 2017-07-17 | 2018-01-09 | 阿里巴巴集团控股有限公司 | Data processing method and its equipment |
| CN108132967A (en) * | 2017-12-01 | 2018-06-08 | 五八有限公司 | Methods of exhibiting, device, terminal and the storage medium of the App pages |
-
2019
- 2019-01-11 CN CN201910028402.5A patent/CN111435372A/en active Pending
Patent Citations (10)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN101101602A (en) * | 2007-07-27 | 2008-01-09 | 华为技术有限公司 | Data format verification method and device |
| CN102053987A (en) * | 2009-11-06 | 2011-05-11 | 商业对象软件有限公司 | Uniform interface for displaying and modifying data array |
| CN106293653A (en) * | 2015-05-19 | 2017-01-04 | 深圳市腾讯计算机系统有限公司 | Code process method and device |
| CN106503026A (en) * | 2015-09-08 | 2017-03-15 | 华为技术有限公司 | A kind of method and apparatus of video data |
| CN106484408A (en) * | 2016-09-29 | 2017-03-08 | 电子科技大学 | A kind of node relationships figure display methods based on HTML5 and system |
| CN107545019A (en) * | 2017-03-02 | 2018-01-05 | 微云数聚（北京）科技有限公司 | A kind of method for visualizing and system of chart database data-driven |
| CN107092656A (en) * | 2017-03-23 | 2017-08-25 | 中国科学院计算技术研究所 | A kind of tree data processing method and system |
| CN107193793A (en) * | 2017-06-20 | 2017-09-22 | 深圳易嘉恩科技有限公司 | Tree-like grid control based on actionscript |
| CN107562777A (en) * | 2017-07-17 | 2018-01-09 | 阿里巴巴集团控股有限公司 | Data processing method and its equipment |
| CN108132967A (en) * | 2017-12-01 | 2018-06-08 | 五八有限公司 | Methods of exhibiting, device, terminal and the storage medium of the App pages |
Cited By (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN112035040A (en) * | 2020-08-31 | 2020-12-04 | 北京润科通用技术有限公司 | Interface variable information processing method and device |
| CN113138761A (en) * | 2021-04-30 | 2021-07-20 | 南京电研电力自动化股份有限公司 | Interface programming method and system |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| Lin et al. | DSMDiff: a differentiation tool for domain-specific models | |
| CN107423322B (en) | Method and device for displaying label nesting hierarchy of webpage | |
| US20040160464A1 (en) | System and method for providing a graphical user interface and alternate mappings of management information base objects | |
| Varanka et al. | The map as knowledge base | |
| US20120239677A1 (en) | Collaborative knowledge management | |
| Wilson et al. | Combining dynamic geometry, automated geometry theorem proving and diagrammatic proofs | |
| CN111177342A (en) | Knowledge graph interactive visual query language based on bidirectional conversion | |
| CN111435372A (en) | Data display method and system, data editing method and system, equipment and medium | |
| US10776351B2 (en) | Automatic core data service view generator | |
| CN106709985A (en) | Generation method and device for virtual three-dimensional sacrifice scene | |
| CN110308907B (en) | Data conversion method and device, storage medium and electronic equipment | |
| US8701086B2 (en) | Simplifying analysis of software code used in software systems | |
| KR101910179B1 (en) | Web-based chart library system for data visualization | |
| CN110929100B (en) | Method and device for acquiring value taking path, storage medium and electronic equipment | |
| CN114064913A (en) | Knowledge graph-based document retrieval method and system | |
| CN114218394A (en) | Knowledge visualization development method and system for data visualization large screen | |
| US9483852B2 (en) | Method for displaying and manipulating genealogical data using a full family graph | |
| JPH1049544A (en) | Method and device for supporting analysis of multi-dimensional data while visualizing then | |
| EP4058897A1 (en) | System and method for visualizing and navigating network data | |
| JP2019101889A (en) | Test execution device and program | |
| CN116467433A (en) | Knowledge graph visualization method, device, equipment and medium for multi-source data | |
| CN115794869A (en) | Implementation method and device for visual construction and generation of semantic query | |
| JPWO2006137564A1 (en) | Document processing device | |
| CN114296726A (en) | Code generation method and device, computer equipment and storage medium | |
| CN112394847A (en) | Emergency information interaction system based on structured icons |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination |