Transform JSON array using ES 6 methods

I have the following example of an array format that needs to be transformed.

{ [
  {
    "condition": "$and",
    "children": [
      { "column": "Title", "comparison": "$eq", "columnValue": "1" },
      { "column": "Event Status", "comparison": "$eq", "columnValue": "2" }
    ]
  },
  {
    "condition": "$or",
    "children": [
      {
        "column": "Issue Description",
        "comparison": "$lt",
        "columnValue": "3"
      },
      { "column": "Number Label", "comparison": "$gte", "columnValue": "4" }
    ]
  }
]}

It needs to be transformed like this…

{ 
    [
        { 
            "$and" : [
                { 
                    "Title" : {
                        "$eq" : "1"
                    }
                }, 
                { 
                    "Event Status" : {
                        "$eq" : "2"
                    }
                }
            ]
        }, 
        { 
            "$or" : [
                { 
                    "Issue Description" : { 
                        "$lt" : "3"
                    }
                }, 
                { 
                    "Number Label" : { 
                        "$gte" : "4"
                    }
                }
            ]
        }
    ]
}

I’ve tried various iterations of map and reduce. Gotten close, but not completely there.

This is in a Vue project. Here is an example of what I tried.

const result = this.parents.map(({ condition, children }) => {
        const childArray = children.reduce(
          (c, v) => ({
            ...c,
            [v.column]: { [v.comparison]: v.columnValue }
          }),
          {}
        );
        childArray.condition = condition;
        return childArray;
      });

This returns:

[
  {
    "Title": { "$eq": "1" },
    "Event Status": { "$eq": "2" },
    "condition": "$and"
  },
  {
    "Issue Description": { "$lt": "3" },
    "Number Label": { "$gte": "4" },
    "condition": "$or"
  }
]

I cannot figure out how to get the “condition” key in the right place.

Answer

ES6 computed property names will be a big help, allowing variable expression enclosed in [] square braces to compute a key value…

let inputExpressions = [
  {
    "condition": "$and",
    "children": [
      { "column": "Title", "comparison": "$eq", "columnValue": "1" },
      { "column": "Event Status", "comparison": "$eq", "columnValue": "2" }
    ]
  },
  {
    "condition": "$or",
    "children": [
      {
        "column": "Issue Description",
        "comparison": "$lt",
        "columnValue": "3"
      },
      { "column": "Number Label", "comparison": "$gte", "columnValue": "4" }
    ]
  }
];

function translateExpression(expression) {
  const translateClause = clause => {
    return { [clause.column] :  { [clause.comparison] : clause.columnValue } };
  };
  return { [expression.condition] : expression.children.map(translateClause) };
}

let resultExpressions = inputExpressions.map(translateExpression);
console.log(resultExpressions)