Add only unique items in a VUE.js v-for loop

Question

I'm pulling a JSON formatted object from a Web API. The items are NIH funding grants and when pulled give a history of each Grant for a particular researcher. I'm only looking to render the max award_notice_date for each separate project_serial_num. I have the elements in descending order so if I do a v-for loop they are all rendered in descending order. So far so good. My question is how I can post only the first one of each of the project_serial_num's so I end up with the information from appl_id 10372234 and 10226173? Trying to filter by using dates does not help because a date may have expired but if it's the first one of that project_serial_num then it needs to be displayed

             [{
        "appl_id": 10372234,
        "subproject_id": null,
        "fiscal_year": 2022,
        "project_num": "5R01CA261232-02",
        "project_serial_num": "CA261232",
        "award_notice_date": "2022-03-02T12:03:00Z"
    },
    {
        "appl_id": 10226173,
        "subproject_id": null,
        "fiscal_year": 2021,
        "project_num": "5K07CA214839-05",
        "project_serial_num": "CA214839",
        "award_notice_date": "2021-08-05T12:08:00Z"
    },
    {
        "appl_id": 10253554,
        "subproject_id": null,
        "fiscal_year": 2021,
        "project_num": "1R01CA261232-01",
        "project_serial_num": "CA261232",
        "award_notice_date": "2021-03-15T12:03:00Z"
    },
    {
        "appl_id": 9989810,
        "subproject_id": null,
        "fiscal_year": 2020,
        "project_num": "5K07CA214839-04",
        "project_serial_num": "CA214839",
        "award_notice_date": "2020-07-30T12:07:00Z"

    }
]

Jess · Accepted Answer · 2022-09-02 17:15:51Z

1

I used this answer from another question to build this:

YOUR_ARRAY.filter((value, index, self) => self.findIndex(v => v.project_serial_num === value.project_serial_num) === index);

This will return a new array where the objects sharing a project_serial_num are removed, which can be passed directly to v-for, without the need to make a new variable/computed property.

edited Sep 2, 2022 at 17:15

answered Sep 2, 2022 at 17:12

Jess

1875 bronze badges

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

Comments

IVO GELOV · Accepted Answer · 2022-09-02 17:11:12Z

1

You should create a computed property that will use a Map to store the values - but before adding a value to the Map you will first check whether it is already there and eventually skip the duplicates. Something like this

computed:
{
  uniqueProjects()
  {
    const result = {};
    this.apiResult.forEach(project =>
    {
      if (!result[project.project_serial_num])
      {
        result[project.project_serial_num] = project;
      }
    });
    return Object.values(result); // we rely on the browser to return values in the order they have been added
  }
}

answered Sep 2, 2022 at 17:11

IVO GELOV

14.3k1 gold badge21 silver badges30 bronze badges

Collectives™ on Stack Overflow

Add only unique items in a VUE.js v-for loop

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related