'How to use if statement inside JSON?

How to use if statement inside JSON Here is the code: .......................................................................................

var config =
             [
                {
                    "name"      : "SiteTitle",
                    "bgcolor"   : "",
                    "color"     : "",
                    "position"  : "TL",
                    "text"      : "step1",
                    "time"      : 5000
                },
                {
                    "name"      : "Jawal",
                    "bgcolor"   : "",
                    "color"     : "",
                    "text"      : "step2",
                    "position"  : "BL",
                    "time"      : 5000
                },
                {
                    "name"      : "Password",
                    "bgcolor"   : "",
                    "color"     : "",
                    "text"      : "step3",
                    "position"  : "TL",
                    "time"      : 5000
                }
            ],

            //define if steps should change automatically
            autoplay    = false,
            //timeout for the step
            showtime,
            //current step of the tour
            step        = 0,
            //total number of steps
            total_steps = config.length;

This is the required result something like this:

    var config =
         [

    if(page==true)  {               
            {
                "name"      : "SiteTitle",
                "bgcolor"   : "",
                "color"     : "",
                "position"  : "TL",
                "text"      : "step1",
                "time"      : 5000
            },
            {
                "name"      : "Jawal",
                "bgcolor"   : "",
                "color"     : "",
                "text"      : "step2",
                "position"  : "BL",
                "time"      : 5000
            }
    } else {
            {
                "name"      : "Password",
                "bgcolor"   : "",
                "color"     : "",
                "text"      : "step3",
                "position"  : "TL",
                "time"      : 5000
            }
    }
        ],

            //define if steps should change automatically
            autoplay    = false,
            //timeout for the step
            showtime,
            //current step of the tour
            step        = 0,
            //total number of steps
            total_steps = config.length;

Actually this way is wrong and makes a JavaScript syntax error.

Solution 1:^[1]

Validating the JSON Schema Draft-07, JSON now supports the if...then...else keywords for conditional data representation.

Here is a quick example:

{
    "type": "integer",
    "minimum": 1,
    "maximum": 1000,
    "if": { "minimum": 100 },
    "then": { "multipleOf": 100 },
    "else": {
        "if": { "minimum": 10 },
        "then": { "multipleOf": 10 }
    }
}

Edits

Using the OP's example in the context, it can be written like this:

{
    "if": {
        "page": true
    },
    "then": [
        {
            "name": "SiteTitle",
            "bgcolor": "",
            "color": "",
            "position": "TL",
            "text": "step1",
            "time": 5000
        },
        {
            "name": "Jawal",
            "bgcolor": "",
            "color": "",
            "text": "step2",
            "position": "BL",
            "time": 5000
        }
    ],
    "else": [
        {
            "name": "Password",
            "bgcolor": "",
            "color": "",
            "text": "step3",
            "position": "TL",
            "time": 5000
        }
    ]
}

Solution 2:^[2]

you can add an if inside JSON.

const config = [
...(page ? [
     {
        "name"      : "SiteTitle",
        "bgcolor"   : "",
        "color"     : "",
        "position"  : "TL",
        "text"      : "step1",
        "time"      : 5000
    },
    {
        "name"      : "Jawal",
        "bgcolor"   : "",
        "color"     : "",
        "text"      : "step2",
        "position"  : "BL",
        "time"      : 5000
    }] : [{
        "name"      : "Password",
        "bgcolor"   : "",
        "color"     : "",
        "text"      : "step3",
        "position"  : "TL",
        "time"      : 5000
    }]),
];

Solution 3:^[3]

or perhaps this:

 var config =
  (page == true) ?
     [             
        {
            "name"      : "SiteTitle",
            "bgcolor"   : "",
            "color"     : "",
            "position"  : "TL",
            "text"      : "step1",
            "time"      : 5000
        },
        {
            "name"      : "Jawal",
            "bgcolor"   : "",
            "color"     : "",
            "text"      : "step2",
            "position"  : "BL",
            "time"      : 5000
        }
  :
        {
            "name"      : "Password",
            "bgcolor"   : "",
            "color"     : "",
            "text"      : "step3",
            "position"  : "TL",
            "time"      : 5000
        }
    ];

Solution 4:^[4]

You can do it this way also (not saying this is the best way but it's another way and could be useful in some scenarios)

let config = [];
if (page) {
   config.push({
        "name"      : "SiteTitle",
        "bgcolor"   : "",
        "color"     : "",
        "position"  : "TL",
        "text"      : "step1",
        "time"      : 5000
    });
   config.push({
        "name"      : "Jawal",
        "bgcolor"   : "",
        "color"     : "",
        "text"      : "step2",
        "position"  : "BL",
        "time"      : 5000
    });
} else {
    config.push({
        "name"      : "Password",
        "bgcolor"   : "",
        "color"     : "",
        "text"      : "step3",
        "position"  : "TL",
        "time"      : 5000
    });
}

Solution 5:^[5]

You can use a library jsoncode that allows you to apply logical expressions directly into JSON and get the necessary result according to the transmitted model:

import jsoncode from './jsoncode.lib.mjs';

const json_src = {
    "configs [AS ARRAY]": {
        "[...IF page]": [
            {
                "name": "SiteTitle",
                "bgcolor": "",
                "color": "",
                "position": "TL",
                "text": "step1",
                "time": 5000
            }, {
                "name": "Jawal",
                "bgcolor": "",
                "color": "",
                "text": "step2",
                "position": "BL",
                "time": 5000
            }
        ],
        "[IF !page]": {
            "name": "Password",
            "bgcolor": "",
            "color": "",
            "text": "step3",
            "position": "TL",
            "time": 5000
        }
    }
};

const configsA = jsoncode(json_src, { page: true  }).configs;
const configsB = jsoncode(json_src, { page: false }).configs;

console.log('configsA:', configsA);
console.log('configsB:', configsB);

https://www.npmjs.com/package/jsoncode

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1
Solution 2	Peter the Russian
Solution 3	james emanon
Solution 4	DarkCrazy
Solution 5	Mog Chothra

'How to use if statement inside JSON?

Solution 1:[1]

Edits

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]