
Security News
vlt Launches "reproduce": A New Tool Challenging the Limits of Package Provenance
vlt's new "reproduce" tool verifies npm packages against their source code, outperforming traditional provenance adoption in the JavaScript ecosystem.
dl-json-viewer
Advanced tools
A module which renders or displays a JSON object in proper indentation (or beautified form) in an Angular application.
Run ng build dl-json-viewer
to build the project. The build artifacts will be stored in the projects/dl-json-viewer/dist/
directory.
npm i dl-json-viewer-angular
Add DLJSONViewerModule
to your application's or module's imports. For example to import the module to your application, app.module.ts
should have the following:
import { DLJsonViewerModule } from 'dl-json-viewer';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
DLJsonViewerModule
],
providers: [],
bootstrap: [AppComponent]
})
Add the lib-dl-json-viewer
directive/element to your component with the appropriate inputs to render the object.
<lib-dl-json-viewer [obj]="jsonObj" [tab-space]="4" [config]="config"></lib-dl-json-viewer>
The above code snippet will show the object jsonObj
(in the current component's members) with an indentation of 4 spaces.
Input | Type | Description |
---|---|---|
obj | any | The JSON object or array or native to be rendered by the component. |
tab-space | number | The number of spaces to use for indentation. |
config | any | The configuration object. See Configuration for more information. |
The configuration object contains the following properties:
Property | Type | Description |
---|---|---|
marker | object | The object which contains strings to demarcate an object or array. |
marker.array | object | The object which contains strings to demarcate an array. |
marker.array | object | The object which contains strings to demarcate an object. |
marker.array.separator | string | The string which separates elements in an array. |
marker.array.open | string | The string which indicates the start of an array. |
marker.array.close | string | The string which indicates the end of an array. |
marker.object.separator | string | The string which separates elements (key-value pair) in an object. |
marker.object.keyValueSeparator | string | The string which separates the key from value in an element. |
marker.object.open | string | The string which indicates the start of an object. |
marker.object.close | string | The string which indicates the end of an object. |
Below is the object structure and the default values:
const DefaultConfig: any = {
"markers": {
"array": {
"separator": ",",
"open": "[",
"close": "]"
},
"object": {
"separator": ",",
"open": "{",
"close": "}",
"keyValueSeparator": ":"
}
}
};
The default values for the configuration is the DefaultConfig
object which can be found in the default.config.ts
file.
This application is a demonstration of the use of the component. The app
component contains the jsonObj
field which is passed as input to json
of the component. This object is bound (two-way) to the text-area input in the view, so when there is text input in the text-area and the View button is clicked then the viewJSON
method in the app component is called which updates the input of the JSON viewer component and the object is then rendered in the view. To run the application use the Angular CLI command:
ng serve
The documentation for this project is generated using Compodoc tool. You can find the documentation at doc/index.html
.
FAQs
Module for JSON display in an Angular application.
The npm package dl-json-viewer receives a total of 42 weekly downloads. As such, dl-json-viewer popularity was classified as not popular.
We found that dl-json-viewer demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
vlt's new "reproduce" tool verifies npm packages against their source code, outperforming traditional provenance adoption in the JavaScript ecosystem.
Research
Security News
Socket researchers uncovered a malicious PyPI package exploiting Deezer’s API to enable coordinated music piracy through API abuse and C2 server control.
Research
The Socket Research Team discovered a malicious npm package, '@ton-wallet/create', stealing cryptocurrency wallet keys from developers and users in the TON ecosystem.