I’ve got a working component which receives a list of employees from an API and displays them on a page. I want to add an additional functionality where the administrator will be able to choose the order in which the employees are displayed. (“Display order” in the API response) Therefore, I need to access the value of this before doing anything. Then,I need to reorder the employees so that the employees with a “Display order” value are placed before the other employees who have a null value.

I’m just a hobbyist and this is proving quite difficult. I’m basically getting nowhere with this. I’ve read about how to sort and so on, but it seems that adding to this code I have isn’t working. How should I go about making additional modifications to my this.employees object?

Example of API response:

{
  id: 200779, 
  first_name: "Sample", 
  last_name: "Name", 
  include_as_teacher: "1",
  subjects: "Math, Science",
  status: "Active",
  custom_fields: [
    {
      field_id: 17363, 
      name: "Custom field 1", 
      value: "something"
    }
    {
      field_id: 17940, 
      name: "Custom field 2", value: 
      "something"
      }
    {
      field_id: 18262, 
      name: "Display order", 
      value: "1"
    }
  ]
}

My vue code:

  mounted() {

    fetch("api url", requestOptions)
      .then(response => response.json())
      .then(response => console.log(response))
      .then(response => response.filter((e) => e.include_as_teacher = 1 && e.subjects != null && e.status == "Active"))
      .then(
        (response) =>
          (this.employees = this.cloneEmployees = response.map((e) => ({
            id: e.id,
            first_name: e.first_name,
            last_name: e.last_name,
            subjects: e.subjects.split(","),
            // order: e.custom_fields???.value
          }))))
          .then((response) => this.subjects = [...new Set(this.cloneEmployees.flatMap(item => item.subjects))].sort())
         
    },