Place variables inside JSON string in React

Question

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.

You can certainly do that, but you will have to do a manual string find & replace. You can find how to do this pretty quickly. — MauriceNino
– MauriceNino, Commented Jan 18, 2022 at 11:40
This isn't possible, but you can write a Person class, initialize it using the JSON data, then make description a function that fills in the data. — user5734311
– user5734311, Commented Jan 18, 2022 at 11:41
I wanted to avoid find&replace, I thought there is a way to automatically replace vars like in php. — redmaster
– redmaster, Commented Jan 18, 2022 at 11:42
find and replace can be done automatically if you write a dedicated function for it. How much more automatic can it get? — MauriceNino
– MauriceNino, Commented Jan 18, 2022 at 11:44
@ChrisG this was just an example. In my case the description is totally different for every object so it must be contained in the JSON — redmaster
– redmaster, Commented Jan 18, 2022 at 11:44

MauriceNino · Accepted Answer · 2022-01-18 12:00:16Z

3

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>;
}

If you use Class components, you could even try passing in this instead of values and use local values, similar to how you described it in your question
Should (maybe) work out of the box aswell.

edited Jan 18, 2022 at 12:00

answered Jan 18, 2022 at 11:53

MauriceNino

6,8851 gold badge32 silver badges76 bronze badges

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

1 Comment

redmaster Over a year ago

I wrote my find&replace function. Thank you anyway.

Collectives™ on Stack Overflow

Place variables inside JSON string in React

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related