Utilize a unique method of accessing objects through a combination of an object along with two specific

Question

Utilize a unique method of accessing objects through a combination of an object along with two specific

I am looking to create a function that combines an object, a path in a variable, and another path, similar to what is described in this StackOverflow post, but with 3 different components.

Here is a simple example to illustrate my goal: I want the combine() function to output either

selector[0].children[foo].textContent

or

selector[0].children[foo].children[0].textContent

based on the value of the bar variable.

const selector = document.getElementsByClassName('main')
const foo = 0
let bar = ''

const toggle = () => {
  if (bar === '') bar = '.children[0]'
  else bar = ''
}

const test = () => {
  console.log(combine('selector[0].children[foo]', bar, '.textContent'))
}

<div class='main'>
  <h1>Hello<span>world</span></h1>
  <button onclick='toggle()'>toggle</button>
  <button onclick='test()'>test</button>
</div>

I have a class that returns multiple properties (10) that are similar. The constructor takes a value that can determine something akin to the bar variable in the example above. By simply adjusting this value, each property can produce the desired result. I am seeking a solution that allows for switching between different scenarios without the need for extensive switch cases to handle each situation separately, thus reducing code duplication.

javascript string typescript object

Answer 1

Answer №1

Is this what you were looking for? Make sure to educate yourself on the risks of using eval() before implementing it in your code: call javascript object method with a variable

const selector = document.getElementsByClassName('main')
const foo = 0
let bar = ''

const toggle = () => {
  if (bar === '') bar = '.children[0]'
  else bar = ''
}

function combine(){
let result = "selector[0].children[foo]"+bar+".textContent"
return result
}

const test = () => {
  console.log(eval(combine()))
  //I want a function like combine() that will print 'selector[0].children[foo].textContent' or 'selector[0].children[foo].children[0].textContent' depending on bar value.
}

<div class='main'>
  <h1>Hello<span>world</span></h1>
  <button onclick='toggle()'>toggle</button>
  <button onclick='test()'>test</button>
</div>

For a safer alternative, consider using this approach:

const selector = document.getElementsByClassName('main')
const foo = 0
let bar = ''

const toggle = () => {
  if (bar === '') bar = '.children[0]'
  else bar = ''
}

function combine(){
return Function('"use strict";return (selector[0].children[foo]'+bar+'.textContent)')()
}

const test = () => {
  console.log(combine())

}

<div class='main'>
  <h1>Hello<span>world</span></h1>
  <button onclick='toggle()'>toggle</button>
  <button onclick='test()'>test</button>
</div>

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/eval#never_use_eval

Answer 2

Is this what you were looking for? Make sure to educate yourself on the risks of using eval() before implementing it in your code: call javascript object method with a variable

const selector = document.getElementsByClassName('main')
const foo = 0
let bar = ''

const toggle = () => {
  if (bar === '') bar = '.children[0]'
  else bar = ''
}

function combine(){
let result = "selector[0].children[foo]"+bar+".textContent"
return result
}

const test = () => {
  console.log(eval(combine()))
  //I want a function like combine() that will print 'selector[0].children[foo].textContent' or 'selector[0].children[foo].children[0].textContent' depending on bar value.
}

<div class='main'>
  <h1>Hello<span>world</span></h1>
  <button onclick='toggle()'>toggle</button>
  <button onclick='test()'>test</button>
</div>

For a safer alternative, consider using this approach:

const selector = document.getElementsByClassName('main')
const foo = 0
let bar = ''

const toggle = () => {
  if (bar === '') bar = '.children[0]'
  else bar = ''
}

function combine(){
return Function('"use strict";return (selector[0].children[foo]'+bar+'.textContent)')()
}

const test = () => {
  console.log(combine())

}

<div class='main'>
  <h1>Hello<span>world</span></h1>
  <button onclick='toggle()'>toggle</button>
  <button onclick='test()'>test</button>
</div>

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/eval#never_use_eval

Answer 3

Answer №2

If you're searching for a specific element, make sure to utilize the querySelector method.

Learn more about querySelector and querySelectorAll for a deeper understanding.

Avoid using eval as it can pose risks.

Take a look at my proposed solution below.

const selector = document.getElementsByClassName('main')
const path = ":nth-child(1)"

function getText(s, p) {
  if (s.length) // Is array
     return Array.from(s).map(x=> x.querySelector(p)?.textContent ?? "").join(" ");
  return  s.querySelector(p)?.textContent;
}

console.log(getText(selector, path))

<div class='main'>
  <h1>Hello<span>world</span></h1>
  <button onclick='toggle()'>toggle</button>
  <button onclick='test()'>test</button>
</div>

Answer 4

If you're searching for a specific element, make sure to utilize the querySelector method.

Learn more about querySelector and querySelectorAll for a deeper understanding.

Avoid using eval as it can pose risks.

Take a look at my proposed solution below.

const selector = document.getElementsByClassName('main')
const path = ":nth-child(1)"

function getText(s, p) {
  if (s.length) // Is array
     return Array.from(s).map(x=> x.querySelector(p)?.textContent ?? "").join(" ");
  return  s.querySelector(p)?.textContent;
}

console.log(getText(selector, path))

<div class='main'>
  <h1>Hello<span>world</span></h1>
  <button onclick='toggle()'>toggle</button>
  <button onclick='test()'>test</button>
</div>

Answer 5

Answer №3

After our exchange in the comments, I have devised a method that requires three inputs and dynamically retrieves the specified property from the selected element. Additionally, if you provide the depth as the number of children, the property will be fetched from that specific child.

Illustration

Given:

The necessity to input a CSS selector The index of the child element or leave it blank The name of the property for the desired value

When:

You apply these three parameters to a function

Then:

The function will yield the value of the specified property from the chosen child by its position, if indicated, within the designated element using the selector.

Click to execute the test

// DISCLAIMER: For demonstration purposes only - lacks error handling

function getValueFromDOM(selector, child, prop) {
  if (!child) {
    return document.querySelector(`${selector}`)[prop];
  } 
  return document.querySelector(`${selector}`).querySelector(`:nth-child(${child})`)[prop];
}

var children = [1, 2, 3, 4];
var output = document.getElementById('output');

function test() {
  children.forEach(child => {
    const value = getValueFromDOM('.main', child, 'textContent');
    output.innerHTML += `<p>${value}</p>`;
  });
  // With empty second argument - will print 'main'
  output.innerHTML += getValueFromDOM('.main', '', 'className')

}

document.querySelector('button:last-of-type').addEventListener('click', test);

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>

<body>

  <div class='main'>
    <h4>Hello<span>world</span></h4>
    <button>toggle</button>
    <button>test</button>
    <div>Four</div>
    <div>Five</div>
    <div>Six</div>
  </div>
  <h3>Output:</h3>
  <div id="output"></div>
</body>

</html>

Answer 6

After our exchange in the comments, I have devised a method that requires three inputs and dynamically retrieves the specified property from the selected element. Additionally, if you provide the depth as the number of children, the property will be fetched from that specific child.

Illustration

Given:

The necessity to input a CSS selector The index of the child element or leave it blank The name of the property for the desired value

When:

You apply these three parameters to a function

Then:

The function will yield the value of the specified property from the chosen child by its position, if indicated, within the designated element using the selector.

Click to execute the test

// DISCLAIMER: For demonstration purposes only - lacks error handling

function getValueFromDOM(selector, child, prop) {
  if (!child) {
    return document.querySelector(`${selector}`)[prop];
  } 
  return document.querySelector(`${selector}`).querySelector(`:nth-child(${child})`)[prop];
}

var children = [1, 2, 3, 4];
var output = document.getElementById('output');

function test() {
  children.forEach(child => {
    const value = getValueFromDOM('.main', child, 'textContent');
    output.innerHTML += `<p>${value}</p>`;
  });
  // With empty second argument - will print 'main'
  output.innerHTML += getValueFromDOM('.main', '', 'className')

}

document.querySelector('button:last-of-type').addEventListener('click', test);

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>

<body>

  <div class='main'>
    <h4>Hello<span>world</span></h4>
    <button>toggle</button>
    <button>test</button>
    <div>Four</div>
    <div>Five</div>
    <div>Six</div>
  </div>
  <h3>Output:</h3>
  <div id="output"></div>
</body>

</html>

Utilize a unique method of accessing objects through a combination of an object along with two specific

Answer №1

Answer №2

Answer №3

Illustration

Given:

When:

Then:

Click to execute the test

Similar questions

The Interface in TypeScript will not function properly when used on a variable (Object) that has been declared with the value returned from a function

Best method to determine if three points in time are less than thirty minutes apart

Data sent through AJAX messaging is not being acknowledged

When selecting an option triggers a pop-up in JavaScript

Issue with state not being reflected accurately

Navigate divs with varying z-index values

Updating values using events within a v-for loop in a Vue template: A step-by-step guide

Implementing a Timer on a Bootstrap Progress Bar Using JavaScript

Guide on how to append input field data to a table using jQuery

The collapsible tree nodes overlap one another in the D3.js visualization

Retrieve a Play Scala variable in the $scope of an AngularJS application

When an AJAX request is made, it can either return an array or a single object, potentially leading to

Tips for creating a typescript typeguard function for function types

What is the mechanism behind making a Promise appear synchronous when using a Proxy in JavaScript?

Issue encountered while attempting to pass a function within the data in React

`Generating and refreshing data on a uniquely structured grid using JQuery and AJAX`

Is it possible to use Markdown in JavaScript without needing to enclose it in <p>

Transmitting client-side Javascript data to backend server using Express

Executing functions in a pre-defined order with AngularJS: A step-by-step guide

Sequencing Exponential Numbers in the Real Number System