Created
November 7, 2015 22:35
-
-
Save SErr0r/894615d8780596d77427 to your computer and use it in GitHub Desktop.
How to Parse a JSON file using jQuery
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "name": "select2", | |
| "title": "Select2", | |
| "description": "Select2 is a jQuery based replacement for select boxes. It supports searching, remote data sets, and infinite scrolling of results.", | |
| "keywords": [ | |
| "select", | |
| "autocomplete", | |
| "typeahead", | |
| "dropdown", | |
| "multiselect", | |
| "tag", | |
| "tagging" | |
| ], | |
| "version": "3.4.2", | |
| "author": { | |
| "name": "Igor Vaynberg", | |
| "url": "https://github.com/ivaynberg" | |
| }, | |
| "licenses": [ | |
| { | |
| "type": "Apache", | |
| "url": "http://www.apache.org/licenses/LICENSE-2.0" | |
| }, | |
| { | |
| "type": "GPL v2", | |
| "url": "http://www.gnu.org/licenses/gpl-2.0.html" | |
| } | |
| ], | |
| "bugs": "https://github.com/ivaynberg/select2/issues", | |
| "homepage": "http://ivaynberg.github.com/select2", | |
| "docs": "http://ivaynberg.github.com/select2/", | |
| "download": "https://github.com/ivaynberg/select2/tags", | |
| "dependencies": { | |
| "jquery": ">=1.7.1" | |
| } | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html> | |
| <head> | |
| <title>How to Parse a JSON file using jQuery</title> | |
| <style type="text/css"> | |
| body { | |
| text-align: center; | |
| font-family: arial; | |
| } | |
| .button { | |
| margin:20px; | |
| font-size:16px; | |
| font-weight: bold; | |
| padding:5px 10px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <a href="data.json" target="_blank">Open JSON file</a><br /> | |
| <input type="button" value="Get and parse JSON" class="button" /><br /> | |
| <span id="results"></span> | |
| <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> | |
| <script> | |
| //When DOM loaded we attach click event to button | |
| $(document).ready(function() { | |
| //after button is clicked we download the data | |
| $('.button').click(function(){ | |
| //start ajax request | |
| $.ajax({ | |
| url: "data.json", | |
| //force to handle it as text | |
| dataType: "text", | |
| success: function(data) { | |
| //data downloaded so we call parseJSON function | |
| //and pass downloaded data | |
| var json = $.parseJSON(data); | |
| //now json variable contains data in json format | |
| //let's display a few items | |
| $('#results').html('Plugin name: ' + json.name + '<br />Author: ' + json.author.name); | |
| } | |
| }); | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment