CODEWITHSUNDEEP
javascriptreactjs
bigdawwg
bigdawwg

Reputation: 25

combine arrays of json using javascript depending on date

Hi I am making a react site.

I have two arrays of Json objects this data looks like this.

(These all have value but I have hidden all these apart from data for this example)

alertId: ""
categoryId: ""
countries: null
countryId: ""
createdBy: " "
createdDate: "2020-10-12T04:02:21.553Z"
customerId: " "
customerName: "Solace DEMO"
deletedBy: null
deletedDate: null
description: ""
endDate: "2020-10-17T11:02:05.697"
firstname: "Demo"
latitude: ""
longitude: ""
riskId: ""
smsEnabled: true
sourceId: ""
startDate: "2020-10-14T11:02:05.697"
surname: "Traveller 16"
title: "Check In"
travellerTagId: null

And the next looks like


alertId: " "
categoryId: " "
countries: null
countryId: " "
createdBy: " "
createdDate: "2020-10-16T09:12:20.957Z"
customerId: null
customerName: " "
deletedBy: null
deletedDate: null
description: "Images released on social media  ."
email: null
endDate: "2020-10-17T10:06:31.81"
firstname: null
formattedAddress: ""
homeCountryId: null
isDeleted: false
itemId: null
keywordMatches: null
keywordsMatched: 0
latitude: 13.7462
link: null
longitude: 100.531
notes: "Avoid ."
phone: null
riskId: "6 "
smsEnabled: true
sourceId: " "
startDate: "2020-10-16T10:06:31.81"
surname: null
title: "Update: Protesters gather "
travellerTagId: null

So both are already very similar.

Essentially I have two pages each .map with a separate array e.g

So I have this on one component


    const rendertravelAlerts = this.props.travelAlerts.map((todo, index) => {
      return (
        <li key={index}>
          <div>
            travel Title {todo.title}
            <li>t ID {todo.id}</li>
            <li>t Id {todo.userId}</li>
          </div>
        </li>
      );
    });

and this on the other

  const renderTodos = currentTodos.map((todo, index) => {
      return (
        <li key={index}>
          <div>
            intel Title {todo.title}
            <li>Tintel ID {todo.id}</li>
            <li>intel ID {todo.userId}</li>
          </div>
        </li>
      );
    });

Now I am making a third component which will display both of these type's of alerts.

I have achieved this by passing the props of both arrays down to this component and then .mapping these as I did before.

The issue I have is because there is one .map and then the other the items are not mixed which is what I would like.

Ideally I would be able to mix both of these arrays based on date and then use a single.map to display these. But I am at a loss of how to do this.

Upvotes: 0

Views: 101

Answers (1)

Ahmad MOUSSA
Ahmad MOUSSA

Reputation: 2906

As I understand, you have two arrays: array_1 & array_2, and you want to merge them and then sort the result by date.

If so, to merge them, you can use the .concat() method:

array_1.concat(array_2);// this will return a new array containing all elements for both array_1 & array_2

NOTE: If you want to megre arrays without duplicates, you can do:

[...array_1, ...array_2]

Then, supposing that array_1.concat(array_2) will lead to a new array: array_3, to sort items of array_3, you can use the .sort() method:

array_3.sort((a, b) => {
    return new Date(a.startDate) - new Date(b.startDate)
  });

To simplify, you can do:

array_1.concat(array_2).sort((a, b) => {
    return new Date(a.startDate) - new Date(b.startDate)
  });

Upvotes: 1

Related Questions