How to combine an array of objects depending on the key: value of each object?

Question

I have an array of json objects like below. Each object has permanent key 'type' and depending on the 'type', new keys are added.

So if type: 'text', we have a new key 'text'.

If type: 'notText', we have a new key 'attrs'.

arrayOfObj = [
    {
        "type": "text",
        "text": "="
    },
    {
        "type": "text",
        "text": " "
    },
    {
        "type": "text",
        "text": "S"
    },
    {
        "type": "text",
        "text": "O"
    },
    {
        "type": "notText",
        "attrs": {
            "id": 20,
            "data": "Something",
        }
    }
]

Depending on the 'type' of each item i.e. if type: 'text', then I need to combine each 'text' into 1 object like so:

arrayOfObj = [
    {
        "type": "text",
        "text": "= SO"
    },
    {
        "type": "notText",
        "attrs": {
            "id": 20,
            "data": "Something",
        }
    }
]

I know that to start it I can use

if(this.arrayOfObj.map(ed=>ed.type) === 'text') {
      Object.assign({}, ...arrayOfObj);           
}

However it doesn't quite work and I'm unsure of how to go further.

Would anyone have any idea of how to accomplish this?

What happens if for a given type you have a mix of text and attr? What should we do then? — Terry
– Terry, Commented Jul 15, 2021 at 9:46
There's only two values that 'type' could be, which is either 'text' or 'notText'. If it's 'text' then automatically a 'text' key will be included and if it's 'notText' then an 'attr' will be included. There won't be a obj with both 'text' and 'attr'. The issue isn't quite creating the keys it's more assigning values to the keys. — One_for_all
– One_for_all, Commented Jul 15, 2021 at 9:49
No it's more if 'type' = 'text', then combine the 'text' of all objects with 'type' = 'text', there's an example above with arrayOfObj. So starting with the first arrayOfObj, how to get to the second. — One_for_all
– One_for_all, Commented Jul 15, 2021 at 9:52

ikhvjs · Accepted Answer · 2021-07-15 10:01:58Z

2

Example below.

const arrayOfObj = [ { type: "text", text: "=", }, { type: "text", text: " ", }, { type: "text", text: "S", }, { type: "text", text: "O", }, { type: "notText", attrs: { id: 20, data: "Something", }, }, ];

const output = arrayOfObj.reduce(
  (a, b) => {
    if (b.type === "text") {
      a[0].text += b.text;
    } else {
      a.push({
        type: b.type,
        attrs: b.attrs,
      });
    }
    return a;
  },
  [{ type: "text", text: "" }]
);

console.log(output);

answered Jul 15, 2021 at 10:01

ikhvjs

6,0974 gold badges24 silver badges53 bronze badges

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

Comments

R3tep · Accepted Answer · 2021-07-15 10:04:33Z

You can use reduce method to do this.

arrayOfObj = [{
    "type": "text",
    "text": "="
  },
  {
    "type": "text",
    "text": " "
  },
  {
    "type": "text",
    "text": "S"
  },
  {
    "type": "text",
    "text": "O"
  },
  {
    "type": "notText",
    "attrs": {
      "id": 20,
      "data": "Something",
    }
  },
  {
    "type": "notText",
    "attrs": {
      "id": 22,
      "data": "Something",
    }
  }
]

const t = arrayOfObj.reduce((acc, curr) => {
  if (curr.type === "text") {
    const accTypeText = acc.find((v) => v.type === "text");
    if (accTypeText) {
      accTypeText.text += curr.text;
      return [...acc];
    }
  }
  return [...acc, curr];
}, [])

console.log(t);

Note: the map method return an array, so your if statement return always false

Terry Lennox · Accepted Answer · 2021-07-15 10:12:09Z

We can use Array.reduce to create the desired object from the arrayOfObj input, if it is of type 'text' concatenate, otherwise just set the attrs.

const arrayOfObj = [ { "type": "text", "text": "=" }, { "type": "text", "text": " " }, { "type": "text", "text": "S" }, { "type": "text", "text": "O" }, { "type": "notText", "attrs": { "id": 20, "data": "Something", } }, { "type": "someOtherType", "attrs": { "id": 35, "data": "Something else", } } ]
    
const result = Object.values(arrayOfObj.reduce((acc, { type, text, attrs }) => { 
    if (!acc[type]) acc[type] = { type };
    if (type === 'text') acc[type].text = (acc[type].text || '') + text;
    if (type !== 'text') acc[type].attrs = attrs;
    return acc;
}, {}));

console.log('Result:', result)

Costa · Accepted Answer · 2021-07-15 10:14:22Z

1

I am breaking the problem step by step, I would do this:

let arrayOfObj = [ { "type": "text", "text": "=" }, { "type": "text", "text": " " }, { "type": "text", "text": "S" }, { "type": "text", "text": "O" }, { "type": "notText", "attrs": { "id": 20, "data": "Something", } } ]
let completeString = "";

arrayOfObj.forEach(x => x.type == "text" ? completeString += x.text : "")
arrayOfObj = arrayOfObj.filter(x => x.type == "notText");
arrayOfObj.push({ "type": "text", "text": completeString })

console.log(arrayOfObj);

answered Jul 15, 2021 at 10:14

Costa

3,3942 gold badges17 silver badges22 bronze badges

Comments

pjpscriv · Accepted Answer · 2021-07-15 10:17:06Z

0

This is how I would do it. A similar idea to @R3tep &@ikhvjs's answers using reduce, only much less elegant.

const arrayOfObj = [ { type: "text", text: "=", }, { type: "text", text: " ", }, { type: "text", text: "S", }, { type: "text", text: "O", }, { type: "notText", attrs: { id: 20, data: "Something", }, }, ];

function combineTexts(arrayOfObj) { 
    let noTextArray = arrayOfObj.filter(i => i.type !== 'text');
    let allTexts = arrayOfObj.filter(i => i.type === 'text')
                             .map(i => i.text)
                             .reduce((a, b) => a + b, '');
    noTextArray.unshift({ type: 'text', text: allTexts });
    return noTextArray;
}

console.log(combineTexts(arrayOfObj))

edited Jul 15, 2021 at 10:17

answered Jul 15, 2021 at 10:06

pjpscriv

1,5501 gold badge17 silver badges35 bronze badges

Collectives™ on Stack Overflow

How to combine an array of objects depending on the key: value of each object?

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related