How to map an object with the keys from an object-CodePudding

I have this json array:

const cars = {
    "type": "{{TYPE_OF_RECORDS}}",
    "characteristic": "{{CHARACTERISTICS}}",
    "generation": "{{GENERATION}}",
    "records": [
        {
            "name": "{{CAR_NAME_1}}",
            "colors": [
                {
                    "color": "{{CAR_COLOR_1}}",
                    "types": ["{{TYPE_1_A}}", "{{TYPE_1_B}}", "{{TYPE_1_C}}"]
                },
                {
                    "color": "{{CAR_COLOR_2}}",
                    "types": ["{{TYPE_2_A}}", "{{TYPE_2_B}}", "{{TYPE_2_C}}"]
                }
            ]
        },
        {
            "name": "{{CAR_NAME_2}}",
            "colors": [
                {
                    "color": "{{CAR_COLOR_3}}",
                    "types": ["{{TYPE_3_A}}", "{{TYPE_3_B}}", "{{TYPE_3_C}}"]
                },
                {
                    "color": "{{CAR_COLOR_4}}",
                    "types": ["{{TYPE_4_A}}", "{{TYPE_4_B}}", "{{TYPE_4_C}}"]
                }
            ]
        }
    ]
};

As you can see the value followed by these {{}}. I need to map values on these tags via another object having same keys.

Object with tag values:

const tagValues = {
    "CAR_NAME_1": "Toyota",
    "CAR_COLOR_1": "Red",
    "TYPE_1_A": "Light",
    "CHARACTERISTICS": "Mechanical",
    "GENERATION": "5th",
    "TYPE_1_B": "Medium",
    "TYPE_1_C": "Dark",
    "CAR_COLOR_2": "Blue",
    "TYPE_2_A": "Medium",
    "TYPE_2_B": "Ultra light",
    "TYPE_OF_RECORDS": "Cars",
    "TYPE_2_C": "Super dark",
    "CAR_NAME_2": "Honda",
    "CAR_COLOR_3": "Black",
    "TYPE_3_A": "Dark",
    "TYPE_3_B": "Ultra light",
    "TYPE_3_C": "light",
    "CAR_COLOR_4": "White",
    "TYPE_4_A": "Light",
    "TYPE_4_B": "Soft Dark",
    "TYPE_4_C": "Dark medium",
};

Now as you can see this object contains all the values of these tags.

What is the best approach to map these tags on the original array?

Expected response:

{
    "type": "Cars",
    "characteristic": "Mechanical",
    "generation": "5th",
    "records": [
        {
            "name": "Toyota",
            "colors": [
                {
                    "color": "Red",
                    "types": ["Light", "Medium", "Dark"]
                },
                {
                    "color": "Blue",
                    "types": ["Medium", "Ultra light", "Super dark"]
                }
            ]
        },
        {
            "name": "Honda",
            "colors": [
                {
                    "color": "Black",
                    "types": ["Dark", "Ultra light", "light"]
                },
                {
                    "color": "White",
                    "types": ["Light", "Soft Dark", "Dark medium"]
                }
            ]
        }
    ]
};

Now what I have tried so far is totally wrong, since I don't know how to approach this, because here we are not sure how many nested objects or arrays we can have. It could be up-to nth level in future. So here I need a solution where I don't need to worry about the structure of object.

const cars = {
    "type": "{{TYPE_OF_RECORDS}}",
    "characteristic": "{{CHARACTERISTICS}}",
    "generation": "{{GENERATION}}",
    "records": [
        {
            "name": "{{CAR_NAME_1}}",
            "colors": [
                {
                    "color": "{{CAR_COLOR_1}}",
                    "types": ["{{TYPE_1_A}}", "{{TYPE_1_B}}", "{{TYPE_1_C}}"]
                },
                {
                    "color": "{{CAR_COLOR_2}}",
                    "types": ["{{TYPE_2_A}}", "{{TYPE_2_B}}", "{{TYPE_2_C}}"]
                }
            ]
        },
        {
            "name": "{{CAR_NAME_2}}",
            "colors": [
                {
                    "color": "{{CAR_COLOR_3}}",
                    "types": ["{{TYPE_3_A}}", "{{TYPE_3_B}}", "{{TYPE_3_C}}"]
                },
                {
                    "color": "{{CAR_COLOR_4}}",
                    "types": ["{{TYPE_4_A}}", "{{TYPE_4_B}}", "{{TYPE_4_C}}"]
                }
            ]
        }
    ]
};


const tagValues = {
    "CAR_NAME_1": "Toyota",
    "CAR_COLOR_1": "Red",
    "TYPE_1_A": "Light",
    "CHARACTERISTICS": "Mechanical",
    "GENERATION": "5th",
    "TYPE_1_B": "Medium",
    "TYPE_1_C": "Dark",
    "CAR_COLOR_2": "Blue",
    "TYPE_2_A": "Medium",
    "TYPE_2_B": "Ultra light",
    "TYPE_OF_RECORDS": "Cars",
    "TYPE_2_C": "Super dark",
    "CAR_NAME_2": "Honda",
    "CAR_COLOR_3": "Black",
    "TYPE_3_A": "Dark",
    "TYPE_3_B": "Ultra light",
    "TYPE_3_C": "light",
    "CAR_COLOR_4": "White",
    "TYPE_4_A": "Light",
    "TYPE_4_B": "Soft Dark",
    "TYPE_4_C": "Dark medium",
};

const finalObj =  {};
for(var key in cars){
    console.log(cars[key]);
    finalObj[key] = cars[key].replace('{{'   cars[key]   '}}', tagValues[cars[key]]);
}

CodePudding user response：

You need to write a recursive solution, something like this

const cars = {"type": "{{TYPE_OF_RECORDS}}","characteristic": "{{CHARACTERISTICS}}","generation": "{{GENERATION}}","records": [{"name": "{{CAR_NAME_1}}","colors": [{"color": "{{CAR_COLOR_1}}","types": ["{{TYPE_1_A}}", "{{TYPE_1_B}}", "{{TYPE_1_C}}"]},{"color": "{{CAR_COLOR_2}}","types": ["{{TYPE_2_A}}", "{{TYPE_2_B}}", "{{TYPE_2_C}}"]}]},{"name": "{{CAR_NAME_2}}","colors": [{"color": "{{CAR_COLOR_3}}","types": ["{{TYPE_3_A}}", "{{TYPE_3_B}}", "{{TYPE_3_C}}"]},{"color": "{{CAR_COLOR_4}}","types": ["{{TYPE_4_A}}", "{{TYPE_4_B}}", "{{TYPE_4_C}}"]}]}]};
const tagValues = {"CAR_NAME_1": "Toyota","CAR_COLOR_1": "Red","TYPE_1_A": "Light","CHARACTERISTICS": "Mechanical","GENERATION": "5th","TYPE_1_B": "Medium","TYPE_1_C": "Dark","CAR_COLOR_2": "Blue","TYPE_2_A": "Medium","TYPE_2_B": "Ultra light","TYPE_OF_RECORDS": "Cars","TYPE_2_C": "Super dark","CAR_NAME_2": "Honda","CAR_COLOR_3": "Black","TYPE_3_A": "Dark","TYPE_3_B": "Ultra light","TYPE_3_C": "light","CAR_COLOR_4": "White","TYPE_4_A": "Light","TYPE_4_B": "Soft Dark","TYPE_4_C": "Dark medium"};

function getObj(obj) {
  if (Array.isArray(obj)) {
    for (let i = 0; i < obj.length; i  ) {
      // if value is string replace directly
      if (typeof obj[i] === 'string') {
        obj[i] = tagValues[obj[i].replaceAll('{', '').replaceAll('}', '')] || i
      } 
      // go recursively in case of other values
      else {
        getObj(obj[i])
      }
    }
  } else {
    for (let key in obj) {
       // if value is string replace directly
      if (typeof obj[key] === 'string') {
        obj[key] = tagValues[obj[key].replaceAll('{', '').replaceAll('}', '')] || obj[key]
      } 
      // go recursively in case of other values
      else {
        getObj(obj[key])
      }
    }
  }
  return obj
}

console.log(getObj(cars))

CodePudding user response：

const cars = {
  "type": "{{TYPE_OF_RECORDS}}",
  "characteristic": "{{CHARACTERISTICS}}",
  "generation": "{{GENERATION}}",
  "records": [{
      "name": "{{CAR_NAME_1}}",
      "colors": [{
          "color": "{{CAR_COLOR_1}}",
          "types": ["{{TYPE_1_A}}", "{{TYPE_1_B}}", "{{TYPE_1_C}}"]
        },
        {
          "color": "{{CAR_COLOR_2}}",
          "types": ["{{TYPE_2_A}}", "{{TYPE_2_B}}", "{{TYPE_2_C}}"]
        }
      ]
    },
    {
      "name": "{{CAR_NAME_2}}",
      "colors": [{
          "color": "{{CAR_COLOR_3}}",
          "types": ["{{TYPE_3_A}}", "{{TYPE_3_B}}", "{{TYPE_3_C}}"]
        },
        {
          "color": "{{CAR_COLOR_4}}",
          "types": ["{{TYPE_4_A}}", "{{TYPE_4_B}}", "{{TYPE_4_C}}"]
        }
      ]
    }
  ]
};



const tagValues = {
  "CAR_NAME_1": "Toyota",
  "CAR_COLOR_1": "Red",
  "TYPE_1_A": "Light",
  "CHARACTERISTICS": "Mechanical",
  "GENERATION": "5th",
  "TYPE_1_B": "Medium",
  "TYPE_1_C": "Dark",
  "CAR_COLOR_2": "Blue",
  "TYPE_2_A": "Medium",
  "TYPE_2_B": "Ultra light",
  "TYPE_OF_RECORDS": "Cars",
  "TYPE_2_C": "Super dark",
  "CAR_NAME_2": "Honda",
  "CAR_COLOR_3": "Black",
  "TYPE_3_A": "Dark",
  "TYPE_3_B": "Ultra light",
  "TYPE_3_C": "light",
  "CAR_COLOR_4": "White",
  "TYPE_4_A": "Light",
  "TYPE_4_B": "Soft Dark",
  "TYPE_4_C": "Dark medium",
};


for (let prop in cars) {
  let value;
  if (typeof cars[prop] === 'string') {
    value = cars[prop].replaceAll('{', '').replaceAll('}', '');
    cars[prop] = tagValues[value];
  } else {
    cars[prop].map((e, i, arr) => {
      for (let prop1 in e) {
        if (typeof e[prop1] === 'string') {
          value = e[prop1].replaceAll('{', '').replaceAll('}', '');
          e.name = tagValues[value];
        } else {
          e[prop1].map((e) => {
            for (let prop2 in e) {
              if (typeof e[prop2] === 'string') {
                value = e[prop2].replaceAll('{', '').replaceAll('}', '');
                e.color = tagValues[value];
              } else {
                e[prop2].map((e, i, arr) => {
                  if (typeof e === 'string') {
                    value = e.replaceAll('{', '').replaceAll('}', '');
                    arr[i] = tagValues[value];
                  }
                })
              }
            }
          })
        }
      }
    })
  }
}

console.log(cars);