array.filter remove undefined value

I have two arrays. My first array is multidimensional. I am looping over the first array and checking if the index matches HeaderIndex value on an object in my second array. If so I am returning a new array with updated object. However I do not want my returned array to have any undefined values... I tried using array.filter

Here is my code below

const Array1 = [
  ['Alex', 'Boe', 'MeowWolf', 'pizza', 'pink', 'MeowWolf', 'corsair', 'coarse hair'],
  ['Arron', 'Coe', 'Kmart', 'tofu', 'purple', 'purr pull'],
  ['Jane', 'Doe', 'Sears', 'tacos', 'orange', 'Sears', 'see ears'],
  ['John', 'Eoe', 'YugiOh', 'blueberries', 'magenta'],
  ['Suzie', 'Boe', 'Toyota', 'steroids', 'blue']
]


const Array2 = [{
    header: 'First name',
    HeaderIndex: 0
  },
  {
    header: 'Last name',
    HeaderIndex: 1
  },
  {
    header: 'Company',
    HeaderIndex: 2
  },
  {
    header: 'Favorite food',
    HeaderIndex: 3
  },
  {
    header: 'Favorite color',
    HeaderIndex: 4
  },
]

const testResult = Array1.map(
  (arr) => arr.map(
    (string, index) => {
      if (Array2.filter(
          (obj) => obj.HeaderIndex === index)[0])
        return {
          "ChosenHeader": Array2.filter(
            (obj) => obj.HeaderIndex === index),
          "content": string
        }
    }))

console.log(testResult);

I am getting this result

0: (8) [{…}, {…}, {…}, {…}, {…}, undefined, undefined, undefined]
1: (6) [{…}, {…}, {…}, {…}, {…}, undefined]
2: (7) [{…}, {…}, {…}, {…}, {…}, undefined, undefined]
3: (5) [{…}, {…}, {…}, {…}, {…}]
4: (5) [{…}, {…}, {…}, {…}, {…}]

But I want something like this

0: (5) [{…}, {…}, {…}, {…}, {…}]
1: (5) [{…}, {…}, {…}, {…}, {…}]
2: (5) [{…}, {…}, {…}, {…}, {…}]
3: (5) [{…}, {…}, {…}, {…}, {…}]
4: (5) [{…}, {…}, {…}, {…}, {…}]

Via Active questions tagged javascript - Stack Overflow https://ift.tt/2FdjaAW