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.

CodePudding user response：

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};
        }
    }
}

CodePudding user response：

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 };
});

CodePudding user response：

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