Sorting by alphabetical order using Vue.js and Axios

I am currently in need of assistance with filtering my data based on brand name and then further refining the results by alphabetical order using the "product.name" property. Provided below are the axios functions I am using for this task.

export default {
  data() {
    return {
      filteredProducts: []
    };
  },
  mounted() {
 axios
 .get('/src/stores/sneakers.json')
 .then(response => (this.filteredProducts = response.data))
  },

  computed: {
    resultCount () {
            return Object.keys(this.filteredList).length
        },
    filteredList(){
            return this.filteredProducts.filter(product => 
            product.brand.includes(this.brand?.name)
      )
        }
    },

Any help or guidance you can provide would be greatly appreciated.

Answer №1

To organize the array of objects by the name property, you can utilize the sort method.

this.filteredProducts.sort((a, b) => {
  if (a.name < b.name) {
    return -1;
  }
  if (a.name > b.name) {
    return 1;
  }
  return 0;
});

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Empty input fields in Javascript calculations will result in a NaN output

I need to perform a calculation using values entered into form fields and JavaScript. The formula I'll be using is as follows: totalEarnings = income1 + income2 * 0.7 + income3 / 48 + (income4 * 0.7) / 48; The variables income1, income2, income3, an ...

NodeJs encountered an issue due to the absence of defined username and data

I am facing an issue while trying to open the places.ejs file by clicking the submit button on the show.js page. Similar to how the show.ejs page opens upon clicking the submit button on the new.ejs file, I am encountering a reference error. Any assistance ...

Utilizing Unidirectional Binding within an AngularJS Directive

I have a directive set up here: myApp.directive('stoplight', function() { return { restrict:'E', transclude: true, scope: { value: '@' }, link: function(scope, element) ...

Building an HTML table dynamically with JavaScript

Can anyone help me figure out why my JavaScript code isn't populating the HTML body table as expected? var shepard = { name: "Commander", victories: 3, ties: 1, defeats: 6, points: 0 }; var lara = { name: "RaiderOfTombs", victories: ...

How can I verify an element's attribute while employing Event Delegation?

Is there a method to determine if a particular element has been activated using Event Delegation, based on its attribute, class, or ID? <ul> <li><button>Make the first paragraph appear</button></li> <li><butto ...

The name of the component "Posts" must always consist of multiple words in Vue, adhere to multi-word component naming conventions

import Vue from 'vue' import VueRouter from 'vue-router' import Posts from './views/Posts' //Make sure to call Vue.use(Router) after importing Vue and Router. Vue.use(VueRouter) export default new VueRouter({ //By defaul ...

Restart the _.after function counter

Despite my efforts to search online, I couldn't find a solution for resetting the _.after counter once the code inside has been executed. The goal here is to have the alert box appear only on every 5th click of the button: var cb; cb = _.after(4, fu ...

Generating HTML tables with charts using FireFox

I am encountering an issue: My table contains charts and tables that are displayed correctly in browsers. However, when I attempt to print it (as a PDF) in Mozilla Firefox, the third speedometer gets cut off, showing only 2.5 speedometers. Using the "s ...

Adding the "input-invalid" class to the input doesn't take effect until I click outside of the input field

When the zipcode field is updated, an ajax call is made. If there are no zipcodes available, I want to mark it as invalid by adding the "input-invalid" class. However, the red border validation only appears when clicking outside of the input field. Is ther ...

What does dist entail?

I am currently utilizing gulp to create a distribution folder (dist) for my Angular application. After consolidating all the controllers/services JS files and CSS, I am now faced with handling the contents of the bower folder. In an attempt to concatenat ...

Present the value of an object within an array in an HTML format

I have organized an array containing information about different video games: let games = [{ title: 'Fortnite', price: 20, img: "./assets/images/Fortnite.jpg" }, { title: 'Valorant', price: 0, img: "./asse ...

I have noticed that the baseline of a Span element has shifted after updating my Chrome browser to a version that begins with

Once I updated to chrome Version 108.0.5359.94 (Official Build) (64-bit) from 107.0.5304.87 (Official Build) (64-bit), the behavior of the span element changed drastically. It shifted its baseline when multiple spans were stacked on top of each other. Exp ...

Encountering a problem with the persistent JavaScript script

I have implemented a plugin/code from on my website: Upon visiting my website and scrolling down, you will notice that the right hand sidebar also scrolls seamlessly. However, when at the top of the screen, clicking on any links becomes impossible unless ...

Displaying form after Ajax submission

I have implemented an AJAX code to submit my form, but I am facing an issue where the form disappears after submission. Here is my current code: <script> $('#reg-form').submit(function(e){ e.preventDefault(); // Prevent Default Submissi ...

Store the beginning and ending times in a MySQL database using Sequelize and Node.js

I am currently developing a project management application where I need to keep track of the start and stop time for user work. To achieve this, I have implemented two buttons in the UI - START and STOP. When a user clicks the START button, the following ...

Ensure that every HTML link consistently triggers the Complete Action With prompt on Android devices

After extensive searching, I have yet to find a solution to my issue. I have been developing a web application that allows users to play video files, primarily in the mp4 format. Depending on the mobile browser being used, when clicking the link, the vide ...

Validation of md-datepicker and md-select in Angular MaterialAnguar Material validation

I am working on a form that includes input fields, datepickers, and dropdowns. Currently, if the required input fields are left blank upon submission, they are highlighted with a red line. However, I want the datepickers and dropdowns to also be highlighte ...

Steps to resolve the error "Cannot POST /index.html" in Nginx, Express, and NodeJS

While setting up my MERN project on the production server, I encountered an issue. In order to manually type in URLs (like myproject.com/dashboard), I added the line try_files $uri /index.html; to the server section of my Nginx configuration file as recomm ...

What is the process for linking to a backend on a distinct port in Next.js?

I am working on a project with Next.js and I am facing a challenge in connecting to a backend server that is running on a different port. The frontend of my application is on port 3000, while the backend is on port 8000. My goal is to interact with the bac ...

Is there a way to display a Google Map marker after a certain amount of time without needing to refresh the

Is it possible to update Google Map markers without refreshing the map itself every 30 seconds? The markers' latitudes and longitudes are retrieved from a database. Once obtained, these markers are then allocated onto the Google Map. However, the i ...