CODEWITHSUNDEEP
javascriptarrays
Tonatiuh Dansie
Tonatiuh Dansie

Reputation: 33

Javascript Nested Array Issue

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?

Upvotes: 3

Views: 73

Answers (1)

V. Sambor
V. Sambor

Reputation: 13369

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);

Upvotes: 3

Related Questions