Access objects by a combination of an object and two paths

Question

I would like to combine an object, a path in a variable and a path, something like explained in https://stackoverflow.com/a/43849204/14480225 but with 3 "parts".

Here is minimal reproducible example: I want the combine() function to print selector[0].children[foo].textContent or selector[0].children[foo].children[0].textContent depending on bar value.

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'))
  //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>

I have a class that is returning multiple similar properties (10). My constructor inputs a value that can be used to determine something like bar in the minimal example. Each property by just changing something like bar in the minimal example can have the intended output. I want something like this to be able to switch between different cases without having to write a massive switch for each bar cases so a lot of code duplication.

Answer 1

Something like this? But please read about eval() here before using it: 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>

And here is a safe way of using it:

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

What you need to use is querySelector to find the element you are after.

Read about querySelector and querySelectorAll so you could understand better.

Using eval is not recommended and it is risky.

See if you like my idea 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 3

As we discussed in the comments, here is a solution that takes tree arguments and dynamically retrieves the property from the element of your choosing. Optionally, if you include the depth as number of children, the prop will be retrieved from that child.

Demonstration

Given:

The need to pass a CSS selector The number of the child element or empty string The property name for the value needed

When:

Passing those three given parmeters to a function

Then:

That function should return the value of the property identified from the child identified by number if provided of the element chosen with the selector.

Click test to run

// NOTE: No error checking - this is only a demonstration

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>