0

I want to list the data one by one in a side panel based on the time it was updated /created and the type of data in type field. Based on its type it should be appended with a svg related to that type in a list.

What I am trying to do?

I have the data as an array of objects as below.

[
    {
        "attributes": {
            "image_id": 8,
            "recipient": {
                "email": "someone@example.com",
                "id": 21
            },
            "share_id": 68
        },
        "id": 50,
        "timestamp": "2019-04-03T21:00:00+00:00",
        "type": "image_share_expired"
    },
    {
        "attributes": {
            "after": {
                "description": "Add description.",
                "imagename": "changed",
            },
            "before": {
                "description": "",
                "imagename": "sphere",
            },
            "image_id": 1
        },
        "id": 54,
        "timestamp": "2019-04-03T09:24:27.179190+00:00",
        "type": "settings_updated"
    },
    {
        "attributes": {
            "after": {
                "description": "",
                "imagename": "somename",
            },
            "before": {
                "description": "",
                "imagename": "noname",
            },
            "image_id": 1
        },
        "id": 53,
        "timestamp": "2019-04-03T08:54:06.721557+00:00",
        "type": "settings_updated"
    },
    {
        "attributes": {
            "after": {
                "expires": "2019-04-03T21:00:00+00:00"
            },
            "before": {
                "expires": null
            },
            "image_id": 8,
            "share_id": 68
        },
        "id": 52,
        "timestamp": "2019-04-03T04:54:56.227415+00:00",
        "type": "share_updated"
    },
]

So I have three types of data to filter image_share_updated, image_share_expired, image_share_updated....

All of these data should list first in the order of timestamp field...the recent ones should be first in the list and then should filter based on type field.

If type field is image_share_expired it should be appended with the svg_share_expired (some svg which is not given here in the question) followed by text "share has been expired for {image_name} variable. also from this image_name is got from image_id which is another array of objects containing images with image_names and image_id.

If type field is image_share_updated it should be appended with the svg_share_updated and some text for it.. and so on....

How can I first sort the array of objects based on recent time (timestamp field), store it in a variable and then filter the data based on type field and show them to the user in a list using reactjs.

Could someone help me with this?

Bob Dalgleish
  • 7,724
  • 3
  • 29
  • 39
  • 1
    Welcome to Stack Overflow nani! What have you tried so far? Please include any attempts in your question and detail what goes wrong. – Tholle Apr 05 '19 at 14:16
  • hi i dont know where to start with...i want to first sort the data based on recent timestamp and then from the resulting array want to display each object based on type field. i know that i have to use some sort.array method to sort but not sure to get it right. thanks. –  Apr 05 '19 at 14:55
  • I corrected some of the spelling and grammar errors, and removed the greetings and thanks. – Bob Dalgleish Apr 05 '19 at 22:23
  • Please share the component you are working with that receives this array. – BugsArePeopleToo Apr 05 '19 at 22:29
  • Here are some links to get you started: sorting by date -> https://stackoverflow.com/questions/10123953/sort-javascript-object-array-by-date/10124053 filtering an array -> https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter and rendering an array of objects in react -> https://stackoverflow.com/questions/32157286/rendering-react-components-from-array-of-objects – djfdev Apr 05 '19 at 22:30

0 Answers0