https://github.com/bahrus/json-merge
Vanilla web components designed to merge JSON objects into other objects
https://github.com/bahrus/json-merge
Last synced: 3 months ago
JSON representation
Vanilla web components designed to merge JSON objects into other objects
- Host: GitHub
- URL: https://github.com/bahrus/json-merge
- Owner: bahrus
- License: mit
- Created: 2017-06-20T15:31:22.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2023-04-18T16:41:50.000Z (about 2 years ago)
- Last Synced: 2025-01-31T23:04:51.761Z (4 months ago)
- Language: TypeScript
- Homepage:
- Size: 2.29 MB
- Stars: 1
- Watchers: 3
- Forks: 0
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://www.webcomponents.org/element/bahrus/json-merge)
# \
xtal-json-merge merges predefined json with some dynamic json.
It can be useful for declarative custom elements, or template-based components, and demo pages that use html markup as the primary way of demonstrating the functionality of specific types of components, which we categorize below.
[Demo](https://codepen.io/bahrus/pen/ZELMbrN)
## Mission
Many complex components, like grids or charts, require a large amount of declarative configuration, beyond what is optimally configured via attributes.
I would venture that 50% of UI Screens in the world consist of the following workflow:
1) Get data
2) Merge with configuration (and/or other manipulation of the data, not discussed here)
3) Render using some specialized renderer (like a grid or chart component).
We assume here that step 3 is:
1) done with another third party web component. For simplicity we'll assume it's called my-grid
2) defined via some form of template markup i.e. \
Some components, like the Vaadin grid, choose to be configured via light DOM elements (a perfectly fine approach). This component is of no help in those circumstances.
Other components tend to view themselves primarily as a JavaScript api, and then just quickly put a web component wrapper around it. Often that api consists of a single function or two, with a single parameter, where declarative JSON is expected to be passed. These components are designed to facilitate working with such components.
This component, xtal-json-merge, enforces the declarative, optimized, side-effect free, XSS safe principles by insisting that the content is strictly compliant JSON. See [other examples of embedding JSON as part of the markup](https://www.ampproject.org/docs/reference/components/amp-bind).
Note that someone ([Νίκος](https://marketplace.visualstudio.com/items?itemName=sissel.json-script-tag)) has kindly provided a nice VSCode extension, that makes editing JSON much easier.
The JSON needs to be wrapped inside a script tag with type application/json, as shown below.
```html
//JSON goes here
```
## Example
```html
[
{
"formula": "NaCl",
"meltingPoint": 801,
"boilingPoint": 1413
},
{
"formula": "CaF2",
"meltingPoint": 1418,
"boilingPoint": 1533
}
]
Merge with
[{
"columns":[
{"name": "Formula", "field": "formula"},
{"name": "Melting Point", "field": "meltingPoint"},
{"name": "BoilingPoint", "field": "boilingPoint"}
],
"gridOptions":{
"enableCellNavigation": true,
"enableColumnReorder": false
}
}]
{
"columns":[
{"name": "Formula", "field": "formula"},
{"name": "Melting Point", "field": "meltingPoint"},
{"name": "BoilingPoint", "field": "boilingPoint"}
],
"gridOptions":{
"enableCellNavigation": true,
"enableColumnReorder": false
}
}
```
## Running xtal-json-merge
1. Install node.js
2. Fork or clone this repo.
3. Open command and navigate to location of fork or clone.
4. Issue the following commands:
```
$ npm install
$ npm run serve
```
5. Open your browser to (typically) http://localhost:3030/demo/dev.html