I'm trying to reformat some data from an API and I'm having trouble getting it the way I need. I need everything to be flattened and my second map function (attMap) is returning them with the an index as the key value?
var attMap = products.items.map( x => x.custom_attributes.map( y => ( {[y.attribute_code]: y.value} )));
You can see my first map function (prodMap) works properly.
var prodMap = products.items.map( x => ({ name: x.name, sku: x.sku }));
You can see the result in this image after merging them:
newArray = [];
prodMap.forEach((itm, i)=> {
newArray.push(Object.assign({}, itm, attMap[i]));
});
Fiddle: https://jsfiddle.net/dkx9qewt/
I'm not the best programmer but is my attMap map function returning an array of objects because it's nested? Is that the issue?
Edit: The output I'm looking for is something like:
["Description":"Product Description","Short Description":"shortdescription","Surname":"surname","Length":"6","Tip Configuration":"Blunt","Instrument Type":"Hemostatic Forceps","Curvature":"Curved","Working Surface Style":"Serrated with Longitudinal Groove","Handle":"Finger Rings","Material":"Stainless Steel","Disposable or Reusable":"Reusable",Sterile or Non-Sterile":"Non-Sterile","Latex or Latex-Free":"Latex-Free","Grade":"Premium OR-Grade","name":"Product 1","sku":"4242"}
Instead of:
[{"0":{"Description":"Product Description"},"1":{"Short Description":"shortdescription"},"2":{"Surname":"surname"},"3":{"Length":"6"},"4":{"Tip Configuration":"Blunt"},"5":{"Instrument Type":"Hemostatic Forceps"},"6":{"Curvature":"Curved"},"7":{"Working Surface Style":"Serrated with Longitudinal Groove"},"8":{"Handle":"Finger Rings"},"9":{"Material":"Stainless Steel"},"10":{"Disposable or Reusable":"Reusable"},"11":{"Sterile or Non-Sterile":"Non-Sterile"},"12":{"Latex or Latex-Free":"Latex-Free"},"13":{"Grade":"Premium OR-Grade"},"name":"Product 1","sku":"4242"}
Here's a technique that involves breaking the problem down into sensible parts -
const products =
{items:[{id:0,sku:"4242",name:"Product 1",attributeSetId:0,price:0,status:0,visibility:0,typeId:"string",createdAt:"string",updatedAt:"string",weight:0,extensionAttributes:[],productLinks:[],options:[],mediaGalleryEntries:[],tierPrices:[],custom_attributes:[{attribute_code:"Description","value":"Product Description"},{attribute_code:"Short Description","value":"shortdescription"},{attribute_code:"Surname","value":"surname"},{attribute_code:"Length","value":"6"},{attribute_code:"Tip Configuration","value":"Blunt"},{attribute_code:"Instrument Type","value":"Hemostatic Forceps"},{attribute_code:"Curvature","value":"Curved"},{attribute_code:"Working Surface Style","value":"Serrated with Longitudinal Groove"},{attribute_code:"Handle","value":"Finger Rings"},{attribute_code:"Material","value":"Stainless Steel"},{attribute_code:"Disposable or Reusable","value":"Reusable"},{attribute_code:"Sterile or Non-Sterile","value":"Non-Sterile"},{attribute_code:"Latex or Latex-Free","value":"Latex-Free"},{attribute_code:"Grade","value":"Premium OR-Grade"}]},{id:0,sku:"5252",name:"Product 2",attributeSetId:0,price:0,status:0,visibility:0,typeId:"string",createdAt:"string",updatedAt:"string",weight:0,extensionAttributes:[],productLinks:[],options:[],mediaGalleryEntries:[],tierPrices:[],custom_attributes:[{attribute_code:"Description","value":"Product Description"},{attribute_code:"Short Description","value":"shortdescription"},{attribute_code:"Surname","value":"surname"},{attribute_code:"Length","value":"4"},{attribute_code:"Tip Configuration","value":"Square End"},{attribute_code:"Instrument Type","value":"Glass Forceps"},{attribute_code:"Curvature","value":"Angled"},{attribute_code:"Working Surface Style","value":"Smooth"},{attribute_code:"Handle","value":"Thumb"},{attribute_code:"Material","value":"Stainless Steel"},{attribute_code:"Disposable or Reusable","value":"Reusable"},{attribute_code:"Sterile or Non-Sterile","value":"Non-Sterile"},{attribute_code:"Latex or Latex-Free","value":"Latex-Free"},{attribute_code:"Grade","value":"Premium OR-Grade"}]},{id:0,sku:"4243",name:"Product 3",attributeSetId:0,price:0,status:0,visibility:0,typeId:"string",createdAt:"string",updatedAt:"string",weight:0,extensionAttributes:[],productLinks:[],options:[],mediaGalleryEntries:[],tierPrices:[],custom_attributes:[{attribute_code:"Description","value":"Product Description"},{attribute_code:"Short Description","value":"shortdescription"},{attribute_code:"Surname","value":"surname"},{attribute_code:"Length","value":"6"},{attribute_code:"Tip Configuration","value":"Blunt"},{attribute_code:"Instrument Type","value":"Hemostatic Forceps"},{attribute_code:"Curvature","value":"Curved"},{attribute_code:"Working Surface Style","value":"Serrated with Longitudinal Groove"},{attribute_code:"Handle","value":"Finger Rings"},{attribute_code:"Material","value":"Stainless Steel"},{attribute_code:"Disposable or Reusable","value":"Reusable"},{attribute_code:"Sterile or Non-Sterile","value":"Non-Sterile"},{attribute_code:"Latex or Latex-Free","value":"Latex-Free"},{attribute_code:"Grade","value":"Premium OR-Grade"}]},{id:0,sku:"5254",name:"Product 4",attributeSetId:0,price:0,status:0,visibility:0,typeId:"string",createdAt:"string",updatedAt:"string",weight:0,extensionAttributes:[],productLinks:[],options:[],mediaGalleryEntries:[],tierPrices:[],custom_attributes:[{attribute_code:"Description","value":"Product Description"},{attribute_code:"Short Description","value":"shortdescription"},{attribute_code:"Surname","value":"surname"},{attribute_code:"Length","value":"4"},{attribute_code:"Tip Configuration","value":"Square End"},{attribute_code:"Instrument Type","value":"Glass Forceps"},{attribute_code:"Curvature","value":"Angled"},{attribute_code:"Working Surface Style","value":"Smooth"},{attribute_code:"Handle","value":"Thumb"},{attribute_code:"Material","value":"Stainless Steel"},{attribute_code:"Disposable or Reusable","value":"Reusable"},{attribute_code:"Sterile or Non-Sterile","value":"Non-Sterile"},{attribute_code:"Latex or Latex-Free","value":"Latex-Free"},{attribute_code:"Grade","value":"Premium OR-Grade"}]}]}
const flattenAttributes = ({ custom_attributes = [], ...product }) =>
{ const mergeAttribute = (r = {}, { attribute_code = "", value = "" }) =>
Object.assign(r, { [attribute_code]: value })
const flat =
custom_attributes.reduce(mergeAttribute, {})
return { ...product, custom_attributes: flat }
}
console.log(products.items.map(flattenAttributes))
Here's the output -
[ { id: 0,
sku: '4242',
name: 'Product 1',
attributeSetId: 0,
price: 0,
status: 0,
visibility: 0,
typeId: 'string',
createdAt: 'string',
updatedAt: 'string',
weight: 0,
extensionAttributes: [],
productLinks: [],
options: [],
mediaGalleryEntries: [],
tierPrices: [],
custom_attributes:
{ Description: 'Product Description',
'Short Description': 'shortdescription',
Surname: 'surname',
Length: '6',
'Tip Configuration': 'Blunt',
'Instrument Type': 'Hemostatic Forceps',
Curvature: 'Curved',
'Working Surface Style': 'Serrated with Longitudinal Groove',
Handle: 'Finger Rings',
Material: 'Stainless Steel',
'Disposable or Reusable': 'Reusable',
'Sterile or Non-Sterile': 'Non-Sterile',
'Latex or Latex-Free': 'Latex-Free',
Grade: 'Premium OR-Grade' } },
... ]
If you just want name and sku inline with custom_attributes, consider this slight modification -
const products =
{items:[{id:0,sku:"4242",name:"Product 1",attributeSetId:0,price:0,status:0,visibility:0,typeId:"string",createdAt:"string",updatedAt:"string",weight:0,extensionAttributes:[],productLinks:[],options:[],mediaGalleryEntries:[],tierPrices:[],custom_attributes:[{attribute_code:"Description","value":"Product Description"},{attribute_code:"Short Description","value":"shortdescription"},{attribute_code:"Surname","value":"surname"},{attribute_code:"Length","value":"6"},{attribute_code:"Tip Configuration","value":"Blunt"},{attribute_code:"Instrument Type","value":"Hemostatic Forceps"},{attribute_code:"Curvature","value":"Curved"},{attribute_code:"Working Surface Style","value":"Serrated with Longitudinal Groove"},{attribute_code:"Handle","value":"Finger Rings"},{attribute_code:"Material","value":"Stainless Steel"},{attribute_code:"Disposable or Reusable","value":"Reusable"},{attribute_code:"Sterile or Non-Sterile","value":"Non-Sterile"},{attribute_code:"Latex or Latex-Free","value":"Latex-Free"},{attribute_code:"Grade","value":"Premium OR-Grade"}]},{id:0,sku:"5252",name:"Product 2",attributeSetId:0,price:0,status:0,visibility:0,typeId:"string",createdAt:"string",updatedAt:"string",weight:0,extensionAttributes:[],productLinks:[],options:[],mediaGalleryEntries:[],tierPrices:[],custom_attributes:[{attribute_code:"Description","value":"Product Description"},{attribute_code:"Short Description","value":"shortdescription"},{attribute_code:"Surname","value":"surname"},{attribute_code:"Length","value":"4"},{attribute_code:"Tip Configuration","value":"Square End"},{attribute_code:"Instrument Type","value":"Glass Forceps"},{attribute_code:"Curvature","value":"Angled"},{attribute_code:"Working Surface Style","value":"Smooth"},{attribute_code:"Handle","value":"Thumb"},{attribute_code:"Material","value":"Stainless Steel"},{attribute_code:"Disposable or Reusable","value":"Reusable"},{attribute_code:"Sterile or Non-Sterile","value":"Non-Sterile"},{attribute_code:"Latex or Latex-Free","value":"Latex-Free"},{attribute_code:"Grade","value":"Premium OR-Grade"}]},{id:0,sku:"4243",name:"Product 3",attributeSetId:0,price:0,status:0,visibility:0,typeId:"string",createdAt:"string",updatedAt:"string",weight:0,extensionAttributes:[],productLinks:[],options:[],mediaGalleryEntries:[],tierPrices:[],custom_attributes:[{attribute_code:"Description","value":"Product Description"},{attribute_code:"Short Description","value":"shortdescription"},{attribute_code:"Surname","value":"surname"},{attribute_code:"Length","value":"6"},{attribute_code:"Tip Configuration","value":"Blunt"},{attribute_code:"Instrument Type","value":"Hemostatic Forceps"},{attribute_code:"Curvature","value":"Curved"},{attribute_code:"Working Surface Style","value":"Serrated with Longitudinal Groove"},{attribute_code:"Handle","value":"Finger Rings"},{attribute_code:"Material","value":"Stainless Steel"},{attribute_code:"Disposable or Reusable","value":"Reusable"},{attribute_code:"Sterile or Non-Sterile","value":"Non-Sterile"},{attribute_code:"Latex or Latex-Free","value":"Latex-Free"},{attribute_code:"Grade","value":"Premium OR-Grade"}]},{id:0,sku:"5254",name:"Product 4",attributeSetId:0,price:0,status:0,visibility:0,typeId:"string",createdAt:"string",updatedAt:"string",weight:0,extensionAttributes:[],productLinks:[],options:[],mediaGalleryEntries:[],tierPrices:[],custom_attributes:[{attribute_code:"Description","value":"Product Description"},{attribute_code:"Short Description","value":"shortdescription"},{attribute_code:"Surname","value":"surname"},{attribute_code:"Length","value":"4"},{attribute_code:"Tip Configuration","value":"Square End"},{attribute_code:"Instrument Type","value":"Glass Forceps"},{attribute_code:"Curvature","value":"Angled"},{attribute_code:"Working Surface Style","value":"Smooth"},{attribute_code:"Handle","value":"Thumb"},{attribute_code:"Material","value":"Stainless Steel"},{attribute_code:"Disposable or Reusable","value":"Reusable"},{attribute_code:"Sterile or Non-Sterile","value":"Non-Sterile"},{attribute_code:"Latex or Latex-Free","value":"Latex-Free"},{attribute_code:"Grade","value":"Premium OR-Grade"}]}]}
const flattenAttributes = ({ name = "", sku = "", custom_attributes = [] }) =>
{ const mergeAttribute = (r = {}, { attribute_code = "", value = "" }) =>
Object.assign(r, { [attribute_code]: value })
const flat =
custom_attributes.reduce(mergeAttribute, {})
return { ...flat, name, sku }
}
console.log(products.items.map(flattenAttributes))
This matches your expected output -
[ { Description: 'Product Description',
'Short Description': 'shortdescription',
Surname: 'surname',
Length: '6',
'Tip Configuration': 'Blunt',
'Instrument Type': 'Hemostatic Forceps',
Curvature: 'Curved',
'Working Surface Style': 'Serrated with Longitudinal Groove',
Handle: 'Finger Rings',
Material: 'Stainless Steel',
'Disposable or Reusable': 'Reusable',
'Sterile or Non-Sterile': 'Non-Sterile',
'Latex or Latex-Free': 'Latex-Free',
Grade: 'Premium OR-Grade',
name: 'Product 1',
sku: '4242' },
... ]
Array.map always returns an array, since what you want is a generic object, map is not what you want.
var products = {
"items": [
{
"id": 0,
"sku": "4242",
"name": "Product 1",
"attributeSetId": 0,
"price": 0,
"status": 0,
"visibility": 0,
"typeId": "string",
"createdAt": "string",
"updatedAt": "string",
"weight": 0,
"extensionAttributes": [],
"productLinks": [],
"options": [],
"mediaGalleryEntries": [],
"tierPrices": [],
"custom_attributes": [
{
"attribute_code" : "Description",
"value" : "Product Description"
},
{
"attribute_code" : "Short Description",
"value" : "shortdescription"
},
{
"attribute_code" : "Surname",
"value" : "surname"
},
{
"attribute_code" : "Length",
"value" : "6"
},
{
"attribute_code" : "Tip Configuration",
"value" : "Blunt"
},
{
"attribute_code" : "Instrument Type",
"value" : "Hemostatic Forceps"
},
{
"attribute_code" : "Curvature",
"value" : "Curved"
},
{
"attribute_code" : "Working Surface Style",
"value" : "Serrated with Longitudinal Groove"
},
{
"attribute_code" : "Handle",
"value" : "Finger Rings"
},
{
"attribute_code" : "Material",
"value" : "Stainless Steel"
},
{
"attribute_code" : "Disposable or Reusable",
"value" : "Reusable"
},
{
"attribute_code" : "Sterile or Non-Sterile",
"value" : "Non-Sterile"
},
{
"attribute_code" : "Latex or Latex-Free",
"value" : "Latex-Free"
},
{
"attribute_code" : "Grade",
"value" : "Premium OR-Grade"
}
]
},
{
"id": 0,
"sku": "5252",
"name": "Product 2",
"attributeSetId": 0,
"price": 0,
"status": 0,
"visibility": 0,
"typeId": "string",
"createdAt": "string",
"updatedAt": "string",
"weight": 0,
"extensionAttributes": [],
"productLinks": [],
"options": [],
"mediaGalleryEntries": [],
"tierPrices": [],
"custom_attributes": [
{
"attribute_code" : "Description",
"value" : "Product Description"
},
{
"attribute_code" : "Short Description",
"value" : "shortdescription"
},
{
"attribute_code" : "Surname",
"value" : "surname"
},
{
"attribute_code" : "Length",
"value" : "4"
},
{
"attribute_code" : "Tip Configuration",
"value" : "Square End"
},
{
"attribute_code" : "Instrument Type",
"value" : "Glass Forceps"
},
{
"attribute_code" : "Curvature",
"value" : "Angled"
},
{
"attribute_code" : "Working Surface Style",
"value" : "Smooth"
},
{
"attribute_code" : "Handle",
"value" : "Thumb"
},
{
"attribute_code" : "Material",
"value" : "Stainless Steel"
},
{
"attribute_code" : "Disposable or Reusable",
"value" : "Reusable"
},
{
"attribute_code" : "Sterile or Non-Sterile",
"value" : "Non-Sterile"
},
{
"attribute_code" : "Latex or Latex-Free",
"value" : "Latex-Free"
},
{
"attribute_code" : "Grade",
"value" : "Premium OR-Grade"
}
]
},
{
"id": 0,
"sku": "4243",
"name": "Product 3",
"attributeSetId": 0,
"price": 0,
"status": 0,
"visibility": 0,
"typeId": "string",
"createdAt": "string",
"updatedAt": "string",
"weight": 0,
"extensionAttributes": [],
"productLinks": [],
"options": [],
"mediaGalleryEntries": [],
"tierPrices": [],
"custom_attributes": [
{
"attribute_code" : "Description",
"value" : "Product Description"
},
{
"attribute_code" : "Short Description",
"value" : "shortdescription"
},
{
"attribute_code" : "Surname",
"value" : "surname"
},
{
"attribute_code" : "Length",
"value" : "6"
},
{
"attribute_code" : "Tip Configuration",
"value" : "Blunt"
},
{
"attribute_code" : "Instrument Type",
"value" : "Hemostatic Forceps"
},
{
"attribute_code" : "Curvature",
"value" : "Curved"
},
{
"attribute_code" : "Working Surface Style",
"value" : "Serrated with Longitudinal Groove"
},
{
"attribute_code" : "Handle",
"value" : "Finger Rings"
},
{
"attribute_code" : "Material",
"value" : "Stainless Steel"
},
{
"attribute_code" : "Disposable or Reusable",
"value" : "Reusable"
},
{
"attribute_code" : "Sterile or Non-Sterile",
"value" : "Non-Sterile"
},
{
"attribute_code" : "Latex or Latex-Free",
"value" : "Latex-Free"
},
{
"attribute_code" : "Grade",
"value" : "Premium OR-Grade"
}
]
},
{
"id": 0,
"sku": "5254",
"name": "Product 4",
"attributeSetId": 0,
"price": 0,
"status": 0,
"visibility": 0,
"typeId": "string",
"createdAt": "string",
"updatedAt": "string",
"weight": 0,
"extensionAttributes": [],
"productLinks": [],
"options": [],
"mediaGalleryEntries": [],
"tierPrices": [],
"custom_attributes": [
{
"attribute_code" : "Description",
"value" : "Product Description"
},
{
"attribute_code" : "Short Description",
"value" : "shortdescription"
},
{
"attribute_code" : "Surname",
"value" : "surname"
},
{
"attribute_code" : "Length",
"value" : "4"
},
{
"attribute_code" : "Tip Configuration",
"value" : "Square End"
},
{
"attribute_code" : "Instrument Type",
"value" : "Glass Forceps"
},
{
"attribute_code" : "Curvature",
"value" : "Angled"
},
{
"attribute_code" : "Working Surface Style",
"value" : "Smooth"
},
{
"attribute_code" : "Handle",
"value" : "Thumb"
},
{
"attribute_code" : "Material",
"value" : "Stainless Steel"
},
{
"attribute_code" : "Disposable or Reusable",
"value" : "Reusable"
},
{
"attribute_code" : "Sterile or Non-Sterile",
"value" : "Non-Sterile"
},
{
"attribute_code" : "Latex or Latex-Free",
"value" : "Latex-Free"
},
{
"attribute_code" : "Grade",
"value" : "Premium OR-Grade"
}
]
}
]
}
var prodMap = [];
products.items.forEach( x => {
var obj = {};
x.custom_attributes.forEach( o => {
obj[o.attribute_code] = o.value;
});
prodMap.push(obj);
});
console.log(prodMap);
For those who are looking for code:
As suggested in the comments, the Object.assign() method (see MDN Docs) does the trick.
var modifiedAtt = attMap.map(item => item.reduce((acc, i)=> Object.assign({}, acc, i)))
this gives the expected output. Tested on node v10.12.0 with JavaScript.
For other readers:
Object.assign(target, sourceObj1, sourceObj2...) takes the first argument as the target and copy the values of all enumerable own properties of the other arguments (Objects) into the target Object, overwriting any that have the same key. Object.assign() returns the modified target Object.
The Array.reduce(function(sum, currentArrayValue, index, array), startValue) method (MDN) iterates over all values of an Array reducing the Array to a single value (sum). It takes a function as it's first argument, with the second, optional, argument being the starting value of the sum. The arguments for that function are an accumulator, the current value of the Array, the current index, and the Array itself. The function returns the new value of the accumulator, which is then passes to the function in the next iteration, or is the value returned from the .reduce() after the last Array value is operated upon.
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.
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);
https://www.npmjs.com/package/jsoncode