How to fill null/defined values for uneven array of objects

Question

I'm trying to iterate this block of code for displaying data in table. I want object arrays of equal length.

Hence, need to fill undefined values for respective keys to make array of objects uniform (same length)

Original Json

[
  {
    "toolName": "Alteryx",
    "contacts": [
      {
        "contactPerson": "James clear",
        "email": "[email protected]"
      },
      {
        "contactPerson": "Paul Unger",
        "email": "[email protected]"
      }
    ]
  },
  {
    "toolName": "Processes",
    "contacts": [
      {
        "contactPerson": "naomi Unger",
        "email": "[email protected]"
      }
    ]
  },
  {
    "toolName": "Alteryx Server",
    "contacts": [
      {
        "contactPerson": "Avinash",
        "email": "[email protected]"
      },
      {
        "contactPerson": "Sowmia",
        "email": "[email protected]"
      }
    ]
  }
]

Expectation json

[
  {
    "toolName": "Alteryx",
    "contacts": [
      {
        "contactPerson": "James clear",
        "email": "[email protected]"
      },
      {
        "contactPerson": "Paul Unger",
        "email": "[email protected]"
      }
    ]
  },
  {
    "toolName": "Processes",
    "contacts": [
      {
        "contactPerson": "naomi Unger",
        "email": "[email protected]"
      },
    {
        "contactPerson": null,
        "email": null
      }
    ]
  },
  {
    "toolName": "Alteryx Server",
    "contacts": [
      {
        "contactPerson": "Avinash",
        "email": "[email protected]"
      },
      {
        "contactPerson": "Sowmia",
        "email": "[email protected]"
      }
    ]
  }
]

Tried this, but not working

let max = 0;
  const masterArray = res?.data?.tools?.map((obj) => {
    obj.contacts.forEach((ele, ind) => {
      if(max <= ind){
                max = ind;
      }
      for(let i = 0 ; i< max; i++){
        if (ele !== undefined) return ele;
         return { ...ele,
           contactPerson: '',
           email: '',
         }
      }
    });
    
  });

How to fill null/undefined values to handle error.

My instinct is to leave the data the same and deal with this when rendering if possible. Easy to use some default value if you discover something missing. const contact = el.contacts[i] ?? {contactPerson: null, email: null}; — Trevor Dixon
– Trevor Dixon, Commented Nov 22, 2022 at 15:29

Trevor Dixon · Accepted Answer · 2022-11-22 15:23:48Z

1

Only need to get max once.

function fillMissingContacts(arr) {
    const max = arr.reduce((max, el) =>
        Math.max(max, el.contacts.length), 0);
    return arr.map(el => {
        const contacts = [...el.contacts];
        for (let i = contacts.length; i < max; i++) {
            contacts[i] = {contactPerson: null, email: null};
        }
        return {...el, contacts};
    });
}

Or to change in place.

function fillMissingContacts(arr) {
    const max = arr.reduce((max, el) =>
        Math.max(max, el.contacts.length), 0);
    for (const el of arr) {
        for (let i = el.contacts.length; i < max; i++) {
            el.contacts[i] = {contactPerson: null, email: null};
        }
    }
}

answered Nov 22, 2022 at 15:23

Trevor Dixon

24.6k13 gold badges77 silver badges114 bronze badges

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

Comments

Tim Nimets · Accepted Answer · 2022-11-22 15:31:03Z

Your code does not seem to do what you described in your question. If you do some modifications to it to look like this:

const array = res?.data?.tools;
// Finding max count of contacts
const max = array ? Math.max(...array.map?.(obj => obj.contacts.length)) : 0;
// Filling master array
const masterArray = (array || []).map(obj => {
  const emptyContact = () => ({ contactPerson: null, email: null });
  // creating contact array; max - contacts.length is the lengths of missing contacts; emptyContact will be called that many times
  const contacts = [ ...obj.contacts, ...Array.from({ length: max - obj.contacts.length }, emptyContact)];
  // Creating new object with new contacts, so we do not overwrite the original
  return { ...obj, contacts };
});

Moussa Bistami · Accepted Answer · 2022-11-22 15:17:17Z

0

var s = [
  {
    "toolName": "Alteryx",
    "contacts": [
      {
        "contactPerson": "James clear",
        "email": "[email protected]"
      },
      {
        "contactPerson": "Paul Unger",
        "email": "[email protected]"
      }
    ]
  },
  {
    "toolName": "Processes",
    "contacts": [
      {
        "contactPerson": "naomi Unger",
        "email": "[email protected]"
      },
    {
        "contactPerson": null,
        "email": null
      }
    ]
  },
  {
    "toolName": "Alteryx Server",
    "contacts": [
      {
        "contactPerson": "Avinash",
        "email": "[email protected]"
      },
      {
        "contactPerson": "Sowmia",
        "email": "[email protected]"
      }
    ]
  }
]
const handleNullContacts = (obj) => {
obj.map(e=>e?.contacts.map(contact=>{
  if (!contact?.contactPerson)
    contact["contactPerson"] = '';
  if (!contact?.email)
    contact["email"] = ''
  }))
  return obj;
}

s = handleNullContacts(s)
console.log(s)

I'm using map to iterate through the array then another map to iterate through the contacts whenever i find contacts field undefined||null replace with empty string ''
PS: if I missundertood please let me know so I can update the answer

answered Nov 22, 2022 at 15:17

Moussa Bistami

1,1078 silver badges17 bronze badges

1 Comment

Manny_s Over a year ago

Thanks for answering. Code Block is original code. I want as expectation. If any object is not of same length. then fill that object with null values

Collectives™ on Stack Overflow

How to fill null/defined values for uneven array of objects

Tried this, but not working

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Tried this, but not working

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related