{"id":30634800,"url":"https://github.com/Verbalman/ngx-json-reader","last_synced_at":"2025-08-30T22:09:22.846Z","repository":{"id":310724101,"uuid":"1040951834","full_name":"Verbalman/ngx-json-reader","owner":"Verbalman","description":"Angular 17+ JSON reader/editor with multi-URL compare \u0026 diff","archived":false,"fork":false,"pushed_at":"2025-08-19T20:06:28.000Z","size":119,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-08-19T22:10:55.784Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Verbalman.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-08-19T18:50:38.000Z","updated_at":"2025-08-19T20:09:19.000Z","dependencies_parsed_at":"2025-08-19T22:11:01.898Z","dependency_job_id":"17a8bcab-ea40-4bc1-8530-5ece9de3bc85","html_url":"https://github.com/Verbalman/ngx-json-reader","commit_stats":null,"previous_names":["verbalman/ngx-json-reader"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/Verbalman/ngx-json-reader","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Verbalman%2Fngx-json-reader","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Verbalman%2Fngx-json-reader/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Verbalman%2Fngx-json-reader/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Verbalman%2Fngx-json-reader/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Verbalman","download_url":"https://codeload.github.com/Verbalman/ngx-json-reader/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Verbalman%2Fngx-json-reader/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":272913339,"owners_count":25014255,"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","status":"online","status_checked_at":"2025-08-30T02:00:09.474Z","response_time":77,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":[],"created_at":"2025-08-30T22:02:10.219Z","updated_at":"2025-08-30T22:09:22.834Z","avatar_url":"https://github.com/Verbalman.png","language":"TypeScript","readme":"# NgxJsonReader\n\n[![npm version](https://img.shields.io/npm/v/ngx-json-reader.svg)](https://www.npmjs.com/package/ngx-json-reader)\n[![GitHub stars](https://img.shields.io/github/stars/Verbalman/ngx-json-reader.svg?style=social)](https://github.com/Verbalman/ngx-json-reader)\n\n**ngx-json-reader** is a lightweight Angular 17+ library for working with JSON in your applications.\nIt provides a standalone component that can:\n\n- Load JSON from URLs or directly from data inputs\n- Render tree view with expand/collapse and inline editing\n- Compare multiple JSON sources side-by-side\n- Download JSON back to file\n\nPerfect for developer tools, admin dashboards, or any Angular app that needs an interactive JSON viewer/editor.\n\n## Installation\n\n```bash\nnpm install ngx-json-reader\n```\n\n## Example usage\n\n```typescript\nimport { Component } from '@angular/core';\nimport { JsonReaderComponent } from 'ngx-json-reader';\n\n@Component({\n  selector: 'app-root',\n  standalone: true,\n  imports: [JsonReaderComponent],\n  template: `\n    \u003c!-- Single JSON, editable --\u003e\n    \u003cngx-json-reader\n      [data]=\"{ hello: 'world', list: [1,2,3] }\"\n      [editable]=\"false\"\n    /\u003e\n\n    \u003c!-- Compare two JSONs --\u003e\n    \u003cngx-json-reader\n      [data]=\"[fisrt, second]\"\n      [downloadFilename]=\"downloadFilename\"\n    /\u003e\n    \n    \u003c!-- Load from URLs --\u003e\n    \u003cngx-json-reader\n      [srcUrls]=\"srcUrls\"\n      [downloadFilename]=\"downloadFilename\"\n    /\u003e\n  `\n})\nexport class AppComponent {\n  fisrt = { a: 1, b: { x: 10, y: [1,2] } };\n  second = { a: 1, b: { x: 11, y: [1,2,3] }, d: null };\n  srcUrls = [\n    './some/path/one.json',\n    './some/path/two.json',\n  ];\n  downloadFilename = [\n    'new-one.json',\n    'new-two.json',\n  ];\n}\n```\n\n## Inputs / Outputs\n\n### Inputs\n\n- `srcUrls?: string[]`: load JSONs from URLs\n- `srcHeaders?: Record\u003cstring, string\u003e`: headers for load JSONs from URLs\n- `data?: unknown | unknown[]`: single or multiple JSON objects\n- `editable = true`: enable inline editing\n- `modified = false`: enable add/remove action\n- `expanded = true`: expand all JSONs by default\n- `downloadFilename: string | string[] = 'data.json'`: filename when downloading\n\n### Outputs\n\n- `dataChange`: emits on JSON edits\n","funding_links":[],"categories":["Development Utilities"],"sub_categories":["Runtime"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FVerbalman%2Fngx-json-reader","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FVerbalman%2Fngx-json-reader","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FVerbalman%2Fngx-json-reader/lists"}