Skip to main content

JSON Diff Renderer

📘 Developer Guide

With the JSON-Diff Brick, you are able to render a JSON-Diff based on JSON Diff Patch.

🔁 Example

Designer

Runtime

⚙️ Configuration Properties

Config
Key Label Description Default Value
title The Title of the Diff-Container Can be optional. If nothing is provided, the title will not get rendered
string		 JSON Diff Renderer
jsonDiffString* The JSON-Diff as a string. Learn more here JSON Diff Patch | Tab JSON Defines the structure of the JSON-Diff. Objects will be converted automatically.
Object | string		 null

🛠️ Usage

Designer

(Use the build in configuration Inputs in the right Side-Nav)

Config

(Edit the whole configuration of the Tab-Toggle to your liking)

⌨️ Programmatical Data

How to change the JSON-Diff via Scripting
 
const newDiff = {
    summary: [
        '@@ -638,17 +638,17 @@\n via, Bra\n-z\n+s\n il,  %0ACh\n@@ -916,20 +916,13 @@\n re a\n-lso known as\n+.k.a.\n  Car\n',
        0,
        2,
    ],
    surface: [17840000, 0, 0],
    demographics: {
        population: [385742554, 385744896],
    },
    languages: {
        '2': ['inglés'],
        _t: 'a',
        _2: ['english', 0, 0],
    },
    countries: {
        '0': {
            capital: ['Buenos Aires', 'Rawson'],
        },
        '9': [
            {
                name: 'Antártida',
            },
        ],
        '10': {
            population: [42888594],
        },
        _t: 'a',
        _4: ['', 10, 3],
        _8: ['', 2, 3],
        _10: [
            {
                name: 'Uruguay',
                capital: 'Montevideo',
                independence: '1825-08-24T23:06:32.000Z',
            },
            0,
            0,
        ],
        _11: [
            {
                name: 'Venezuela',
                capital: 'Caracas',
                independence: '1811-07-04T23:06:32.000Z',
            },
            0,
            0,
        ],
    },
    spanishName: ['Sudamérica'],
}

// 💱 Modify and merge the config to change the rendered view
// You can either pass a JS-Object or a stringified JSON into the property, both will get handled.
fyzBrick.cRef.mergeConfig({ jsonDiffString: newDiff })

No comments to display

Back to top