How to populate the string template variables in an array of objects in javascript?

Question

I've created an array of object and in some of these objects I need to refer to the properties of that object inside of it like this:

let fields = [

{
    "ATTRIBUTE_NAME": "PERSON_NAME",
    "FIELD_NAME": "name"
    "ATTRIBUTE_ID": 1,
    "RULES": [
        {
            "MSG":`${this.ATTRIBUTE_NAME} is not valid`,
            "NAME": "VALID_VALUES",
        }
    ]
},
{
    "ATTRIBUTE_NAME": "PERSON_JOB",
    "FIELD_NAME": "job"
    "ATTRIBUTE_ID": 2,
    "RULES": [
        {
            "MSG":`${this.ATTRIBUTE_NAME} is not valid`,
            "NAME": "VALID_VALUES",
        }
    ]
}

] But this keyword returning undefined! I want the "MSG" property to pick up the attribute name and populate it for me. Does anybody know how to capture it inside the template string?

You can't, because the fields array hasn't been defined yet and thus its sub-elements haven't either. — Angel Politis, Jul 30 '18 at 13:47
You'd have to define the object first then iterate through it and set the properties accordingly — LegenJerry, Jul 30 '18 at 13:48

Tyler Roper · Answer 1 · 2018-09-18T02:58:15.907

The easiest way would be to use a getter for your RULES property.

A simple demonstration:

var obj = {
  id: 1,

  get info() {
    return `The id is ${this.id}.`;
  }

}

console.log(obj.info);

Applied to your code:

let fields = [{
  "ATTRIBUTE_NAME": "PERSON_NAME",
  "FIELD_NAME": "name",
  "ATTRIBUTE_ID": 1,

  get RULES() {
    return [{
      "MSG": `${this.ATTRIBUTE_NAME} is not valid`,
      "NAME": "VALID_VALUES",
    }]
  }

}];

console.log(fields[0].RULES[0].MSG);

Angel Politis · Answer 2 · 2018-07-30T13:58:39.907

You can't use a self-reference like that, because the fields array and its sub-elements have not yet been declared. What you can do, instead, is:

Declare the fields array and its sub-elements first.
Then, iterate over every element and add the object you want in the RULES array.

Example:

/* Declare the array and its sub-elements. */
let fields = [{
    "ATTRIBUTE_NAME": "PERSON_NAME",
    "FIELD_NAME": "name",
    "ATTRIBUTE_ID": 1,
    "RULES": []
  },
  {
    "ATTRIBUTE_NAME": "PERSON_JOB",
    "FIELD_NAME": "job",
    "ATTRIBUTE_ID": 2,
    "RULES": []
  }
];

/* Iterate over every element. */
fields.forEach(element => {
  element.RULES.push({
    "MSG": element.ATTRIBUTE_NAME + " is not valid",
    "NAME": "VALID_VALUES"
  });
});

/* Log the result. */
console.log(fields);

How to populate the string template variables in an array of objects in javascript?

2 Answers2