PHPackages kevindb/jquery-load-json - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Parsing & Serialization](/categories/parsing) 4. / 5. kevindb/jquery-load-json ActiveLibrary[Parsing & Serialization](/categories/parsing) kevindb/jquery-load-json ======================== jQuery plugin that enables developers to load JSON data from the server and load JSON object into the DOM. v1.3.4(7y ago)261414[2 issues](https://github.com/kevindb/jquery-load-json/issues)[6 PRs](https://github.com/kevindb/jquery-load-json/pulls)LGPL-2.1JavaScript Since Mar 4Pushed 4y ago4 watchersCompare [ Source](https://github.com/kevindb/jquery-load-json)[ Packagist](https://packagist.org/packages/kevindb/jquery-load-json)[ Docs](https://github.com/kevindb/jquery-load-json)[ RSS](/packages/kevindb-jquery-load-json/feed)WikiDiscussions master Synced today READMEChangelog (6)Dependencies (1)Versions (8)Used By (0) jQuery loadJSON plugin ====================== [](#jquery-loadjson-plugin) This is a jQuery plugin that enables developers to load JSON data from the server and load JSON object into the DOM. No templating language is required - this plugin matches DOM elements in the HTML page with a JSON object using a DOM element properties. Community --------- [](#community) Want to contribute to jQuery loadJSON? Awesome! See [CONTRIBUTING](CONTRIBUTING.md) for more information. ### Code of Conduct [](#code-of-conduct) Please note that this project is released with a [Contributor Code of Conduct](CODE_OF_CONDUCT.md) to ensure that this project is a welcoming place for **everyone** to contribute to. By participating in this project you agree to abide by its terms. Requirements ------------ [](#requirements) Requires jQuery 1.7+. Download -------- [](#download) - **Development:** [src/jquery.loadJSON.js](https://github.com/kevindb/jquery-load-json/blob/master/src/jquery.loadJSON.js) - **Production/Minified:** [dist/jquery.loadJSON.min.js](https://github.com/kevindb/jquery-load-json/blob/master/dist/jquery.form.min.js) ### CDN [](#cdn) ``` ``` or ``` ``` Usage ----- [](#usage) To use loadJSON plugin two items should be defined: - HTML code that will be used as template - JSON object that will be used to populate template ### HTML template [](#html-template) Template is plain HTML code. Only requirement is that elements that should be populated must have id, name, class, or rel attributes that have matching properties in the JSON object. Example of HTML template is shown below: ``` Address: Contact by: ``` In the template h1 tag with id Name, and span tags with ids Address and Contact will be populated with JSON properties. ### JSON object [](#json-object) Once HTML template is defined JSON object that will be used to populate template must be defines. Example of object that can populate template shown above is shown in the following listing: ``` data = { "Name":"Emkay Entertainments", "Address":"Nobel House, Regent Centre", "Contact":"Phone" } ``` Object has three properties (Name, Address, and Contact) that will be injected into the template. ### Binding JSON object to the template [](#binding-json-object-to-the-template) Once HTML template and JSON object are defined, JSON object can be loaded into the HTML code. This can be achieved using the following line of JavaScript code: ``` $('div#data').loadJSON(data); ``` As a result 'data' object will be loaded into the HTML fragment with id data. Resulting HTML is shown in the following listing: ``` Emkay Entertainments Address: Nobel House, Regent Centre Contact by: Phone ``` You can find detailed instructions how the plugin can be used in the following pages: 1. [How to load object into the HTML element](https://github.com/kevindb/jquery-load-json/wiki/LoadingHTMLElements) where is explained how the JavaScript objects are loaded in the HTML elements 2. [Using loadJSON plugin as a template engine](https://github.com/kevindb/jquery-load-json/wiki/HTMLTemplate) where is explained how this plugin can be used for generating output based on template 3. [Working with HTML forms](https://github.com/kevindb/jquery-load-json/wiki/WorkingWithFormElements) where is explained how you can load HTML form with JavaScript object Examples -------- [](#examples) You can see few live examples where it is shown how loadJSON plugin can be used: 1. [Creating list of elements](examples/list.html) - in this example is shown how the array of JSON objects can be bound to the simple HTML template, 2. [Showing details of the JSON object](examples/details.html?ID=17) - this example shows how details about the single object can be bound to the HTML template, 3. [Populating form with JSON object](examples/edit.html?ID=17) - this example shows how you can populate form elements from the JSON object, 4. [Loading complex/hierarchical structure](examples/hierarchy.html) this example show how you can generate complex structures using loadJSON plugin, 5. [Generate template for array elements](examples/array.html) in this example is shown how you can define custom templates for different elements in the array, 6. [Adding load events](examples/events.html) in this example is shown how you can define on load events, 7. [Loading JSON from the external sites](examples/BingMapsSearch.html) - in this example is shown how you can load JSON data that will be loaded from the external sites - in this case from the Bing Maps web service. 8. [Populating connected drop-downs using the Ajax calls](examples/categories-ajax.html) - in this example is shown how you can load subcategories drop-downs when parent category drop-down is changed. Drop-down values are taken from the server-side via Ajax calls. 9. [Populating connected dropdowns using LINQ](examples/linq.html) - in this example is shown how you can load subcategories dropdown when parent category dropdown is changed. Values are stored as a local JavaScript arrays and filtered using the LINQ library. Contributors ------------ [](#contributors) This project has had several previous homes. See [CONTRIBUTORS](CONTRIBUTORS.md) for details. License ------- [](#license) This repository is licensed under the GNU Lesser General Public License v2.1. See [LICENSE](LICENSE.md) for details. ### Health Score 33 — LowBetter than 72% of packages Maintenance18 Infrequent updates — may be unmaintained Popularity18 Limited adoption so far Community16 Small or concentrated contributor base Maturity68 Established project with proven stability Bus Factor1 Top contributor holds 88.9% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~487 days Total 2 Last Release 2916d ago ### Community Maintainers ![](https://www.gravatar.com/avatar/62abb291c85cebc7646027bd3b3f145c99c11d2aa93b6ff24a555264f9592998?d=identicon)[kevinmorris](/maintainers/kevinmorris) --- Top Contributors [![kevindb](https://avatars.githubusercontent.com/u/3468013?v=4)](https://github.com/kevindb "kevindb (16 commits)")[![epicfaace](https://avatars.githubusercontent.com/u/1689183?v=4)](https://github.com/epicfaace "epicfaace (1 commits)")[![fvarg00](https://avatars.githubusercontent.com/u/3069588?v=4)](https://github.com/fvarg00 "fvarg00 (1 commits)") --- Tags ajax-formhtml-formjavascriptjqueryjquery-pluginjsonloadjson-pluginjsonjavascriptjqueryajax-formjquery-pluginhtml-formloadjson-plugin ### Embed Badge ![Health badge](/badges/kevindb-jquery-load-json/health.svg) ``` [![Health](https://phpackages.com/badges/kevindb-jquery-load-json/health.svg)](https://phpackages.com/packages/kevindb-jquery-load-json) ``` ### Alternatives [jquery-form/form The jQuery Form Plugin allows you to easily and unobtrusively upgrade HTML forms to use AJAX. 5.2k240.8k6](/packages/jquery-form-form)[colinodell/json5 UTF-8 compatible JSON5 parser for PHP 30524.1M51](/packages/colinodell-json5)[ergebnis/json-printer Provides a JSON printer, allowing for flexible indentation. 9141.0M28](/packages/ergebnis-json-printer)[ergebnis/json-normalizer Provides generic and vendor-specific normalizers for normalizing JSON documents. 8240.3M8](/packages/ergebnis-json-normalizer)[ergebnis/json Provides a Json value object for representing a valid JSON string. 2524.3M10](/packages/ergebnis-json)[ergebnis/json-pointer Provides an abstraction of a JSON pointer. 2024.4M6](/packages/ergebnis-json-pointer) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)