JQuery to access the data of the data in the JSON file

This example tells the method of jQuery access to data in the JSON file. Share to everyone for your reference, as follows:

Sometimes we may need to use JSON file storage data and then directly accessed through the front desk language.

First is JSON file:

{“Pipe”: [{“ElementID”: “Identification Number”, “Gisid”: “gisid”, “Label”: “No.”, “StartNodeID”: “Start Node ID”, “EndNodeID”: “Termination Node ID”, “StartNodeLabel”: “Start Node Number”, “EndNodeLabel”: “Termination Node”, “Physical_PipeDiameter”: “diameter”, “Physical_PipeMaterialID”: “pipe”, “Physical_HazenWilliamsC”: “Hazen William value C”, “Physical_Length”: “pipe length”, “Physical_MinorLossCoefficient”: “local resistance coefficient”, “Physical_InstallationYear “:” PHYSICAL_ADDRESS “:” Address “,” DISTRICT “:” Marketing Company “,” DMA “:” Measurement Zone “,” Zone “:” Administrative Region “,” Flow “:” Current Traffic “, “Velocity”: “Current Flow Period”, “Headloss”: “Current water loss”}], “node”: [{“elementid”: “identification number”, “gisid”: “gisid”, “label”: “Number “,” Physical_Elevation “:” Ground elevation “,” Physical_DEPTH “:” Bede “,” Physical_address “:” Address “,” DISTRICT “: Marketing Company,” DMA “:” Measurement Zone “,” Zone “:” Administrative District “,” Hydraulicgrade “:” Hydraulic “,” Pressure “:” Free Water Pressure “,” Demand “:” Node Traffic “,” CL “:” Residual Chlorine Concends “,” AGE “:” Shui Ape “,” Source “:” Water supply “}] , “Valve”: [{“ElementID”: “Identification”, “Gisid”: “Gisid”, “Label”: “Physical_Elevation”: “GISICAL_ELEVATION”: “Physical_Depth”: “buried”, “Physical_Diameter”: “Physical_status”: “Valve State”, “Physical_address”: “Address”, “DISTRICT”: Marketing Company, “DMA”: “Measurement Zone”, “Zone”: “Administrative Region” “Physical_InstallationYear”: “The installation age”}], “water meter”: [{“Diameter”: “Caliber”: “Caliber”, “Material”: “Material”, “depth”: “buried deep “,” Height “:” Ground Elevation “,” Addr “:” Addr “:” Table Number “,” UserName “:” User Name “,” Junction “:” Interface Type “,” District “: “Administrative Region”, “Measurein”: “Marketing Company”, “FinishDate”: “Installation Date”}], “Fire Hydr”: [{“ElementID”: “Identification Number”, “Gisid”:”Gisid”, “Label”: “No.”, “Physical_Elevation”: “Physical_Depth”: “Bede”, “Physical_address”: “Address”, “Marketing Company”, “DMA” : “Measurement Zone”, “ZONE”: “Administrative Region”, “Physical_Diameter”: “Call”, “Physical_Type”: “}]}
   
Create criteriaQuery. JSON file, the file content is as above.

jQuery Access JSON
   $ ("# btn"). Click ("criteriaQuery.json", Function (DATA) {var $ jsontip = $ ("# jsontip"); Var strHtml = ""; $ jsontip.empty (); $ .each (data) {strHtml + = info [o];} // strHtml + = INFO [ "ElementID"];}); $ jsontip.hTML (strHtml);}})})           
I have a 1.4.0 version of JS file here, https://libs.baidu.com/jQuery/1.4.0/jQuery.min.js
JSON file is placed in the same directory with HTML.
Run the code, click to get the data button, you can see all the information of the "pipe" obtained by traversing the JSON file on the page. Of course, you can also get the value of the JSON file by Key, ie
strHTML + = INFO [“ElementID”];

Interested friends can use

online HTML / CSS / JavaScript code run tool

: http: //tools.jb51.net/code/htmljsrun Tests the code running effect.
PS: About JSON Action, here is recommended for everyone to use several more practical JSON online tools for your reference:
   
Online JSON code test, Test, beautify, formatting tools:
http://tools.jb51.net/code/json

JSON

Online formatting tool: http://tools.jb51.net/code/jsonformat

Online XML / JSON Mutual Conversion Tool:
http://tools.jb51.net/code/xmljson

JSON Code online format / beautification / compression / editing / conversion tool:
http://tools.jb51.net/code/jsoncodeformat

Online JSON compression / escape tool:
http://tools.jb51.net/code/ JSON_YASUO_TRANS

More about jQuery related content can also view this station topic: “jQuery operation JSON data skills”, “jQuery common plugin and usage summary”, “jQuery extension skill summary” and “jQuery selector usage Summary “ It is hoped that this article is designed to help you jQuery program.

© Copyright Notice
THE END
Just support it if you like
like0
share
comment Grab the couch

Please log in to comment