{"id":26976867,"url":"https://github.com/kevindb/jquery-load-json","last_synced_at":"2025-07-30T23:11:22.573Z","repository":{"id":30131995,"uuid":"33682034","full_name":"kevindb/jquery-load-json","owner":"kevindb","description":"jQuery plugin that enables developers to load JSON data from the server and load JSON object into the DOM","archived":false,"fork":false,"pushed_at":"2022-05-25T23:15:52.000Z","size":739,"stargazers_count":27,"open_issues_count":8,"forks_count":14,"subscribers_count":5,"default_branch":"master","last_synced_at":"2024-09-07T10:01:45.620Z","etag":null,"topics":["ajax-form","html-form","javascript","jquery","jquery-plugin","json","loadjson-plugin"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"lgpl-2.1","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/kevindb.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.md","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-04-09T17:12:34.000Z","updated_at":"2023-01-30T09:57:26.000Z","dependencies_parsed_at":"2022-08-17T18:35:11.667Z","dependency_job_id":null,"html_url":"https://github.com/kevindb/jquery-load-json","commit_stats":null,"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kevindb%2Fjquery-load-json","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kevindb%2Fjquery-load-json/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kevindb%2Fjquery-load-json/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kevindb%2Fjquery-load-json/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kevindb","download_url":"https://codeload.github.com/kevindb/jquery-load-json/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246998229,"owners_count":20866696,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["ajax-form","html-form","javascript","jquery","jquery-plugin","json","loadjson-plugin"],"created_at":"2025-04-03T12:17:15.537Z","updated_at":"2025-04-03T12:17:16.152Z","avatar_url":"https://github.com/kevindb.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# jQuery loadJSON plugin\nThis 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.\n\n## Community\nWant to contribute to jQuery loadJSON? Awesome! See [CONTRIBUTING](CONTRIBUTING.md) for more information.\n\n### Code of Conduct\nPlease 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.\n\n## Requirements\nRequires jQuery 1.7+.\n\n## Download\n* **Development:** [src/jquery.loadJSON.js](https://github.com/kevindb/jquery-load-json/blob/master/src/jquery.loadJSON.js)\n* **Production/Minified:** [dist/jquery.loadJSON.min.js](https://github.com/kevindb/jquery-load-json/blob/master/dist/jquery.form.min.js)\n\n### CDN\n```html\n\u003cscript src=\"https://cdn.jsdelivr.net/gh/kevindb/jquery-load-json@1.3.4/dist/jquery.loadJSON.min.js\" integrity=\"sha384-ivtX4sn4dcdfHiO4e0/956wIQSerxsy2QZ6EHzdCVLlyGYYjSb8bqdxKY8IsfDGh\" crossorigin=\"anonymous\"\u003e\u003c/script\u003e\n```\nor\n```html\n\u003cscript src=\"https://cdn.rawgit.com/kevindb/jquery-load-json/v1.3.4/dist/jquery.loadJSON.min.js\" integrity=\"sha384-ivtX4sn4dcdfHiO4e0/956wIQSerxsy2QZ6EHzdCVLlyGYYjSb8bqdxKY8IsfDGh\" crossorigin=\"anonymous\"\u003e\u003c/script\u003e\n```\n\n## Usage\nTo use loadJSON plugin two items should be defined:\n  * HTML code that will be used as template\n  * JSON object that will be used to populate template\n\n### HTML template\nTemplate 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:\n```\n\t\t\u003cdiv id=\"data\"\u003e\n\t\t\t\u003ch1 id=\"Name\"\u003e\u003c/h1\u003e\n\t\t\t\u003clabel for=\"Address\"\u003eAddress:\u003c/label\u003e\n\t\t\t\u003cspan id=\"Address\"\u003e\u003c/span\u003e\t\n\t\t\t\u003clabel for=\"Contact\"\u003eContact by:\u003c/label\u003e\n\t\t\t\u003cspan id=\"Contact\"\u003e\u003c/span\u003e\n\t\t\u003c/div\u003e\n```\n\nIn the template h1 tag with id Name, and span tags with ids Address and Contact will be populated with JSON properties.\n\n### JSON object\nOnce 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:\n```\n\t\tdata = {\n\t\t\t\t\t\"Name\":\"Emkay Entertainments\",\n\t\t\t\t\t\"Address\":\"Nobel House, Regent Centre\",\n\t\t\t\t\t\"Contact\":\"Phone\"\n\t\t}  \n```\nObject has three properties (Name, Address, and Contact) that will be injected into the template.\n\n### Binding JSON object to the template\nOnce 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:\n```\n\t\t$('div#data').loadJSON(data);\n```\nAs a result 'data' object will be loaded into the HTML fragment with id data. Resulting HTML is shown in the following listing:\n```\n\t\t\u003cdiv id=\"data\"\u003e\n\t\t\t\u003ch1 id=\"Name\"\u003eEmkay Entertainments\u003c/h1\u003e\n\t\t\t\u003clabel for=\"Address\"\u003eAddress:\u003c/label\u003e\n\t\t\t\u003cspan id=\"Address\"\u003eNobel House, Regent Centre\u003c/span\u003e\t\n\t\t\t\u003clabel for=\"Contact\"\u003eContact by:\u003c/label\u003e\n\t\t\t\u003cspan id=\"Contact\"\u003ePhone\u003c/span\u003e\n\t\t\u003c/div\u003e\n```\n\nYou can find detailed instructions how the plugin can be used in the following pages:\n  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\n  1. [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\n  1. [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\n\n## Examples\nYou can see few live examples where it is shown how loadJSON plugin can be used:\n  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,\n  1. [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,\n  1. [Populating form with JSON object](examples/edit.html?ID=17) - this example shows how you can populate form elements from the JSON object,\n  1. [Loading complex/hierarchical structure](examples/hierarchy.html) this example show how you can generate complex structures using loadJSON plugin,\n  1. [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,\n  1. [Adding load events](examples/events.html) in this example is shown how you can define on load events,\n  1. [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.\n  1. [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.\n  1. [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.\n\n## Contributors\nThis project has had several previous homes.\nSee [CONTRIBUTORS](CONTRIBUTORS.md) for details.\n\n## License\n\nThis repository is licensed under the GNU Lesser General Public License v2.1.  \nSee [LICENSE](LICENSE.md) for details.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkevindb%2Fjquery-load-json","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkevindb%2Fjquery-load-json","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkevindb%2Fjquery-load-json/lists"}