ACE-IoT-Solutions / ace-svg-react

Grafana SVG Rendering Panel using the 7+ Plugin Framework
https://grafana.com/grafana/plugins/aceiot-svg-panel/
MIT License
40 stars 14 forks source link

Accessing mapped Elements via loop #38

Closed fabi222 closed 12 months ago

fabi222 commented 1 year ago

Hello,

Is there a way to access all my SVGMappings through a loop? I only mapped textareas of my SVG where i want to display my data. Can i iterate throug all my Mappings to do so?

acedrew commented 12 months ago

Yes, should be able to use any map or foreach JS structure to walk through the mappings object.

acedrew commented 12 months ago

Sure, I'd be happy to show you how to do this in JavaScript.

Please note that the map function is native to arrays, not objects, so you need to convert an object's properties into an array first. Here, I'm going to use Object.entries() which gives an array of key-value pairs, which we can then use map or forEach on.

Also, remember that accessing DOM elements directly from a JavaScript object is not a common or necessarily recommended practice. I'll use simple dummy strings to represent DOMElements in this example, but in reality you'd be dealing with actual DOM objects.

// Assuming we have the following object
let obj = {
    'element1': 'DOMElement1',
    'element2': 'DOMElement2',
    'element3': 'DOMElement3',
}

// Using .map() method
console.log("Using map:");
Object.entries(obj).map(([key, value]) => {
    console.log(`Key: ${key}, Value: ${value}`);
});

// Using .forEach() method
console.log("Using forEach:");
Object.entries(obj).forEach(([key, value]) => {
    console.log(`Key: ${key}, Value: ${value}`);
});

When run, each of these will loop over the entries of the obj object, logging each key and value. Please replace 'DOMElement1', 'DOMElement2', and 'DOMElement3' with actual DOM elements according to your need.

You may also need to manipulate these DOM elements according to your requirements within the map and forEach functions.