REACTJS Place variables inside JSON string

I wonder if it’s possible to place variables into a JSON string value.

Some example: (file.json)

{
  "type": "description",
  "description": "${this.name} is ${this.age} years old. ${this.name}'s favorite color is ${this.favColor}"
}

Then in React:

data = require("file.json);
name = "John";
age = 20;
favColor = "blue";

render function…

render() {
  return() {
    <p>{this.data.description}</p>
  }
}

Any way to do something like this? The goal is to replace the variables automatically.

>Solution :

You can do a manual string find & replace. Something like the following answer will be ok: https://stackoverflow.com/a/1408373/9150652

This could then look something like the following in your React Component:

// Your JSON data as string
const json = `{
  "type": "description",
  "description": "{name} is {age} years old. {name}'s favorite color is {favColor}"
}`

// method to find and replace interpolate values
const interpolate = (str, values) => {
  return str.replace(/{([^{}]*)}/g,
      (a, b) => {
          const r = values[b];
          return typeof r === 'string' || typeof r === 'number' ? r : a;
      }
  );
};

const SomeComponent = () => {
  const values = {
    name: 'John',
    age: 27,
    favColor: 'red'
  };

  // Interpolate before parsing the JSON!
  const parsedJson = JSON.parse(interpolate(json, values));

  // Now you can use the object with the correct values filled in
  return <p>{parsedJson.description}</p>;
}

You could even try passing in this instead of values and use local values of your React component.
Should (maybe) work out of the box aswell.