Merging Two Arrays using Typescript or JavaScript

Question

I am struggling to merge two arrays as one. I created and get data from MongoDB using an interface.

export interface IWeeklyAssessmentData {
  dayName: string;
  dayDate: string;
  fromDb: boolean;
}

Below is the sample data from the database

[
  { dayName: 'Sun', dayDate: datetime.datetime(2023, 1, 8, 0, 0), fromDb: 'true' },
  { dayName: 'Tue', dayDate: datetime.datetime(2023, 1, 10, 0, 0), fromDb: True }
];

I have an array of information not coming from the database in the data and computed section of the code. Here is the code snippet

data: () => ({
   weekDays: [
      {
        dayName: "Sun",
        dayDate: new Date(
          new Date().setDate(new Date().getDate() - new Date().getDay() + 0)
        )
          .toISOString()
          .slice(0, 10),
        fromDb: false,
      },
      {
        dayName: "Mon",
        dayDate: new Date(
          new Date().setDate(new Date().getDate() - new Date().getDay() + 1)
        )
          .toISOString()
          .slice(0, 10),
        fromDb: false,
      }
   ]
}),
computed: {
   weeklyAssessmentData(): IWeeklyAssessmentData {
      return TrainWiseService.weeklyAssessment;
   },
}

How do I merge the array from weeklyAssessmentData and weekDays. I want to retain the object from database if the dayName is the same. All the codes I have seen and tried seems to work.

In my computed, I have tried using this code to merge it but it gave error:

Property 'weeklyAssessmentData' does not exist on type 'CombinedVueInstance<Vue

RelatedDays() {
   let dayNames = new Set(this.weeklyAssessmentData.map(dayName => dayName.assessmentDayName))

   let merged = [...this.weekDays, ...this.weekDays.filter(d => dayNames.has(d.assessmentDayName))]
   return merged;
 },

Here is the final output I am expecting from the two arrays:

merged: [
  { dayName: 'Sun', dayDate: '2023-01-08T00:00:00.000+00:00', fromDb: 'true' },
  { dayName: 'Mon', dayDate: '2023-01-09T00:00:00.000+00:00', fromDb: 'false' },
  { dayName: 'Tue', dayDate: '2023-01-10T00:00:00.000+00:00', fromDb: 'true' }
]

can you provide sample data for what TrainWiseService.weeklyAssessment is returning? also, is RelatedDays a method on the component? where and how is it being called? — yoduh
– yoduh, Commented Jan 9, 2023 at 21:32

Alvaro Flaño Larrondo · Accepted Answer · 2023-01-09 21:53:30Z

1

You could iterate over the collection of all records and omit the records that are already in the result (based on te day name) if they do not come from the database.

If I understood correctly your problem, here is a simplified version of it:

const recordsNotFromDB = [{
    day: "Mon",
    val: 1,
    database: false
  },
  {
    day: "Tue",
    val: 2,
    database: false
  },
  {
    day: "Wed",
    val: 3,
    database: false
  },
]

const recordsFromDB = [{
    day: "Mon",
    val: 10,
    database: true
  },
  {
    day: "Wed",
    val: 30,
    database: true
  },
]

const merged = {}

for (let record of [...recordsNotFromDB, ...recordsFromDB]) {
  if (!(record.day in merged) || record.database) {
    merged[record.day] = record
  }
}

const result = Object.values(merged)

console.log(result)

answered Jan 9, 2023 at 21:53

Alvaro Flaño Larrondo

5,7402 gold badges31 silver badges50 bronze badges

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

1 Comment

donsonde Over a year ago

Thank you, Alvaro, for your quick response. Your simplified version gave me the push I needed.

Collectives™ on Stack Overflow

Merging Two Arrays using Typescript or JavaScript

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related