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

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.

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

The code for implementing the "Read More" feature is not functioning as intended

I have been experiencing an issue with the implementation of the "read more" feature on my website. Although the code seems to be functioning properly, it only works after pressing the read more button twice. This particular code is designed to detect the ...

Obtain value of dropdown selection upon change

What is the best way to retrieve the selected value in a drop-down menu when the ID dynamically changes with each refresh? Is it possible to access the particular selected value even when the ID changes? <select name="status" id="dropdown_status3352815 ...

What is the best way to show input choices once an option has been chosen from the 'select class' dropdown menu?

When it comes to displaying different options based on user selection, the following HTML code is what I've been using: <select class="form-control input-lg" style="text-align:center"> <option value="type">-- Select a Type --</opti ...

Is it possible for Vue js to display an image from the /dist/ directory even if it is not present?

Currently, I am in the process of learning Vue.js + webpack and have started a project by following these steps: f:www\> npm install -g vue-cli f:www\> vue init webpack-simple my-project f:www\> cd my-project f:www\> npm in ...

How can I immediately disable a button upon clicking "cancel" on a modal that contains TextFields in React Version 18?

New to React development. Looking for a way to reset a button to its initial disabled state when canceling out of a modal. The scenario is that upon clicking a button, a dialog will appear with an "ADJUST" button that is initially disabled until text is ...

Configuring Multer destination dynamically using FormData values in Node.js

I have a scenario where I need to send a file along with some data values using an XMLHttpRequest (xhr) to a Node.js server running Express. To handle multipart data, I am utilizing Multer as bodyParser does not work in this case. router.post("/submit", f ...

A method for performing precise division on numbers in JavaScript, allowing for a specific precision level (such as 28 decimal places)

I've searched extensively for a library that can handle division operations with more than 19 decimal places, but to no avail. Despite trying popular libraries like exact-math, decimal.js, and bignumber.js, I have not found a solution. How would you ...

Search for the booking object based on the user in MongoDB

In my Next.js app, I have 2 models - Booking and User. The object below represents a booking object. When a user books some dates, a new object is created in the bookings model. On the booking details page, users should be able to see details of their book ...

The React.js component search test encounters errors in locating components

I have been working on a React app that utilizes Redux and React-router. I am currently writing tests using React TestUtils, and I encountered an issue with the following test results: The first expect statement is successful: expect(nav).to.have.length(1) ...

Using PHP, Ajax, and JavaScript, display interactive data from the server in a dynamic modal popup listbox within a Tinymce-WordPress

Currently, I am in the process of developing a WordPress plugin using TinyMCE. The main functionality involves a button that triggers a popup modal with some list boxes. These list boxes need to be populated with values fetched from the server. To accompli ...

Ways to determine the vertical size of a React component

Currently, I am dynamically generating a list of Symbol(react.element) by utilizing the map function to iterate through an array and incorporate each element's HTML tags. My question is: How can I determine the height of each individual rendered Symbo ...

When my webpage is opened in Firefox, I notice that it automatically scrolls down upon loading

I recently embarked on the task of building a website from scratch but ran into an unusual bug in Firefox. The issue causes the page to scroll down to the first div, completely bypassing its margin. I want to clarify that I am not seeking a solution spe ...

When utilizing :id with Vue, HTML attributes become hidden from view

I am facing an issue where I need to make HTML elements visible, but they appear invisible upon rendering. Below is my HTML code: <div class="created-links-wrapper" v-for="item in createdUrls" :key="item._id"> <d ...

Tips for creating a blur effect on all options except for the selected 2 out of 4 using jQuery

My goal is to choose 3 options from a list and once 3 options are selected, all other options will be blurred to prevent further selection. Please review the code snippet I have provided below. Link to File <!DOCTYPE html> <html> <head> ...

Nuxt is throwing an error because it cannot find the definition for Stripe

I'm having trouble integrating Stripe elements into my Nuxt.js page and I keep getting an error. Error: Stripe is not defined I have added the <script src="https://js.stripe.com/v3/"></script> to my nuxt.config.js Here's my code: ...

Vue Google Tag Manager Error: This file type requires a specific loader to be handled correctly

I have integrated "@gtm-support/vue2-gtm": "^1.0.0" in one of my Vue-2 applications, with Vue versions as below: "vue": "^2.5.2", "vue-cookies": "^1.5.4", "vue-i18n": "^8.0.0", "vue-recaptcha": "^1.1.1", "vue-router": "^3.0.1", "vue-scrollto": "^2.17.1", " ...

What steps should be taken to generate a successful pop-up window post registration in PHP?

beginning section continuation What is the best way to design an effective popup window? ...

Creating uniform URLs using MVC .NET routing: a guide

While using ASP.Net MVC 5 in .NET Framework 4.8, I am constantly facing a 404 error due to inconsistent URL generation. For instance, when including the _PageNav.chstml partial at the top of each page and adding @Url.Action("Index", new { controller = "Hom ...

How can we use JavaScript to add a class to the <html> element?

What is the method to apply a class to the root element <html> in JavaScript? ...

default choice in dropdown menus

I need to populate my option fields with data retrieved from a database. I encountered an error in the console: Error: [$compile:ctreq] Controller 'select', required by directive 'ngOptions', can't be found! I am confident that t ...