eliminate redundant values from an array while utilizing Laravel Eloquent relationship in Vue.js

Question

eliminate redundant values from an array while utilizing Laravel Eloquent relationship in Vue.js

I have a collection of documents in Laravel that includes objects due to eloquent relationships. The structure of the array is as follows:

Documents:

[
    {
        "id": 6,
        "name": "document",
        "supplier": {
            "id": 5,
            "name": "H.B.C",
        }
    },
    {
        "id": 5,
        "name": "document",
        "supplier": {
            "id": 5,
            "name": "H.B.C",
        }
    },
    {
        "id": 4,
        "name": "document",
        "supplier": {
            "id": 4,
            "name": "Avrora",
        }
    }
]

I am aiming to extract unique supplier names using lodash. In the example above, I would like to retrieve H.B.C and Avrora without duplicates.

This is my attempt:

CollectionSuppliers () {
    return uniq(this.Documents.supplier.map(({ name }) => name))
},

However, an error occurs:

Cannot read properties of undefined (reading 'map')

javascript vue.js lodash

Answer 1

Answer №1

Error alert: Trying to access properties of an undefined object, specifically 'map'

Essentially, the issue is that you are using the method map on something that is not defined. In this case, you are calling it on:

this.Documents.supplier

This implies that supplier does not exist as a property within this.Documents. Indeed, this is correct since this.Documents is an array of objects with a supplier, but the array itself does not have a supplier property.

Perhaps what you intended to do was:

return uniq(this.Documents.map(doc => doc.supplier.name))

With this modification, each document will be mapped to its supplier's name, and then uniq will be called on the resulting array of supplier names.

Answer 2

Error alert: Trying to access properties of an undefined object, specifically 'map'

Essentially, the issue is that you are using the method map on something that is not defined. In this case, you are calling it on:

this.Documents.supplier

This implies that supplier does not exist as a property within this.Documents. Indeed, this is correct since this.Documents is an array of objects with a supplier, but the array itself does not have a supplier property.

Perhaps what you intended to do was:

return uniq(this.Documents.map(doc => doc.supplier.name))

With this modification, each document will be mapped to its supplier's name, and then uniq will be called on the resulting array of supplier names.

Answer 3

Answer №2

When trying to access the supplier property on the this.Documents object, an error occurs because it does not exist.

this.Documents.supplier.map(({ name }) => name)

To fix this issue, you need to map over the entire this.Documents object instead of just the this.Documents.supplier:

CollectionSuppliers() {
  return uniq(this.Documents.map((o) => o.supplier.name));
}

Alternatively, you can also update the mapping function as follows:

CollectionSuppliers() {
  return uniq(this.Documents.map(({ supplier: { name } }) => name));
}

Please note: You can achieve the same result without using lodash by utilizing vanilla JavaScript:

const Documents = [
  {
    id: 6,
    name: "document",
    supplier: {
      id: 5,
      name: "H.B.C",
    },
  },
  {
    id: 5,
    name: "document",
    supplier: {
      id: 5,
      name: "H.B.C",
    },
  },
  {
    id: 4,
    name: "document",
    supplier: {
      id: 4,
      name: "Avrora",
    },
  },
];

const result = [...new Set(Documents.map((o) => o.supplier.name))];
console.log(result);

Answer 4

When trying to access the supplier property on the this.Documents object, an error occurs because it does not exist.

this.Documents.supplier.map(({ name }) => name)

To fix this issue, you need to map over the entire this.Documents object instead of just the this.Documents.supplier:

CollectionSuppliers() {
  return uniq(this.Documents.map((o) => o.supplier.name));
}

Alternatively, you can also update the mapping function as follows:

CollectionSuppliers() {
  return uniq(this.Documents.map(({ supplier: { name } }) => name));
}

Please note: You can achieve the same result without using lodash by utilizing vanilla JavaScript:

const Documents = [
  {
    id: 6,
    name: "document",
    supplier: {
      id: 5,
      name: "H.B.C",
    },
  },
  {
    id: 5,
    name: "document",
    supplier: {
      id: 5,
      name: "H.B.C",
    },
  },
  {
    id: 4,
    name: "document",
    supplier: {
      id: 4,
      name: "Avrora",
    },
  },
];

const result = [...new Set(Documents.map((o) => o.supplier.name))];
console.log(result);

eliminate redundant values from an array while utilizing Laravel Eloquent relationship in Vue.js

Answer №1

Answer №2

Similar questions

Transferring a JSON array from Google App Engine to Cloud Storage using GO

The pagination feature is malfunctioning and is displaying all elements on every page instead of correctly displaying a

There was an issue encountered while attempting to utilize orgchart: The property '_aZ' of null could not be read

Tips for assigning the initial value in a "useState" function to either true or false using the "useEffect" function in React

Web Page Content Scrambling/Character Exchange

Retrieve the corresponding value from the array based on the input value

What is the best way to incorporate Vue.js into a Django project?

Using a variety of images to fill various shapes on a grid canvas

visit a new page with each reload

Retrieving all options from a dropdown list in HTML using ASP.net C#

Validate whether the path parameter in NextJS is null or empty before executing the query

Resizing Bootstrap Modal using React with a Personalized Dimension

Problem with Angular: ng-show not constantly re-evaluating expression

What is the process for invoking a websocket from an HTML client?

Postprocessing with a basic shader in Three.js

Using vue.js to pass route parameters to a component

Utilizing WebView for Initiating AJAX Calls

The error 'sh: dist: unknown operand' occurs when Doclerizing a Vue App

Traversal of a binary tree in the order of visitation specified by the In

The Ajax request was a success, but I am unable to retrieve radio button values from the $_POST variable