json-merge

bahrus

by SlashBunny

HTML

<base href="https://raw-dot-custom-elements.appspot.com/bahrus/json-merge/0.0.2/json-merge/">
<script src="../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="json-merge-sync.html">

<dom-module id="my-component">
  <template>
    <div>Input:</div>
    <textarea id="textA" value="{{taInput::input}}" rows="10" cols="40">[ {"name": "Harry Potter", "age":"13"}, {"name": "Albus Dumbledore", "age":"279"} ]
    </textarea>
    <br>
    <div>See markup to see json text that is getting merged...</div>
    <br>
    <json-merge watch="[[jsonInput]]" wrap-object-with-path="data" result="{{mergedObject}}">
      <script type="application/json">
        [{ "columns":[ {"id": "index", "name": "Index", "field": "index"}, {"id": "isActive", "name": "Active", "field": "isActive"}, {"id": "balance", "name": "Balance", "field": "balance", "formatter": "${refs.testFormatter}"}, {"id": "age", "name": "Age",
        "field": "age"}, {"id": "eyeColor", "name": "Eye Color", "field": "eyeColor"}, {"id": "name", "name": "Name", "field": "name"}, {"id": "gender", "name": "Gender", "field": "gender"}, {"id": "company", "name":"Company", "field": "company"} ], "gridOptions":{
        "enableCellNavigation": true, "enableColumnReorder": false } }]
      </script>
    </json-merge>
    <div>Output:</div>
    <textarea rows="15" cols="80">[[mergedObjectStringified]]</textarea>
  </template>
</dom-module>
<script>
  class MyComponent extends Polymer.Element {
    static get is() {
      return 'my-component';
    }
    static get properties() {
      return {
        taInput: {
          type: String,
          observer: 'convertTextAreaToJSON'
        },
        jsonInput: {
          type: Object
        },
        mergedObject: {
          type: Object,
          observer: 'onMergedObjectChanges'
        },
        mergedObjectStringified: {
          type: String,
        }
      }
    }
    convertTextAreaToJSON()...