Adding to a nested array in angular

Question

I have a data object model like the following:

export class JournalEntries {
  id?: number;
  year?: string;
  month: string;
  link?: string;
  months?: any;
}

A sample data would be:

"journalentries": [
    { 
      "id": "2000001",
      "year": "2021", 
      "months": [
        {
          "year": "2021", 
          "month": "January", 
          "link": "Jan_Feb_2021"
        },
        {
          "year": "2021", 
          "month": "February",
          "link": "Jan_Feb_2021"
        },
         ...
        {
          "year": "2021", 
          "month": "December",
          "link": ""
        }
      ]
    },
    { 
      "id": "2000002",
      "year": "2020", 
      "months": [
        {
          "year": "2020", 
          "month": "January", 
          "link": "Jan_Feb_2020"
        },
        {
          "year": "2020", 
          "month": "February",
          "link": "Jan_Feb_2020"
        },
        ...
        {
          "year": "2020", 
          "month": "December",
          "link": "Dec_2020"
        }
      ]
    },
 ]

My problem is, I can't seem to add a new month data to the nested array in the appropriate year. So if I add 2021, May, and some_link in the text boxes in the HTML part, it doesnt add it to the nested array. it adds it to the Main array. Which makes sense because this is what I have in the saveJournals click event

  this.journals.unshift( //putting it on the journals array
    {
      year: this.selectedRowData.year,
      month: this.selectedRowData.month,
      link: this.selectedRowData.link
    }
  )

So I get why it's doing that. But the following is coming up with an error

  this.journals.months.unshift( //Same with this.journals[].months.unshift
    {
      year: this.selectedRowData.year,
      month: this.selectedRowData.month,
      link: this.selectedRowData.link
    }
  )

I understand this could be a combination of problems, but I'm hoping someone knows the solution even with the vague data.

My expected goal is, if year already exist, add (year, month, link) to its months array else create year with new months array. Shooot! I'd be happy if you can help me with the unshift part only!

Well, you really should type months to be { year: string, month: string, link: string }[] rather than any, but I digress. What we need to know is how does this.journals match up with journalentries in your data? Perhaps you could help by putting together a minimal reproducible example using Stack Snippets (icon is <> in the toolbar)? — Heretic Monkey
– Heretic Monkey, Commented Jun 29, 2021 at 19:10
I tried. There are some many dependencies and moving parts. But I can try. The model and data match is in my OP. I can manage the delete and edit. But I can't add for the life of me — LOTUSMS
– LOTUSMS, Commented Jun 29, 2021 at 19:14
Note the "minimal" part there; for this question, you probably don't need Angular, for instance. — Heretic Monkey
– Heretic Monkey, Commented Jun 29, 2021 at 19:18
@MarikIshtar Property 'months' does not exist on type 'JournalEntries[]'. But if I add [0] as you suggested it spushes it to the first array only. So the data transfer and model is working. It's the array handling that I am not figuring out — LOTUSMS
– LOTUSMS, Commented Jun 29, 2021 at 19:36

daddygames · Accepted Answer · 2021-06-29 19:47:44Z

1

In this solution, I loop through the journal entries until I find the year I am looking for, then I modify the existing entry using unshift to prepend the selected month and link.

const journalentries = [
  { 
    "id": "2000001",
    "year": "2021", 
    "months": [
      {
        "year": "2021", 
        "month": "January", 
        "link": "Jan_Feb_2021"
      },
      {
        "year": "2021", 
        "month": "February",
        "link": "Jan_Feb_2021"
      },
      {
        "year": "2021", 
        "month": "December",
        "link": ""
      }
    ]
  },
  { 
    "id": "2000002",
    "year": "2020", 
    "months": [
      {
        "year": "2020", 
        "month": "January", 
        "link": "Jan_Feb_2020"
      },
      {
        "year": "2020", 
        "month": "February",
        "link": "Jan_Feb_2020"
      },
      {
        "year": "2020", 
        "month": "December",
        "link": "Dec_2020"
      }
    ]
  },
];

const selectedYear = '2021';
const selectedMonth = 'May';
const selectedLink = 'May_Aug_2021';
journalentries.forEach(entry => {
  if (entry.year==selectedYear) {
    entry.months.unshift({
      year: selectedYear,
      month: selectedMonth,
      link: selectedLink
    });
  }
});
console.log(journalentries);

answered Jun 29, 2021 at 19:47

daddygames

1,9381 gold badge12 silver badges19 bronze badges

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

1 Comment

LOTUSMS Over a year ago

BOOYAHHH!!!! You nailed it! Now I just have to create the year if it doesn't exist hahaha. Buy yourself a beer on me!

Marik Ishtar · Accepted Answer · 2021-06-29 19:15:57Z

1

Check this, I hope it helps you somehow:

const journalentries = [
    { 
      "id": "2000001",
      "year": "2021", 
      "months": [
        {
          "year": "2021", 
          "month": "January", 
          "link": "Jan_Feb_2021"
        },
        {
          "year": "2021", 
          "month": "February",
          "link": "Jan_Feb_2021"
        },
        {
          "year": "2021", 
          "month": "December",
          "link": ""
        }
      ]
    },
    { 
      "id": "2000002",
      "year": "2020", 
      "months": [
        {
          "year": "2020", 
          "month": "January", 
          "link": "Jan_Feb_2020"
        },
        {
          "year": "2020", 
          "month": "February",
          "link": "Jan_Feb_2020"
        },
        {
          "year": "2020", 
          "month": "December",
          "link": "Dec_2020"
        }
      ]
    },
 ]
 
 journalentries[0].months.unshift({
          "year": "2077", 
          "month": "December",
          "link": "Dec_2077"
        })
        
console.log("journalentries >> ", journalentries)

answered Jun 29, 2021 at 19:15

Marik Ishtar

3,0691 gold badge17 silver badges29 bronze badges

3 Comments

daddygames Over a year ago

The OP wants to be able to add to any year. Your code will only add to the first year in the array of journalEntries.

LOTUSMS Over a year ago

As daddygames said, this works to the first year only, though it is not entriely bad because these are journals that get added every month and hardly ever get added to prior years, but it could happen.

LOTUSMS Over a year ago

What would be swell is if somehow the array position could be dynamic to recognize which year I want to unshift it to.

Collectives™ on Stack Overflow

Adding to a nested array in angular

2 Answers 2

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related