How can I utilize the pick parameter in nuxtjs3 useFetch for selecting arrays or performing a deep pick?

Question

How can I utilize the pick parameter in nuxtjs3 useFetch for selecting arrays or performing a deep pick?

Currently working on my nuxtjs3 project, where I am extracting data from an API.

Specifically using jsonPlaceholder for this task. Extracting data from a single object is not a problem:

const { data: useFetchOnly } = await useFetch('https://jsonplaceholder.typicode.com/todos/1', {
    pick: ['title']
  })

console.log({useFetchOnly})

However, when attempting to extract data from an array of objects, I'm facing some challenges. My attempt so far has been unsuccessful:

const { data: useFetchArray } = await useFetch('https://jsonplaceholder.typicode.com/todos/', {
    pick: ['title']
  })

console.log({useFetchArray})

Any suggestions on how to resolve this issue?

The documentation I've come across hasn't been very helpful in this particular scenario: LINK

javascript vue.js vuejs3 nuxt.js nuxtjs3

Answer 1

Answer №1

It's important to remember to use transform instead of pick:

When you require more control or need to map over multiple objects, the transform function is what you should use to modify the query results.

Your code should be structured like this:

const { data} = await useFetch('url', {
    transform: (r) => r.map(({ title }) => title);
})

Also, keep in mind:

Both pick and transform won't prevent unnecessary data from being initially retrieved. However, they will stop any unwanted information from being added to the payload transferred from server to client.

For further information, refer to the documentation.

Answer 2

It's important to remember to use transform instead of pick:

When you require more control or need to map over multiple objects, the transform function is what you should use to modify the query results.

Your code should be structured like this:

const { data} = await useFetch('url', {
    transform: (r) => r.map(({ title }) => title);
})

Also, keep in mind:

Both pick and transform won't prevent unnecessary data from being initially retrieved. However, they will stop any unwanted information from being added to the payload transferred from server to client.

For further information, refer to the documentation.

How can I utilize the pick parameter in nuxtjs3 useFetch for selecting arrays or performing a deep pick?

Answer №1

Similar questions

Trigger the opening of a Vuetify v-dialog when the mouse leaves

Guide to converting raw Mysql fields into objects using Node.js

What sets returning a promise from async or a regular function apart?

Alter information exclusively when the user is actively viewing my webpage

Transforming the inputted URL into a clickable hyperlink

Whenever I attempt to import the "Highway" package, I encounter an error stating "Unexpected identifier."

The webpage becomes unresponsive due to an Ajax request

Converting a PHP timestamp to a jQuery-compatible format

Struggling to display a collection of items in React

What is the process to retrieve a variable from a Node.js file in an HTML document?

Create an HTML table row that includes a value along with its related sibling and parent values

Where should AJAX-related content be placed within a hyperlink?

creating circular shapes with canvas functions

The output from the Angular .then function is not showing up on the webpage

Tips for obtaining the retrieved URL from an ajax call

Exploring Ways to Navigate to a Component Two Steps Back in Angular

Having trouble locating the module '.outputserver ode_modulespiniadistpinia' in Nuxt3 and Pinia?

CSS :contains selector after adding a script through Ajax append operation

What is the process for displaying node_modules directories in a json/javascript document?

Lack of element content in AngularJS unit testing