Applying VueJS filters to refine object values

Question

Applying VueJS filters to refine object values

Is there a way to verify if the value of "startAt" is present in an object and return its corresponding ID?

Here is the object in question:

[{
  "id": "1234567",
  "createTimestamp": "2020",
  "name": {
    "action": "",
    "allDay": false,
    "category": "Misc",
    "startAt": "05",
    "title": "foo"
  },
  "updateTimestamp": "2020"
}]

Below is my progress so far. The filtering works, but I'm struggling to access and return the ID.

<div v-for="(hour, i) in 24" :key="i">
  {{ filterByHour(hour) }}
</div>

filterByHour(id) {
  if (id < 10) {
    id = 0 + id
  }

  const result = this.events.filter(item => item.name.startAt === id.toString())
  return result
}

Any suggestions on how to successfully return the ID of the object?

javascript arrays vue.js object vuejs2

Answer 1

Answer №1

The issue arises in the line id = 0 + id where id is evaluated as 5 instead of 05 when id equals 5. To resolve this, update it to id = '0' + id to ensure conversion to a string.
Following the filter operation, utilize the map function to extract the id.

const events = [
  {
    id: "1234567",
    createTimestamp: "2020",
    name: {
      action: "",
      allDay: false,
      category: "Misc",
      startAt: "05",
      title: "foo"
    },
    updateTimestamp: "2020"
  }
];

function filterByHour(id) {
  if (id < 10) {
    id = "0" + id;
  }

  const result = events
    .filter(item => item.name.startAt === String(id))
    .map(x => x.id);
  return result;
}

console.log(filterByHour(5));
console.log(filterByHour(11));
console.log(filterByHour());

Answer 2

The issue arises in the line id = 0 + id where id is evaluated as 5 instead of 05 when id equals 5. To resolve this, update it to id = '0' + id to ensure conversion to a string.
Following the filter operation, utilize the map function to extract the id.

const events = [
  {
    id: "1234567",
    createTimestamp: "2020",
    name: {
      action: "",
      allDay: false,
      category: "Misc",
      startAt: "05",
      title: "foo"
    },
    updateTimestamp: "2020"
  }
];

function filterByHour(id) {
  if (id < 10) {
    id = "0" + id;
  }

  const result = events
    .filter(item => item.name.startAt === String(id))
    .map(x => x.id);
  return result;
}

console.log(filterByHour(5));
console.log(filterByHour(11));
console.log(filterByHour());

Applying VueJS filters to refine object values

Answer №1

Similar questions

trouble encountered when attempting to integrate typeahead functionality in AngularJS using jQuery

Ensured that the class located outside of the main element is being correctly managed

Show only particular elements from an array that satisfy specific conditions

Extract the value from JSON data

Live notification application using node.js

Trouble with 'this.function' and handling scope within my code

The best approach to incorporating interactive animation in next.js

Utilizing class references within a method

The art of creating an asynchronous function: A comprehensive guide

When the button is clicked, my goal is to increase the value of the text field by one using JavaScript

Exploring Highcharts Pie Chart with AJAX for Real-time Data Updates

The echo statement is failing to show any value following the ajax request

Error: Unable to register both views with identical name RNDateTimePicker due to Invariant Violation

Basic $http.get request including parameters

Ways to initiate a transition upon clicking a button, causing it to switch from being hidden (`display: none`) to visible (`display: block`)

You won't be able to view over 15 KML layers on a page that relies on Google Maps API

Stuffing a container with an image without considering the proportions

Error: The specified module is missing an export that was requested

Guide to setting up a default route that precedes all other routes in Express.js routing

Retrieving a page using jQuery