Javascript Nested Array Issue

Question

I am receiving API JSON data in the following format and am trying to modify it so that it is grouped first by the start_date and then by the phys_id. We are trying to display each date that appointments are available and then show each provider's availability.

"Today"
      Provider Name #1
             2:20pm
             2:40pm
      Provider Name #2
             1:00pm
             2:40pm
"Tomorrow"
      Provider Name #1
             3:20pm
             4:40pm
      Provider Name #2
             12:00pm
             1:40pm

Here is how it is being received:

results: [
  {
    start_date: "20191119",
    begintime: "1220",
    appResourceId: "DAD6C44B-3CAC-4BDA-A485-F4BB033FA928",
    appLocationId: "14A1B866-8393-4510-8144-A45B5C4FD07D",
    phys_id: "035B4177-EF4C-492F-86C8-7157B034DB4A"
  },
  {
    start_date: "20191119",
    begintime: "1400",
    appResourceId: "DAD6C44B-3CAC-4BDA-A485-F4BB033FA928",
    appLocationId: "14A1B866-8393-4510-8144-A45B5C4FD07D",
    phys_id: "035B4177-EF4C-492F-86C8-7157B034DB4A"
  },
  {
    start_date: "20191119",
    begintime: "1420",
    appResourceId: "DAD6C44B-3CAC-4BDA-A485-F4BB033FA928",
    appLocationId: "14A1B866-8393-4510-8144-A45B5C4FD07D",
    phys_id: "1ACE5431-2771-40C6-B438-DC8E05701600"
  },
  {
    start_date: "20191119",
    begintime: "1420",
    appResourceId: "DAD6C44B-3CAC-4BDA-A485-F4BB033FA928",
    appLocationId: "14A1B866-8393-4510-8144-A45B5C4FD07D",
    phys_id: "035B4177-EF4C-492F-86C8-7157B034DB4A"
  },
  {
    start_date: "20191120",
    begintime: "1440",
    appResourceId: "DAD6C44B-3CAC-4BDA-A485-F4BB033FA928",
    appLocationId: "14A1B866-8393-4510-8144-A45B5C4FD07D",
    phys_id: "035B4177-EF4C-492F-86C8-7157B034DB4A"
  },
  {
    start_date: "20191120",
    begintime: "1600",
    appResourceId: "DB37F253-BA17-4672-8A81-B27388EE57DF",
    appLocationId: "14A1B866-8393-4510-8144-A45B5C4FD07D",
    phys_id: "1ACE5431-2771-40C6-B438-DC8E05701600"
  },
  {
    start_date: "20191120",
    begintime: "1640",
    appResourceId: "DB37F253-BA17-4672-8A81-B27388EE57DF",
    appLocationId: "14A1B866-8393-4510-8144-A45B5C4FD07D",
    phys_id: "1ACE5431-2771-40C6-B438-DC8E05701600"
  }
]

I am using the following code to get it grouped by start_date:

  let group = this.results.reduce((r, a) => {
        r[a.start_date] = [...(r[a.start_date] || []), a];
        return r;
      }, {});
      return group;

which then gets me closer:

{
  "20191119": [
    {
      "start_date": "20191119",
      "begintime": "1220",
      "appResourceId": "DAD6C44B-3CAC-4BDA-A485-F4BB033FA928",
      "appLocationId": "14A1B866-8393-4510-8144-A45B5C4FD07D",
      "phys_id": "035B4177-EF4C-492F-86C8-7157B034DB4A"
    },
    {
      "start_date": "20191119",
      "begintime": "1400",
      "appResourceId": "DAD6C44B-3CAC-4BDA-A485-F4BB033FA928",
      "appLocationId": "14A1B866-8393-4510-8144-A45B5C4FD07D",
      "phys_id": "035B4177-EF4C-492F-86C8-7157B034DB4A"
    },
    {
      "start_date": "20191119",
      "begintime": "1420",
      "appResourceId": "DAD6C44B-3CAC-4BDA-A485-F4BB033FA928",
      "appLocationId": "14A1B866-8393-4510-8144-A45B5C4FD07D",
      "phys_id": "1ACE5431-2771-40C6-B438-DC8E05701600"
    },
    {
      "start_date": "20191119",
      "begintime": "1420",
      "appResourceId": "DAD6C44B-3CAC-4BDA-A485-F4BB033FA928",
      "appLocationId": "14A1B866-8393-4510-8144-A45B5C4FD07D",
      "phys_id": "035B4177-EF4C-492F-86C8-7157B034DB4A"
    }
  ],
  "20191120": [
    {
      "start_date": "20191120",
      "begintime": "1440",
      "appResourceId": "DAD6C44B-3CAC-4BDA-A485-F4BB033FA928",
      "appLocationId": "14A1B866-8393-4510-8144-A45B5C4FD07D",
      "phys_id": "035B4177-EF4C-492F-86C8-7157B034DB4A"
    },
    {
      "start_date": "20191120",
      "begintime": "1600",
      "appResourceId": "DB37F253-BA17-4672-8A81-B27388EE57DF",
      "appLocationId": "14A1B866-8393-4510-8144-A45B5C4FD07D",
      "phys_id": "1ACE5431-2771-40C6-B438-DC8E05701600"
    },
    {
      "start_date": "20191120",
      "begintime": "1640",
      "appResourceId": "DB37F253-BA17-4672-8A81-B27388EE57DF",
      "appLocationId": "14A1B866-8393-4510-8144-A45B5C4FD07D",
      "phys_id": "1ACE5431-2771-40C6-B438-DC8E05701600"
    }
  ]
}

Is there a way i can then get the nested array to be grouped by the phys_id so that each provider shows the available appointment times? Or am i going about this the wrong way?

It seems like you can do what you already did, but just one level deeper. Is there some problem with doing that? — James Kraus
– James Kraus, Commented Nov 15, 2019 at 0:09
Seems nice. Just loop over the final result and apply reduce on the children? The rule is pretty much the same — Thanh Trung
– Thanh Trung, Commented Nov 15, 2019 at 0:09
Thanks all for the replies, i tried to do the same thing again but received errors and i must admit that i am still learning. If you have any code examples i could look at that would be great. So far I think Sambor's answer is the simplest. — Tonatiuh Dansie
– Tonatiuh Dansie, Commented Nov 15, 2019 at 2:37

V. Sambor · Accepted Answer · 2019-11-15 00:28:57Z

In order to have it optimized I suggest to write in a single loop and use a plain object to stock the desired levels.

Here is my example:

var data = [
  {
    start_date: "20191119",
    begintime: "1220",
    appResourceId: "DAD6C44B-3CAC-4BDA-A485-F4BB033FA928",
    appLocationId: "14A1B866-8393-4510-8144-A45B5C4FD07D",
    phys_id: "035B4177-EF4C-492F-86C8-7157B034DB4A"
  },
  {
    start_date: "20191119",
    begintime: "1400",
    appResourceId: "DAD6C44B-3CAC-4BDA-A485-F4BB033FA928",
    appLocationId: "14A1B866-8393-4510-8144-A45B5C4FD07D",
    phys_id: "035B4177-EF4C-492F-86C8-7157B034DB4A"
  },
  {
    start_date: "20191119",
    begintime: "1420",
    appResourceId: "DAD6C44B-3CAC-4BDA-A485-F4BB033FA928",
    appLocationId: "14A1B866-8393-4510-8144-A45B5C4FD07D",
    phys_id: "1ACE5431-2771-40C6-B438-DC8E05701600"
  },
  {
    start_date: "20191119",
    begintime: "1420",
    appResourceId: "DAD6C44B-3CAC-4BDA-A485-F4BB033FA928",
    appLocationId: "14A1B866-8393-4510-8144-A45B5C4FD07D",
    phys_id: "035B4177-EF4C-492F-86C8-7157B034DB4A"
  },
  {
    start_date: "20191120",
    begintime: "1440",
    appResourceId: "DAD6C44B-3CAC-4BDA-A485-F4BB033FA928",
    appLocationId: "14A1B866-8393-4510-8144-A45B5C4FD07D",
    phys_id: "035B4177-EF4C-492F-86C8-7157B034DB4A"
  },
  {
    start_date: "20191120",
    begintime: "1600",
    appResourceId: "DB37F253-BA17-4672-8A81-B27388EE57DF",
    appLocationId: "14A1B866-8393-4510-8144-A45B5C4FD07D",
    phys_id: "1ACE5431-2771-40C6-B438-DC8E05701600"
  },
  {
    start_date: "20191120",
    begintime: "1640",
    appResourceId: "DB37F253-BA17-4672-8A81-B27388EE57DF",
    appLocationId: "14A1B866-8393-4510-8144-A45B5C4FD07D",
    phys_id: "1ACE5431-2771-40C6-B438-DC8E05701600"
  }
]


const group = {};

for (const datum of data) {
    const date = datum.start_date;
    const pId = datum.phys_id;

    if (!group[date]) {
        group[date] = {};
    }

    if (!group[date][pId]) {
        group[date][pId] = [];
    }

    group[date][pId].push(datum);
}


console.log(group);

Collectives™ on Stack Overflow

Javascript Nested Array Issue

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related