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.
6 Answers
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 } ]
}That's regular JavaScript, not JSON. Move the if statement outside:
if (page) { var config = [ { "name" : "SiteTitle", "bgcolor" : "", "color" : "", "position" : "TL", "text" : "step1", "time" : 5000 }, { "name" : "Jawal", "bgcolor" : "", "color" : "", "text" : "step2", "position" : "BL", "time" : 5000 } ];
} else { var config = [ { "name" : "Password", "bgcolor" : "", "color" : "", "text" : "step3", "position" : "TL", "time" : 5000 } ];
}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 }]),
];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 } ];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 });
}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);
