I am working with a svg element and I am trying to create a text element by dynamically retrieving a parameter that gets passed on to a function argument prior.
For example, a minimal sample
const data = [{ "Month": 1, "Value": 10000, "MonthName": "Jan" }, { "Month": 2, "Value": 20000, "MonthName": "Feb" }];
const data2 = data.map((x)=>x.Value);
// targeting the svg itself
const svg = document.querySelector("svg");
// variable for the namespace
const svgns = "http://www.w3.org/2000/svg"
const text1 = document.createElementNS(svgns, "text")
text1.setAttribute('x', '10');
text1.setAttribute('y', '10');
text1.textContent = 'Value';
svg.appendChild(text1);<svg class="layer1" xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200">
</svg>In this case, is there any way I can have javascript return the const data2 statement as a string so that I can dynamically generate the text content like below
const data = [{ "Month": 1, "Value": 10000, "MonthName": "Jan" }, { "Month": 2, "Value": 20000, "MonthName": "Feb" }];
const data2 = data.map((x)=>x.Value);
// targeting the svg itself
const svg = document.querySelector("svg");
// variable for the namespace
const svgns = "http://www.w3.org/2000/svg"
const text1 = document.createElementNS(svgns, "text")
text1.setAttribute('x', '10');
text1.setAttribute('y', '10');
text1.textContent = `data.map((x)=>x.Value)`.match(/(?<=x\.)[a-zA-Z]+/gm);
svg.appendChild(text1);<svg class="layer1" xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200">
</svg>So instead of hardcoding,
text1.textContent = 'Value';
I desire to write the following as const data2 will vary. For example, it can be x.Month/x.MonthName
text1.textContent = {a function that returns const data2 expression as string}`data.map((x)=>x.Value)`.match(/(?<=x\.)[a-zA-Z]+/gm);
No, there's no way to get the expression that was used in the declaration of a a variable as a string.
You should solve this with a level of indirection. Put the property in a string variable, and use that when calculating data2 and also for the textContent.
const data2_prop = 'Value';
const data2 = data.map((x) => x[data2_prop]);
...
text1.textContent = data2_prop;