Displaying dynamic data from object

Question

I'm trying to display the 'helpText' data on the front end depending on the type. I's it possible to pass a conditional statement (metricsType variable) and the [key] value into what I'm trying to return. The last 'p' below gives you an idea of what I'm trying to achieve.

The key values are binary_accuracy or rmse in this example (from json file).

Appreciate any help.

const getMetrics = (model, type) => {
    const metricsType = type === 'REGRESSION' ? 'regression' : 'binary';

    const metrics = {
      binary: {
        binary_accuracy: {
          helpText: 'helptext 1',
        },
      },
      regression: {
        rmse: {
          helpText: 'helptext 2',
        },
      },
    };

    return Object.entries(model.test)
      .filter(([key]) => key !== 'loss')
      .map(([key, value]) => (
        <div>
          <div>
            <h4>{key}</h4>
   
            <p>{metrics.binary.binary_accuracy.helpText}</p>
            // output: helptext 1

            <p>{metrics.regression.rmse.helpText}</p>
            // output: helptext 2

            <p>{metrics.{metricsType}.[key].helpText}</p>
            // this does not work but an idea of what I'm trying to do. I've tried backticks, ${}, + but no luck.

          </div>
        </div>
      ));
  };

--------

return (
  {getMetrics(model, i.type)}
)

Guerric P · Accepted Answer · 2021-05-08 19:12:14Z

1

What you need is probably {metrics[metricsType][key].helpText} (hard to say without knowing what's inside model).

answered May 8, 2021 at 19:12

Guerric P

32k6 gold badges61 silver badges109 bronze badges

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

2 Comments

Ghatzi Over a year ago

thanks for your help. I was getting an 'helpText is undefined error' so I ended up getting it to work like this. {metrics[metricsType][key] && metrics[metricsType][key].helpText}. Not sure if theirs a better way.

Guerric P Over a year ago

yes it's a nice solution, depending on the browsers you target and the bundle tooling you use, you could also write this {metrics[metricsType][key]?.helpText}

Collectives™ on Stack Overflow

Displaying dynamic data from object

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related