CODEWITHSUNDEEP
javascript
smpa01
smpa01

Reputation: 4282

Javascript to return the declared method as string

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);

Upvotes: 0

Views: 46

Answers (1)

Barmar
Barmar

Reputation: 781068

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;

Upvotes: 1

Related Questions