javascript JSON find and replace - javascript

I have some JSON I would like to do a find and replace on. The issue is that other parts of the JSON might also contain that string as a part of a word. For example timestamp and pw.alert.timestamp.iso.
I only want to replace it when the match is a standalone timestamp.
"blocks": [{
"text": {
"text": "pw.alert.severity - pw.alert.title - timestamp",
"type": "plain_text"
},
"type": "header"
}]
"color": "pw.state.severityColor",
"blocks": [{
"text": {
"type": "plain_text",
"text": "Triggered: pw.alert.timestamp.iso"
},
"type": "section"
},
{
"type": "section",
"text": {
"type": "mrkdwn",
"text": "pw.alert.description"
}
},
Please see a sample for the JSON.
the function I am using to mod the JSON.
const handleRawInput = (htmlInput: string): string => {
let stash = htmlInput;
stash = stash.replace(/[\n\r]+|[\s]{2,}/g, '')
.replace("-{{", "- {{")
.replace(":{{", ": {{")
.replaceAll("-", "- ")
.replaceAll(":", ": ")
matchKeys.current.forEach((match) => {
const re = new RegExp(`\\b${match.key}\\b`, 'g')
stash = !stash.includes(`\{\{${match.key}\}}`) ? stash.replace(re, `\{\{${match.key}\}}`) : stash;
})
return stash
}
{
"blocks": [
{
"text": {
"type": "plain_text",
"text": "{{pw.alert.severity}} - {{pw.alert.title}} - {{violation_callback_url}}"
},
"type": "header"
}
],
"attachments": [
{
"blocks": [
{
"text": {
"text": "Triggered: {{pw.alert.timestamp.iso}}",
"type": "plain_text"
},
"type": "section"
},
{
"text": {
"text": "{{pw.alert.description}}",
"type": "mrkdwn"
},
"type": "section"
},
{
"elements": [
{
"url": "{{pw.alert.alertUrl}}",
"value": "View Alert",
"action_id": "button- action- 1",
"type": "button",
"text": {
"emoji": true,
"type": "plain_text",
"text": "View Alert"
}
}
],
"type": "actions"
},
{
"type": "header",
"text": {
"type": "plain_text",
"text": "CORRELATIONS"
}
},
{
"type": "section",
"text": {
"text": "<{{pw.link.openall}} | *Open All*> | <{{pw.link.downloadall}} | *Download All*>",
"type": "mrkdwn"
}
},
{
"type": "header",
"text": {
"type": "plain_text",
"text": "{{pw.workflow.destinationGroup.1.name}}",
"emoji": true
}
},
{
"type": "divider"
},
{
"text": {
"type": "mrkdwn",
"text": "<{{pw.workflow.destinationGroup.1.destination.0.url}} | *{{pw.workflow.destinationGroup.1.destination.0.name}}*>"
},
"type": "section"
},
{
"type": "section",
"text": {
"type": "mrkdwn",
"text": "<{{pw.workflow.destinationGroup.1.destination.1.url}} | *{{pw.workflow.destinationGroup.1.destination.1.name}}*>"
}
},
{
"text": {
"type": "mrkdwn",
"text": "<{{pw.workflow.destinationGroup.1.destination.2.url}} | *{{pw.workflow.destinationGroup.1.destination.2.name}}*>"
},
"type": "section"
},
{
"text": {
"text": "<{{pw.workflow.destinationGroup.1.destination.3.url}} | *{{pw.workflow.destinationGroup.1.destination.3.name}}*>",
"type": "mrkdwn"
},
"type": "section"
},
{
"text": {
"text": "<{{pw.workflow.destinationGroup.1.destination.4.url}} | *{{pw.workflow.destinationGroup.1.destination.4.name}}*>",
"type": "mrkdwn"
},
"type": "section"
},
{
"text": {
"emoji": true,
"text": "{{pw.workflow.destinationGroup.2.name}}",
"type": "plain_text"
},
"type": "header"
},
{
"type": "divider"
},
{
"text": {
"text": "<{{pw.workflow.destinationGroup.2.destination.0.url}} | *{{pw.workflow.destinationGroup.2.destination.0.name}}*>",
"type": "mrkdwn"
},
"type": "section"
},
{
"type": "header",
"text": {
"text": "{{pw.workflow.destinationGroup.3.name}}",
"type": "plain_text",
"emoji": true
}
},
{
"type": "divider"
},
{
"type": "section",
"text": {
"type": "mrkdwn",
"text": "<{{pw.workflow.destinationGroup.3.destination.0.url}} | *{{pw.workflow.destinationGroup.3.destination.0.name}}*>"
}
},
{
"type": "header",
"text": {
"text": "{{pw.workflow.destinationGroup.4.name}}",
"type": "plain_text",
"emoji": true
}
},
{
"type": "divider"
},
{
"text": {
"text": "<{{pw.workflow.destinationGroup.4.destination.0.url}} | *{{pw.workflow.destinationGroup.4.destination.0.name}}*>",
"type": "mrkdwn"
},
"type": "section"
},
{
"text": {
"type": "mrkdwn",
"text": "<{{pw.workflow.destinationGroup.4.destination.1.url}} | *{{pw.workflow.destinationGroup.4.destination.1.name}}*>"
},
"type": "section"
},
{
"text": {
"text": "<{{pw.workflow.destinationGroup.4.destination.2.url}} | *{{pw.workflow.destinationGroup.4.destination.2.name}}*>",
"type": "mrkdwn"
},
"type": "section"
},
{
"type": "header",
"text": {
"type": "plain_text",
"text": ": camera: Snapshots",
"emoji": true
}
},
{
"type": "divider"
},
{
"type": "section",
"text": {
"type": "mrkdwn",
"text": "<{{pw.workflow.destinationGroup.1.destination.0.snapshot.protectedUrl}} | *High- Resolution Image: {{pw.workflow.destinationGroup.1.destination.0.name}}*>"
}
},
{
"type": "image",
"title": {
"emoji": true,
"type": "plain_text",
"text": "{{pw.workflow.destinationGroup.1.destination.0.name}}"
},
"alt_text": "{{pw.workflow.destinationGroup.1.destination.0.name}}",
"image_url": "{{pw.workflow.destinationGroup.1.destination.0.snapshot.publicUrl}}"
},
{
"text": {
"type": "mrkdwn",
"text": "<{{pw.workflow.destinationGroup.1.destination.3.snapshot.protectedUrl}} | *High- Resolution Image: {{pw.workflow.destinationGroup.1.destination.3.name}}*>"
},
"type": "section"
},
{
"alt_text": "{{pw.workflow.destinationGroup.1.destination.3.name}}",
"title": {
"emoji": true,
"text": "{{pw.workflow.destinationGroup.1.destination.3.name}}",
"type": "plain_text"
},
"type": "image",
"image_url": "{{pw.workflow.destinationGroup.1.destination.3.snapshot.publicUrl}}"
}
],
"color": "{{pw.state.severityColor}}"
}
]
}


I resolved the issue by running a cleanup on the JSON string after the replacement.
const handleRawInput = (htmlInput: string): string => {
let stash = htmlInput;
stash = stash.replace(/[\n\r]+|[\s]{2,}/g, '')
.replace("-{{", "- {{")
.replace(":{{", ": {{")
.replaceAll("-", "- ")
.replaceAll(":", ": ")
matchKeys.current.forEach((match) => {
stash = !stash.includes(`\{\{${match.key}\}}`) ? stash.replace(match.key, `\{\{${match.key}\}}`) : stash;
})
return stash.replaceAll(".{{", ".").replaceAll("}}.", ".")
}

Related

Javascript: Get value of json string

I have this JSON string:
var json = {
"cdl": {
"06A78000000YNR7EAO": {
"attributes": {
"type": "CDL",
"url": "/services/data"
},
"CDI": "06978000000GIjCAAW",
"LEI": "a1U78000000SUtTEAW",
"Id": "06A78000000YNR7EAO",
"CD": {
"attributes": {
"type": "CD",
"url": "/services/data"
},
"Title": "photo-1517849845537-4d257902454a",
"Id": "06978000000GIjCAAW"
}
},
"06A78000000YNPGEA4": {
"attributes": {
"type": "CDL",
"url": "/services/data"
},
"CDI": "06978000000GIhuAAG",
"LEI": "a1U78000000SUtOEAW",
"Id": "06A78000000YNPGEA4",
"CD": {
"attributes": {
"type": "CD",
"url": "/services/data"
},
"Title": "photo-1517519014922-8fc06b814a0e",
"Id": "06978000000GIhuAAG"
}
}
},
"documents": {
"a1U78000000SUtTEAW": {
"attributes": {
"type": "DR",
"url": "/services/data"
},
"Id": "a1U78000000SUtTEAW",
"Name": "test2"
},
"a1U78000000SUtOEAW": {
"attributes": {
"type": "DR",
"url": "/services/data"
},
"Id": "a1U78000000SUtOEAW",
"Name": "test"
}
}
}
I can access to the document name like this:
console.log(Object.values(json)[1]["a1U78000000SUtTEAW"]["Name"]);
how can i know how much documents are and how can i get the name without using "a1U78000000SUtTEAW"?

try this
Object.keys(json.documents).forEach(key => {
console.log("\n" + key + ": " + json.documents[key].Name);
});
or this
var documents= Object.values(json.documents);
console.log(documents.length); //2
console.log(documents[0].Id); // a1U78000000SUtTEAW
console.log(documents[0].Name); // test2

converting one form of json into another form of json object using javascript / node js

here data1 and order of content get changed everytime that why I used switch statement
I am running a function by passing value like this
parser(values[key]);
this value[key]) contain bellow object
The following object / data-structure
{
"nodeType": "document",
"data": {},
"content": [
{
"nodeType": "paragraph",
"content": [
{
"nodeType": "text",
"value": "dummy testing bold",
"marks": [
{
"type": "bold"
}
],
"data": {}
}
],
"data": {}
},
{
"nodeType": "paragraph",
"content": [
{
"nodeType": "text",
"value": "jsdbhcjbjsdz'c;s bold and italic",
"marks": [
{
"type": "bold"
},
{
"type": "italic"
}
],
"data": {}
}
],
"data": {}
},
{
"nodeType": "paragraph",
"content": [
{
"nodeType": "text",
"value": "underline bold and italic",
"marks": [
{
"type": "bold"
},
{
"type": "italic"
},
{
"type": "underline"
}
],
"data": {}
}
],
"data": {}
},
{
"nodeType": "paragraph",
"content": [
{
"nodeType": "text",
"value": "ldwc;s,l;,aws italic",
"marks": [
{
"type": "italic"
}
],
"data": {}
}
],
"data": {}
},
{
"nodeType": "hr",
"content": [],
"data": {}
},
{
"nodeType": "paragraph",
"content": [
{
"nodeType": "text",
"value": "",
"marks": [],
"data": {}
}
],
"data": {}
},
{
"nodeType": "paragraph",
"content": [
{
"nodeType": "text",
"value": "testing",
"marks": [
{
"type": "italic"
},
{
"type": "code"
}
],
"data": {}
}
],
"data": {}
},
{
"nodeType": "unordered-list",
"content": [
{
"nodeType": "list-item",
"content": [
{
"nodeType": "paragraph",
"content": [
{
"nodeType": "text",
"value": "hello ji",
"marks": [
{
"type": "italic"
},
{
"type": "code"
}
],
"data": {}
}
],
"data": {}
}
],
"data": {}
},
{
"nodeType": "list-item",
"content": [
{
"nodeType": "paragraph",
"content": [
{
"nodeType": "text",
"value": "nahi ji",
"marks": [
{
"type": "italic"
},
{
"type": "code"
}
],
"data": {}
}
],
"data": {}
}
],
"data": {}
},
{
"nodeType": "list-item",
"content": [
{
"nodeType": "paragraph",
"content": [
{
"nodeType": "text",
"value": "testing ji",
"marks": [
{
"type": "underline"
},
{
"type": "italic"
},
{
"type": "bold"
}
],
"data": {}
}
],
"data": {}
}
],
"data": {}
}
],
"data": {}
},
{
"nodeType": "ordered-list",
"content": [
{
"nodeType": "list-item",
"content": [
{
"nodeType": "paragraph",
"content": [
{
"nodeType": "text",
"value": "testing",
"marks": [
{
"type": "italic"
},
{
"type": "code"
}
],
"data": {}
}
],
"data": {}
}
],
"data": {}
},
{
"nodeType": "list-item",
"content": [
{
"nodeType": "paragraph",
"content": [
{
"nodeType": "text",
"value": "newh",
"marks": [
{
"type": "italic"
},
{
"type": "code"
}
],
"data": {}
}
],
"data": {}
}
],
"data": {}
}
],
"data": {}
},
{
"nodeType": "blockquote",
"content": [
{
"nodeType": "paragraph",
"content": [
{
"nodeType": "text",
"value": "blockquotes",
"marks": [
{
"type": "italic"
},
{
"type": "code"
}
],
"data": {}
}
],
"data": {}
},
{
"nodeType": "paragraph",
"content": [
{
"nodeType": "text",
"value": "blockquotes",
"marks": [
{
"type": "bold"
},
{
"type": "code"
},
{
"type": "underline"
}
],
"data": {}
}
],
"data": {}
}
],
"data": {}
},
{
"nodeType": "heading-1",
"content": [
{
"nodeType": "text",
"value": "Heading 1",
"marks": [
{
"type": "bold"
},
{
"type": "underline"
}
],
"data": {}
}
],
"data": {}
},
{
"nodeType": "heading-2",
"content": [
{
"nodeType": "text",
"value": "heading 2",
"marks": [
{
"type": "italic"
}
],
"data": {}
}
],
"data": {}
},
{
"nodeType": "heading-3",
"content": [
{
"nodeType": "text",
"value": "heading 3",
"marks": [
{
"type": "italic"
},
{
"type": "underline"
}
],
"data": {}
}
],
"data": {}
},
{
"nodeType": "heading-4",
"content": [
{
"nodeType": "text",
"value": "heading 4",
"marks": [
{
"type": "bold"
}
],
"data": {}
}
],
"data": {}
},
{
"nodeType": "heading-5",
"content": [
{
"nodeType": "text",
"value": "heading 5",
"marks": [
{
"type": "underline"
}
],
"data": {}
}
],
"data": {}
},
{
"nodeType": "heading-6",
"content": [
{
"nodeType": "text",
"value": "heading 6",
"marks": [
{
"type": "italic"
}
],
"data": {}
}
],
"data": {}
},
{
"nodeType": "hr",
"content": [],
"data": {}
},
{
"nodeType": "embedded-entry-block",
"content": [],
"data": {
"target": {
"sys": {
"id": "651dYO8d4oE0MVJlVePWr6",
"type": "Link",
"linkType": "Entry"
}
}
}
},
{
"nodeType": "paragraph",
"content": [
{
"nodeType": "text",
"value": "",
"marks": [],
"data": {}
},
{
"nodeType": "hyperlink",
"content": [
{
"nodeType": "text",
"value": "Google",
"marks": [],
"data": {}
}
],
"data": {
"uri": "www.google.com"
}
},
{
"nodeType": "text",
"value": "",
"marks": [],
"data": {}
}
],
"data": {}
},
{
"nodeType": "paragraph",
"content": [
{
"nodeType": "text",
"value": "",
"marks": [],
"data": {}
},
{
"nodeType": "entry-hyperlink",
"content": [
{
"nodeType": "text",
"value": "Entry",
"marks": [],
"data": {}
}
],
"data": {
"target": {
"sys": {
"id": "66rzYr2BpWL1VTBHdLTdSW",
"type": "Link",
"linkType": "Entry"
}
}
}
},
{
"nodeType": "text",
"value": "",
"marks": [],
"data": {}
}
],
"data": {}
},
{
"nodeType": "paragraph",
"content": [
{
"nodeType": "text",
"value": "",
"marks": [],
"data": {}
},
{
"nodeType": "asset-hyperlink",
"content": [
{
"nodeType": "text",
"value": "Asset",
"marks": [],
"data": {}
}
],
"data": {
"target": {
"sys": {
"id": "2FfbMwKRZ2QK52MsbYxZbb",
"type": "Link",
"linkType": "Asset"
}
}
}
},
{
"nodeType": "text",
"value": "",
"marks": [],
"data": {}
}
],
"data": {}
},
{
"nodeType": "paragraph",
"content": [
{
"nodeType": "text",
"value": "hi code here",
"marks": [
{
"type": "code"
}
],
"data": {}
}
],
"data": {}
},
{
"nodeType": "embedded-entry-block",
"content": [],
"data": {
"target": {
"sys": {
"id": "4zu7f2YP4cXqR6aeeMxEt8",
"type": "Link",
"linkType": "Entry"
}
}
}
},
{
"nodeType": "paragraph",
"content": [
{
"nodeType": "text",
"value": "",
"marks": [],
"data": {}
}
],
"data": {}
},
{
"nodeType": "paragraph",
"content": [
{
"nodeType": "text",
"value": "",
"marks": [],
"data": {}
},
{
"nodeType": "embedded-entry-inline",
"content": [],
"data": {
"target": {
"sys": {
"id": "4zu7f2YP4cXqR6aeeMxEt8",
"type": "Link",
"linkType": "Entry"
}
}
}
},
{
"nodeType": "text",
"value": "",
"marks": [],
"data": {}
}
],
"data": {}
},
{
"nodeType": "embedded-entry-block",
"content": [],
"data": {
"target": {
"sys": {
"id": "2eAmIIuG4xkLvatkU3RUSy",
"type": "Link",
"linkType": "Entry"
}
}
}
},
{
"nodeType": "paragraph",
"content": [
{
"nodeType": "text",
"value": "",
"marks": [],
"data": {}
},
{
"nodeType": "embedded-entry-inline",
"content": [],
"data": {
"target": {
"sys": {
"id": "49VJ3thpTULacWCcnjbOXz",
"type": "Link",
"linkType": "Entry"
}
}
}
},
{
"nodeType": "text",
"value": "",
"marks": [],
"data": {}
}
],
"data": {}
}
]
}
... should be converted into another custom structure like the following one ...
[
{
"type": "doc",
"attrs": { "dirty": true },
"children": [
{
"type": "p",
"attrs": { "dirty": true },
"children": [{ "text": "dummy testing bold", "bold": true }]
},
{
"type": "p",
"attrs": { "dirty": true },
"children": [
{
"text": "jsdbhcjbjsdz'c;s bold and italic",
"bold": true,
"italic": true
}
]
},
{
"type": "p",
"attrs": { "dirty": true },
"children": [
{
"text": "underline bold and italic",
"bold": true,
"italic": true,
"underline": true
}
]
},
{
"type": "p",
"attrs": { "dirty": true },
"children": [{ "text": "idwc:s,l:.aws italic", "italic": true }]
},
{
"type": "p",
"attrs": { "dirty": true },
"children": [{ "italic": true, "text": "" }]
},
{
"type": "hr",
"children": [{ "text": "" }],
"attrs": { "dirty": true }
},
{
"type": "p",
"attrs": { "dirty": true },
"children": [{ "text": "" }]
},
{
"type": "p",
"attrs": { "dirty": true },
"children": [{ "text": "testing", "italic": true }]
},
{
"type": "ul",
"children": [
{
"type": "li",
"attrs": { "dirty": true },
"children": [{ "italic": true, "text": "hello ji" }]
},
{
"type": "li",
"attrs": { "dirty": true },
"children": [{ "italic": true, "text": "nahi ji" }]
},
{
"type": "li",
"attrs": { "dirty": true },
"children": [
{
"text": "testing ji",
"italic": true,
"bold": true,
"underline": true
}
]
}
],
"id": "6c180306f6204829999b78e8dd482d33",
"attrs": { "dirty": true }
},
{
"type": "ol",
"children": [
{
"type": "li",
"children": [{ "text": "testing", "italic": true }],
"attrs": { "dirty": true }
},
{
"type": "li",
"attrs": { "dirty": true },
"children": [{ "italic": true, "text": "newh" }]
}
],
"id": "10207a886ca241419b66a3b155bac028",
"attrs": { "dirty": true }
},
{
"type": "blockquote",
"children": [
{ "text": "blockquotes\n\n", "italic": true, "underline": true },
{ "text": "blockquotes", "underline": true, "bold": true }
],
"attrs": { "dirty": true }
},
{
"type": "p",
"attrs": { "dirty": true },
"children": [{ "text": "" }]
},
{
"type": "h1",
"attrs": { "dirty": true },
"children": [{ "text": "Heading 1", "bold": true, "underline": true }]
},
{
"type": "h2",
"attrs": { "dirty": true },
"children": [{ "text": "heading 2", "italic": true }]
},
{
"type": "h3",
"attrs": { "dirty": true },
"children": [
{ "text": "heading 3", "italic": true, "underline": true }
]
},
{
"type": "h4",
"attrs": { "dirty": true },
"children": [{ "text": "heading 4", "bold": true }]
},
{
"type": "h5",
"attrs": { "dirty": true },
"children": [{ "text": "heading 5", "underline": true }]
},
{
"type": "h6",
"attrs": { "dirty": true },
"children": [{ "text": "heading 6", "italic": true }]
},
{
"type": "p",
"attrs": { "dirty": true },
"children": [{ "italic": true, "text": "" }]
},
{
"type": "p",
"attrs": { "dirty": true },
"children": [{ "italic": true, "text": "" }]
},
{
"type": "p",
"attrs": { "dirty": true },
"children": [
{ "italic": true, "text": "" },
{
"type": "a",
"attrs": {
"url": "www.google.com",
"target": "_self",
"dirty": true
},
"children": [{ "text": "Google" }]
},
{ "text": "" }
]
},
{
"type": "p",
"attrs": { "dirty": true },
"children": [{ "text": "" }]
},
{
"type": "code",
"attrs": { "language": "html", "dirty": true },
"children": [{ "text": "hi code here" }]
},
{
"type": "p",
"attrs": { "dirty": true },
"children": [
{ "text": "" },
{
"type": "reference",
"attrs": {
"display-type": "inline",
"type": "entry",
"class-name": "embedded-entry redactor-component inline-entry",
"entry-uid": "bltccc6338d24478e6f",
"locale": "en-us",
"content-type-uid": "rte",
"dirty": true
},
"children": [{ "text": "" }]
},
{ "text": "" }
]
}
]
}
]
{
"nodeType": "document",
"data": {},
"content": [
{
"nodeType": "ordered-list",
"content": [
{
"nodeType": "list-item",
"content": [
{
"nodeType": "paragraph",
"content": [
{
"nodeType": "text",
"value": "order list value 1",
"marks": [],
"data": {}
}
],
"data": {}
}
],
"data": {}
},
{
"nodeType": "list-item",
"content": [
{
"nodeType": "paragraph",
"content": [
{
"nodeType": "text",
"value": "order list value 2 with bold and italic",
"marks": [
{
"type": "bold"
},
{
"type": "italic"
}
],
"data": {}
}
],
"data": {}
}
],
"data": {}
}
],
"data": {}
},
{
"nodeType": "heading-3",
"content": [
{
"nodeType": "text",
"value": "with Heading 3 value",
"marks": [],
"data": {}
}
],
"data": {}
},
{
"nodeType": "paragraph",
"content": [
{
"nodeType": "text",
"value": "hi normal text",
"marks": [],
"data": {}
}
],
"data": {}
},
{
"nodeType": "paragraph",
"content": [
{
"nodeType": "text",
"value": "bold text here",
"marks": [
{
"type": "bold"
}
],
"data": {}
}
],
"data": {}
},
{
"nodeType": "paragraph",
"content": [
{
"nodeType": "text",
"value": "bold and italic same data test",
"marks": [
{
"type": "bold"
},
{
"type": "italic"
}
],
"data": {}
}
],
"data": {}
}
]
},
I already came up with a switch statement in order to check the incoming data and store it in the same format or place which I am getting from the first object
Mapper.js
const {
bold,
italic,
underline,
h1,
h2,
} = require("./Schema");
module.exports = jsonRTEMapper = (data) => {
const jsonSchema = [];
for (const nodeType of data) {
if (
nodeType.content.length !== undefined &&
nodeType.content.length !== 0
) {
switch (nodeType.nodeType) {
case "paragraph":
for (const mark of nodeType.content) {
if (
mark.marks !== undefined &&
mark.marks.length !== undefined &&
mark.marks.length !== 0
) {
for (const type of mark.marks) {
switch (type.type) {
case "bold":
jsonSchema.push(bold(nodeType.content));
break;
case "italic":
jsonSchema.push(italic(nodeType.content));
break;
case "underline":
jsonSchema.push(underline(nodeType.content));
break;
case "code":
jsonSchema.push(code(nodeType.content));
break;
}
}
}
}
break;
case "heading-1":
jsonSchema.push(h1(nodeType.content));
break;
case "heading-2":
jsonSchema.push(h2(nodeType.content));
break;
}
}
}
};
and in jsonSchema I am pushing the return data which I got from the function which I wrote in different file
Schema.js
function bold(data) {
for (const value of data) {
return {
type: "p",
attrs: { dirty: true },
children: [{ text: value.value, bold: true }],
};
}
}
function italic(data) {
for (const value of data) {
return {
type: "p",
attrs: { dirty: true },
children: [{ text: value.value, italic: true }],
};
}
}
function h1(data) {
for (const value of data) {
return {
type: "h1",
attrs: { dirty: true },
children: [{ text: value.value }],
};
}
}
function h2(data) {
for (const value of data) {
return {
type: "h2",
attrs: { dirty: true },
children: [{ text: value.value }],
};
}
}
the problem is it is working perfectly fine when the type is single for eg if type is boat or internal or underline it work fine but when the type contain more then one type then how to use make the expected output that is not possible by me
as I am looking of the solution if any object contain type:"bold" type:italic it should replace with the bold:true italic:true or underline or inside type:code
just wanted to replace this type and fetch the json object as expected json object but don't know how to do it

If you put all the mappers/parsers in a map you won't have to use switch case statements. And things will be easier to implement:
// parsers.js ------------------------------
// put all parsing logic in this file
const parsers = new Map();
// once all the parsers are implemented you don't need this check
parsers._get = parsers.get;
parsers.get = function(key) {
if (this.has(key))
return this._get(key);
return () => console.warn(`Parser not implemented for: ${JSON.stringify(key)}`);
}
// map all the parsers
// keys should be exactly same as keys in input json
parsers.set('document', parseDocument);
parsers.set('paragraph', parseParagraph);
parsers.set('text', parseText);
parsers.set('hr', parseHR);
parsers.set('list-item', parseLI);
parsers.set('unordered-list', parseUL);
parsers.set('ordered-list', parseOL);
// TODO: implement remaining 15 element types
//parsers.set('', parse);
function convert(obj) {
return [parsers.get(obj.nodeType)(obj)];
};
function parseDocument(obj) {
let type = 'doc';
let attrs = { "dirty": true }
let children = [];
obj.content.forEach(e => children.push(parsers.get(e.nodeType)(e)));
return { type, children, attrs };
}
function parseParagraph(obj) {
let type = 'p';
let attrs = { "dirty": true }
let children = [];
obj.content.forEach(e => children.push(parsers.get(e.nodeType)(e)));
return { type, children, attrs };
}
function parseText(obj) {
const result = {};
result.text = obj.value;
obj.marks.forEach(e => result[e.type] = true);
return result;
}
function parseHR(obj) {
let type = 'hr';
let attrs = { "dirty": true }
let children = [];
return { type, attrs, children };
}
function parseUL(obj) {
let type = 'ul';
let attrs = { "dirty": true }
let children = [];
obj.content.forEach(e => children.push(parsers.get(e.nodeType)(e)));
return { type, children, attrs };
}
function parseOL(obj) {
let type = 'ol';
let attrs = { "dirty": true }
let children = [];
obj.content.forEach(e => children.push(parsers.get(e.nodeType)(e)));
return { type, children, attrs };
}
function parseLI(obj) {
let type = 'li';
let attrs = { "dirty": true }
let children = [];
obj.content.forEach(e => children.push(parsers.get(e.nodeType)(e)));
// get rid of paragraph elements
children = children.map(c => c.children).flat();
return { type, children, attrs };
}
// mapper.js ---------------------------------------------
let result = convert(getSrcData());
console.log('Converted object: ', result);
let result2 = convert(getSrcData2());
console.log('Converted object2: ', result2);
function getSrcData() {
return {
"nodeType": "document",
"data": {},
"content": [{
"nodeType": "paragraph",
"content": [{
"nodeType": "text",
"value": "dummy testing bold",
"marks": [{
"type": "bold"
}],
"data": {}
}],
"data": {}
},
{
"nodeType": "paragraph",
"content": [{
"nodeType": "text",
"value": "jsdbhcjbjsdz'c;s bold and italic",
"marks": [{
"type": "bold"
},
{
"type": "italic"
}
],
"data": {}
}],
"data": {}
},
{
"nodeType": "paragraph",
"content": [{
"nodeType": "text",
"value": "underline bold and italic",
"marks": [{
"type": "bold"
},
{
"type": "italic"
},
{
"type": "underline"
}
],
"data": {}
}],
"data": {}
},
{
"nodeType": "paragraph",
"content": [{
"nodeType": "text",
"value": "ldwc;s,l;,aws italic",
"marks": [{
"type": "italic"
}],
"data": {}
}],
"data": {}
},
{
"nodeType": "hr",
"content": [],
"data": {}
},
{
"nodeType": "paragraph",
"content": [{
"nodeType": "text",
"value": "",
"marks": [],
"data": {}
}],
"data": {}
},
{
"nodeType": "paragraph",
"content": [{
"nodeType": "text",
"value": "testing",
"marks": [{
"type": "italic"
},
{
"type": "code"
}
],
"data": {}
}],
"data": {}
},
{
"nodeType": "unordered-list",
"content": [{
"nodeType": "list-item",
"content": [{
"nodeType": "paragraph",
"content": [{
"nodeType": "text",
"value": "hello ji",
"marks": [{
"type": "italic"
},
{
"type": "code"
}
],
"data": {}
}],
"data": {}
}],
"data": {}
},
{
"nodeType": "list-item",
"content": [{
"nodeType": "paragraph",
"content": [{
"nodeType": "text",
"value": "nahi ji",
"marks": [{
"type": "italic"
},
{
"type": "code"
}
],
"data": {}
}],
"data": {}
}],
"data": {}
},
{
"nodeType": "list-item",
"content": [{
"nodeType": "paragraph",
"content": [{
"nodeType": "text",
"value": "testing ji",
"marks": [{
"type": "underline"
},
{
"type": "italic"
},
{
"type": "bold"
}
],
"data": {}
}],
"data": {}
}],
"data": {}
}
],
"data": {}
},
{
"nodeType": "ordered-list",
"content": [{
"nodeType": "list-item",
"content": [{
"nodeType": "paragraph",
"content": [{
"nodeType": "text",
"value": "testing",
"marks": [{
"type": "italic"
},
{
"type": "code"
}
],
"data": {}
}],
"data": {}
}],
"data": {}
},
{
"nodeType": "list-item",
"content": [{
"nodeType": "paragraph",
"content": [{
"nodeType": "text",
"value": "newh",
"marks": [{
"type": "italic"
},
{
"type": "code"
}
],
"data": {}
}],
"data": {}
}],
"data": {}
}
],
"data": {}
},
{
"nodeType": "blockquote",
"content": [{
"nodeType": "paragraph",
"content": [{
"nodeType": "text",
"value": "blockquotes",
"marks": [{
"type": "italic"
},
{
"type": "code"
}
],
"data": {}
}],
"data": {}
},
{
"nodeType": "paragraph",
"content": [{
"nodeType": "text",
"value": "blockquotes",
"marks": [{
"type": "bold"
},
{
"type": "code"
},
{
"type": "underline"
}
],
"data": {}
}],
"data": {}
}
],
"data": {}
},
{
"nodeType": "heading-1",
"content": [{
"nodeType": "text",
"value": "Heading 1",
"marks": [{
"type": "bold"
},
{
"type": "underline"
}
],
"data": {}
}],
"data": {}
},
{
"nodeType": "heading-2",
"content": [{
"nodeType": "text",
"value": "heading 2",
"marks": [{
"type": "italic"
}],
"data": {}
}],
"data": {}
},
{
"nodeType": "heading-3",
"content": [{
"nodeType": "text",
"value": "heading 3",
"marks": [{
"type": "italic"
},
{
"type": "underline"
}
],
"data": {}
}],
"data": {}
},
{
"nodeType": "heading-4",
"content": [{
"nodeType": "text",
"value": "heading 4",
"marks": [{
"type": "bold"
}],
"data": {}
}],
"data": {}
},
{
"nodeType": "heading-5",
"content": [{
"nodeType": "text",
"value": "heading 5",
"marks": [{
"type": "underline"
}],
"data": {}
}],
"data": {}
},
{
"nodeType": "heading-6",
"content": [{
"nodeType": "text",
"value": "heading 6",
"marks": [{
"type": "italic"
}],
"data": {}
}],
"data": {}
},
{
"nodeType": "hr",
"content": [],
"data": {}
},
{
"nodeType": "embedded-entry-block",
"content": [],
"data": {
"target": {
"sys": {
"id": "651dYO8d4oE0MVJlVePWr6",
"type": "Link",
"linkType": "Entry"
}
}
}
},
{
"nodeType": "paragraph",
"content": [{
"nodeType": "text",
"value": "",
"marks": [],
"data": {}
},
{
"nodeType": "hyperlink",
"content": [{
"nodeType": "text",
"value": "Google",
"marks": [],
"data": {}
}],
"data": {
"uri": "www.google.com"
}
},
{
"nodeType": "text",
"value": "",
"marks": [],
"data": {}
}
],
"data": {}
},
{
"nodeType": "paragraph",
"content": [{
"nodeType": "text",
"value": "",
"marks": [],
"data": {}
},
{
"nodeType": "entry-hyperlink",
"content": [{
"nodeType": "text",
"value": "Entry",
"marks": [],
"data": {}
}],
"data": {
"target": {
"sys": {
"id": "66rzYr2BpWL1VTBHdLTdSW",
"type": "Link",
"linkType": "Entry"
}
}
}
},
{
"nodeType": "text",
"value": "",
"marks": [],
"data": {}
}
],
"data": {}
},
{
"nodeType": "paragraph",
"content": [{
"nodeType": "text",
"value": "",
"marks": [],
"data": {}
},
{
"nodeType": "asset-hyperlink",
"content": [{
"nodeType": "text",
"value": "Asset",
"marks": [],
"data": {}
}],
"data": {
"target": {
"sys": {
"id": "2FfbMwKRZ2QK52MsbYxZbb",
"type": "Link",
"linkType": "Asset"
}
}
}
},
{
"nodeType": "text",
"value": "",
"marks": [],
"data": {}
}
],
"data": {}
},
{
"nodeType": "paragraph",
"content": [{
"nodeType": "text",
"value": "hi code here",
"marks": [{
"type": "code"
}],
"data": {}
}],
"data": {}
},
{
"nodeType": "embedded-entry-block",
"content": [],
"data": {
"target": {
"sys": {
"id": "4zu7f2YP4cXqR6aeeMxEt8",
"type": "Link",
"linkType": "Entry"
}
}
}
},
{
"nodeType": "paragraph",
"content": [{
"nodeType": "text",
"value": "",
"marks": [],
"data": {}
}],
"data": {}
},
{
"nodeType": "paragraph",
"content": [{
"nodeType": "text",
"value": "",
"marks": [],
"data": {}
},
{
"nodeType": "embedded-entry-inline",
"content": [],
"data": {
"target": {
"sys": {
"id": "4zu7f2YP4cXqR6aeeMxEt8",
"type": "Link",
"linkType": "Entry"
}
}
}
},
{
"nodeType": "text",
"value": "",
"marks": [],
"data": {}
}
],
"data": {}
},
{
"nodeType": "embedded-entry-block",
"content": [],
"data": {
"target": {
"sys": {
"id": "2eAmIIuG4xkLvatkU3RUSy",
"type": "Link",
"linkType": "Entry"
}
}
}
},
{
"nodeType": "paragraph",
"content": [{
"nodeType": "text",
"value": "",
"marks": [],
"data": {}
},
{
"nodeType": "embedded-entry-inline",
"content": [],
"data": {
"target": {
"sys": {
"id": "49VJ3thpTULacWCcnjbOXz",
"type": "Link",
"linkType": "Entry"
}
}
}
},
{
"nodeType": "text",
"value": "",
"marks": [],
"data": {}
}
],
"data": {}
}
]
}
}
function getSrcData2() {
return {
"nodeType": "document",
"data": {},
"content": [
{
"nodeType": "ordered-list",
"content": [
{
"nodeType": "list-item",
"content": [
{
"nodeType": "paragraph",
"content": [
{
"nodeType": "text",
"value": "order list value 1",
"marks": [],
"data": {}
}
],
"data": {}
}
],
"data": {}
},
{
"nodeType": "list-item",
"content": [
{
"nodeType": "paragraph",
"content": [
{
"nodeType": "text",
"value": "order list value 2 with bold and italic",
"marks": [
{
"type": "bold"
},
{
"type": "italic"
}
],
"data": {}
}
],
"data": {}
}
],
"data": {}
}
],
"data": {}
},
{
"nodeType": "heading-3",
"content": [
{
"nodeType": "text",
"value": "with Heading 3 value",
"marks": [],
"data": {}
}
],
"data": {}
},
{
"nodeType": "paragraph",
"content": [
{
"nodeType": "text",
"value": "hi normal text",
"marks": [],
"data": {}
}
],
"data": {}
},
{
"nodeType": "paragraph",
"content": [
{
"nodeType": "text",
"value": "bold text here",
"marks": [
{
"type": "bold"
}
],
"data": {}
}
],
"data": {}
},
{
"nodeType": "paragraph",
"content": [
{
"nodeType": "text",
"value": "bold and italic same data test",
"marks": [
{
"type": "bold"
},
{
"type": "italic"
}
],
"data": {}
}
],
"data": {}
}
]
};
}
<b>See console logs for the output.</b>
Explanation is in code comments. I've laid down the framework and implemented parsers for 6 element types. Rest you can implement easily. While implementing remaining types you'll understand the code very well.
Use Developer tool's code debugging features to understand the code. Or use VSCode to debug nodejs code.
Use http://jsonviewer.stack.hu to analyze input and output JSONs.

Converting Json to Csv issue

I am trying to convert a JSON to CSV with JavaScript. The problem is I keep getting the error: Cannot convert undefined or null to object
at Function.keys.
I only want the 'features.attributes' keys and values from the data. I have no problem getting the keys but the values seems to be a problem. Any help wuld be appreciated.
json
{
"displayFieldName": "label",
"fieldAliases": {
"OBJECTID": "OBJECTID",
"label": "label",
"west": "west",
"east": "east",
"north": "north",
"south": "south",
"scale": "scale",
"title": "title",
"edition": "edition",
"available": "available",
"physHold": "physHold",
"primeMer": "primeMer",
"projection": "projection",
"publisher": "publisher",
"datePub": "datePub",
"color": "color",
"recId": "recId",
"note": "note",
"location": "location",
"bathLines": "bathLines",
"bathInterv": "bathInterv",
"instCallNo": "instCallNo",
"setTitle": "setTitle",
"sheetId": "sheetId",
"digita": "digita",
"titleAlt": "titleAlt",
"digHold": "digHold",
"miradorURL": "miradorURL",
"iiifURL": "iiifURL",
"Shape_Length": "Shape_Length",
"Shape_Area": "Shape_Area"
},
"geometryType": "esriGeometryPolygon",
"spatialReference": {
"wkid": 102100,
"latestWkid": 3857
},
"fields": [
{
"name": "OBJECTID",
"type": "esriFieldTypeOID",
"alias": "OBJECTID"
},
{
"name": "label",
"type": "esriFieldTypeString",
"alias": "label",
"length": 50
},
{
"name": "west",
"type": "esriFieldTypeDouble",
"alias": "west"
},
{
"name": "east",
"type": "esriFieldTypeDouble",
"alias": "east"
},
{
"name": "north",
"type": "esriFieldTypeDouble",
"alias": "north"
},
{
"name": "south",
"type": "esriFieldTypeDouble",
"alias": "south"
},
{
"name": "scale",
"type": "esriFieldTypeInteger",
"alias": "scale"
},
{
"name": "title",
"type": "esriFieldTypeString",
"alias": "title",
"length": 55
},
{
"name": "edition",
"type": "esriFieldTypeString",
"alias": "edition",
"length": 85
},
{
"name": "available",
"type": "esriFieldTypeSmallInteger",
"alias": "available"
},
{
"name": "physHold",
"type": "esriFieldTypeString",
"alias": "physHold",
"length": 3
},
{
"name": "primeMer",
"type": "esriFieldTypeSmallInteger",
"alias": "primeMer"
},
{
"name": "projection",
"type": "esriFieldTypeString",
"alias": "projection",
"length": 19
},
{
"name": "publisher",
"type": "esriFieldTypeString",
"alias": "publisher",
"length": 33
},
{
"name": "datePub",
"type": "esriFieldTypeSmallInteger",
"alias": "datePub"
},
{
"name": "color",
"type": "esriFieldTypeSmallInteger",
"alias": "color"
},
{
"name": "recId",
"type": "esriFieldTypeString",
"alias": "recId",
"length": 30
},
{
"name": "note",
"type": "esriFieldTypeString",
"alias": "note",
"length": 254
},
{
"name": "location",
"type": "esriFieldTypeString",
"alias": "location",
"length": 254
},
{
"name": "bathLines",
"type": "esriFieldTypeString",
"alias": "bathLines",
"length": 5
},
{
"name": "bathInterv",
"type": "esriFieldTypeString",
"alias": "bathInterv",
"length": 50
},
{
"name": "instCallNo",
"type": "esriFieldTypeString",
"alias": "instCallNo",
"length": 50
},
{
"name": "setTitle",
"type": "esriFieldTypeString",
"alias": "setTitle",
"length": 50
},
{
"name": "sheetId",
"type": "esriFieldTypeInteger",
"alias": "sheetId"
},
{
"name": "digita",
"type": "esriFieldTypeString",
"alias": "digita",
"length": 8000
},
{
"name": "titleAlt",
"type": "esriFieldTypeString",
"alias": "titleAlt",
"length": 8000
},
{
"name": "digHold",
"type": "esriFieldTypeString",
"alias": "digHold",
"length": 8000
},
{
"name": "miradorURL",
"type": "esriFieldTypeString",
"alias": "miradorURL",
"length": 8000
},
{
"name": "iiifURL",
"type": "esriFieldTypeString",
"alias": "iiifURL",
"length": 8000
},
{
"name": "Shape_Length",
"type": "esriFieldTypeDouble",
"alias": "Shape_Length"
},
{
"name": "Shape_Area",
"type": "esriFieldTypeDouble",
"alias": "Shape_Area"
}
],
"features": [
{
"attributes": {
"OBJECTID": 1,
"label": " ",
"west": -5.8263888899999996,
"east": -5.7838888900000001,
"north": 35.770000000000003,
"south": 35.814166669999999,
"scale": 5000,
"title": "Port de Tanger",
"edition": " ",
"available": 1,
"physHold": "yes",
"primeMer": 131,
"projection": " ",
"publisher": " ",
"datePub": 1908,
"color": 31,
"recId": "agsmap026454",
"note": "\\\\ $a Relief shown by form lines and hachures. Depths shown by bathymetric isolines and soundings. | \\\\ $a \"Nota, le de\u0301tail de la ville, emprunte\u0301 au plan local espangnol, a e\u0301te\u0301 rectifie\u0301 par la triangulation et le nivellement effectue\u0301s par la",
"location": " ",
"bathLines": " ",
"bathInterv": " ",
"instCallNo": " ",
"setTitle": "French Charts",
"sheetId": 21511,
"digita": "agsmap026454",
"titleAlt": "Tangier, port, 1908",
"Shape_Length": 21584.807399988174,
"Shape_Area": 28676605.202176783
},
"geometry": {
"rings": [
[
[
-648590.64440000057,
4269019.7031000033
],
[
-648590.64440000057,
4275081.0283999965
],
[
-643859.56599999964,
4275081.0283999965
],
[
-643859.56599999964,
4269019.7031000033
],
[
-648590.64440000057,
4269019.7031000033
]
]
]
}
}
]
}
js
function exportJSONToCSV(objArray) {
var arr = typeof objArray !== 'object' ? JSON.parse(objArray) : objArray;
var str =
`${Object.keys(arr[0])
.map((value) => `"${value}"`)
.join(',')}` + '\r\n';
var csvContent = arr.reduce((st, next) => {
console.log(next);
st +=
`${Object.values(next)
.map((value) => `"${value}"`)
.join(',')}` + '\r\n';
return st;
}, str);
var element = document.createElement('a');
element.href = 'data:text/csv;charset=utf-8,' + encodeURI(csvContent);
element.target = '_blank';
element.download = 'export.csv';
element.click();
}

What about:
var json = ... // YOUR JSON
var features = json.features;
var isFirstIterationCompleted = false;
var csv = '';
features.forEach(e => {
var attributesKeys = Object.keys(e.attributes);
if (!isFirstIterationCompleted) {
csv += attributesKeys.join(';') + '\n'; // separated by semicolon
isFirstIterationCompleted = true;
}
attributesKeys.forEach(a => {
csv += e.attributes[a] + ';';
});
csv += '\n';
})
console.log(csv);

JSON schema validate oneOf with condition

How can I set json schema validator for next objects?
They all have field account_id, but options is dependent on type.
In case of twitter it has list of tokens, each of those has four fields.
If type is instagram, than each token has only one field in
tokens.
And for facebook type field options must be empty.
{
"type": "twitter",
"account_id": "xyz",
"options": {
"tokens": [{
"access_token": "long string",
"access_token_secret": "long string",
"consumer_key": "long string",
"consumer_secret": "long string"
}]
}
}
{
"type": "instagram",
"account_id": "xyz",
"options": {
"tokens": [{
"access_token": "long string"
}]
}
}
{
"type": "facebook",
"account_id": "xyz",
"options": {}
}
Is it possible to make json schema, that would satisfy those requirements? Even the most simple schema when definition for every type is wrapped in oneOf keywords does not work.
{
"type": "object",
"additionalProperties": false,
"oneOf": [{
"properties": {
"account_id": {
"type": "string",
},
"type": {
"const": "facebook"
},
"options": {
"type": "object",
"additionalProperties": false
}
},
"required": [
"account_id",
"type",
"options"
]
},
{
"type": "object",
"additionalProperties": false,
"properties": {
"account_id": {
"type": "string",
},
"type": {
"const": "twitter"
},
"options": {
"type": "array",
"items": {
"type": "object",
"additionalProperties": false,
"properties": {
"access_token": {
"type": "string"
},
"access_token_secret": {
"type": "string"
},
"consumer_key": {
"type": "string"
},
"consumer_secret": {
"type": "string"
}
},
"required": [
"access_token",
"access_token_secret",
"consumer_key",
"consumer_secret"
]
}
}
},
"required": [
"account_id",
"type",
"options"
]
},
{
"type": "object",
"additionalProperties": false,
"properties": {
"account_id": {
"type": "string",
},
"type": {
"const": "instagram"
},
"options": {
"type": "array",
"items": {
"type": "object",
"additionalProperties": false,
"properties": {
"access_token": {
"type": "string"
}
},
"required": [
"access_token"
]
}
}
},
"required": [
"account_id",
"type",
"options"
]
}
]
}
Thank you for any suggestions!

Adding IDs to Angular Schema Form's Input Fields?

I am using Angular Schema Form to generate input fields for me. I am wondering if there is any way I could customize the input fields by adding IDs. I tried looking at the documentation (https://github.com/Textalk/angular-schema-form/blob/development/docs/index.md), but it doesn't seem like the current version supports it (only adding classes).

I've just done a bit of research and on the "Kitchen Sink" Example on -
http://schemaform.io/examples/bootstrap-example.html
they have used this code
Form:
`[
{
"type": "fieldset",
"title": "Stuff",
"items": [
{
"type": "tabs",
"tabs": [
{
"title": "Simple stuff",
"items": [
{
"key": "name",
"placeholder": "Check the console",
"onChange": "log(modelValue)",
"feedback": "{'glyphicon': true, 'glyphicon-ok': hasSuccess(), 'glyphicon-star': !hasSuccess() }"
},
{
"key": "favorite",
"feedback": false
}
]
},
{
"title": "More stuff",
"items": [
"attributes.eyecolor",
"attributes.haircolor",
{
"key": "attributes.shoulders.left",
"title": "Left shoulder",
"description": "This value is copied to attributes.shoulders.right in the model",
"copyValueTo": [
"attributes.shoulders.right"
]
},
{
"key": "shoesizeLeft",
"feedback": false,
"copyValueTo": [
"shoesizeRight"
]
},
{
"key": "shoesizeRight"
},
{
"key": "invitation",
"tinymceOptions": {
"toolbar": [
"undo redo| styleselect | bold italic | link image",
"alignleft aligncenter alignright"
]
}
},
"things",
"dislike"
]
}
]
}
]
},
{
"type": "help",
"helpvalue": "<hr>"
},
"soul",
{
"type": "conditional",
"condition": "modelData.soul",
"items": [
{
"key": "soulserial",
"placeholder": "ex. 666"
}
]
},
{
"key": "date",
"minDate": "2014-06-20"
},
{
"key": "radio",
"type": "radios",
"titleMap": [
{
"value": "Transistor",
"name": "Transistor <br> Not the tube kind."
},
{
"value": "Tube",
"name": "Tube <br> The tube kind."
}
]
},
{
"key": "radio2",
"type": "radios-inline",
"titleMap": [
{
"value": "Transistor",
"name": "Transistor <br> Not the tube kind."
},
{
"value": "Tube",
"name": "Tube <br> The tube kind."
}
]
},
{
"key": "radiobuttons",
"style": {
"selected": "btn-success",
"unselected": "btn-default"
},
"type": "radiobuttons",
"notitle": true
},
{
"type": "actions",
"items": [
{
"type": "submit",
"style": "btn-info",
"title": "Do It!"
},
{
"type": "button",
"style": "btn-danger",
"title": "Noooooooooooo",
"onClick": "sayNo()"
}
]
}
]`
Schema:
`{
"type": "object",
"required": [
"name",
"shoesizeLeft"
],
"properties": {
"name": {
"title": "Name",
"description": "Gimme yea name lad",
"type": "string",
"pattern": "^[^/]*$",
"minLength": 2
},
"invitation": {
"type": "string",
"format": "html",
"title": "Invitation Design",
"description": "Design the invitation in full technicolor HTML"
},
"favorite": {
"title": "Favorite",
"type": "string",
"enum": [
"undefined",
"null",
"NaN"
]
},
"shoesizeLeft": {
"title": "Shoe size (left)",
"default": 42,
"type": "number"
},
"shoesizeRight": {
"title": "Shoe size (right)",
"default": 42,
"type": "number"
},
"attributes": {
"type": "object",
"title": "Attributes",
"required": [
"eyecolor"
],
"properties": {
"eyecolor": {
"type": "string",
"format": "color",
"title": "Eye color",
"default": "pink"
},
"haircolor": {
"type": "string",
"title": "Hair color"
},
"shoulders": {
"type": "object",
"title": "Shoulders",
"properties": {
"left": {
"type": "string",
"title": "Left"
},
"right": {
"type": "string",
"title": "Right"
}
}
}
}
},
"things": {
"type": "array",
"title": "I like...",
"items": {
"type": "string",
"enum": [
"clowns",
"compiling",
"sleeping"
]
}
},
"dislike": {
"type": "array",
"title": "I dislike...",
"items": {
"type": "string",
"title": "I hate"
}
},
"soul": {
"title": "Terms Of Service",
"description": "I agree to sell my undying <a href='https://www.youtube.com/watch?v=dQw4w9WgXcQ'>soul</a>",
"type": "boolean",
"default": true
},
"soulserial": {
"title": "Soul Serial No",
"type": "string"
},
"date": {
"title": "Date of party",
"type": "string",
"format": "date"
},
"radio": {
"title": "Radio type",
"type": "string",
"enum": [
"Transistor",
"Tube"
]
},
"radio2": {
"title": "My Second Radio",
"type": "string",
"enum": [
"Transistor",
"Tube"
]
},
"radiobuttons": {
"type": "string",
"enum": [
"Select me!",
"No me!"
]
}
}
}`
From first glance, it seems to generate an ID on the first input field. So I presume it is related to the Key in the form and the title in the Schema.

ID fields are generated from the last segment of the key in old 0.x versions and a combined form name and object path in the next version code for 1.0.0 and beyond.
So from 1.0.0 onward you will have proper unique ids like:
formName--objectName-arrayName-4-property
While a class matching that will also be available along with a version without array positions: formName--objectName-arrayName-property
The combination of unique id and flexible classes should cater to any customisation needs.

Categories