Javascript to return the declared method as string

Question

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

Hard time understanding your question, you could loop over the array and preform any desired actions with the current object? — 0stone0
– 0stone0, Commented May 10, 2022 at 15:47
To simplify if I write const x =[1,2].length, is there any way in js I can have [1,2].length returned as a string? x.toString(); returns 2 but I am desiring x.someFunc that returns [1,2].length instead of 2. — smpa01
– smpa01, Commented May 10, 2022 at 15:52
Don't think thats possible. This helps, but as you said does not give desired output. — 0stone0
– 0stone0, Commented May 10, 2022 at 15:53
How every, this sounds like an x/y problem, care the explain 'why' you want to do this? — 0stone0
– 0stone0, Commented May 10, 2022 at 15:54

Barmar · Accepted Answer · 2022-05-10 16:32:33Z

1

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;

answered May 10, 2022 at 16:32

Barmar

789k57 gold badges554 silver badges669 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Javascript to return the declared method as string

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related