Sorting through the Axios response

I'm currently implementing a filter on an axios response. It seems like the filter is functioning correctly, but my components are not receiving the expected data, only the correct number of records.

methods: {
    loadItems() {

      // Initialize variables
      var self = this
      var app_id = "ID";
      var app_key = "KEY";
      this.items = []
      axios.get(
        "https://api.airtable.com/v0/"+app_id+"/Pages",
        { 
          headers: { Authorization: "Bearer "+app_key } 
        }
      ).then(function(response){
        self.items = response.data.records.filter(item => item.fields.fxPage == 'TestPage');
        response.data.records.map((item)=>{

          return {
              id: item.id,
              ...item.fields
          }
        })
      }).catch(function(error){
        console.log(error)
      })
    }
  }

Answer №1

So close!

It's important to remember that the .map() method actually creates a new array, so in this case it is not being utilized effectively. To optimize the code, consider chaining the map method after the filter method like so:

self.items = response.data.record.filter(item => item.fields.fxPage === "TestPage").map(item => {
   return {
      id: item.id,
      ...item.fields
   }      
})

I hope this explanation clarifies things for you!

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

What steps can I take to position tsParticles behind all other elements in my NextJS project?

In full disclosure, I am not a web developer, so my setup may be incorrect. Currently, the particles are covering all other elements on the page. I would like them to be positioned behind the rest of the elements and only show as a background. import Imag ...

Finding a JSON file within a subdirectory

I am trying to access a json file from the parent directory in a specific file setup: - files - commands - admin - ban.js <-- where I need the json data - command_info.json (Yes, this is for a discord.js bot) Within my ban.js file, I hav ...

Use ag-Grid to customize your column headers with checkboxes, allowing you to easily select or deselect all items in that column. This feature is not limited to

In my experience with ag-grid, I often find myself needing to customize the first column header to include a checkbox. This allows me to easily perform actions such as selecting all or deselecting all rows in the grid. It's important to note that this ...

Running a Blitz.js api handler triggers a Google Cloud Storage call failure with the message "error:0909006C:PEM routines:get_name:no start line"

When attempting to utilize @google-cloud/storage within a Blitz.js /api handler, I encounter the following error: error:0909006C:PEM routines:get_name:no start line at Sign.sign (internal/crypto/sig.js:110:29) at NodeCrypto.sign (C:\Users&bsol ...

What causes the jQuery mouseenter events to be activated in a random sequence?

I currently have a setup of 3 nested divs, resembling the concept of a Matryoshka doll. Each div has a mouseenter event function bound to it. When moving the mouse slowly from the bottom and entering layer three, the events occur in the following sequence ...

Personalize the vue2-editor toolbar

I am currently using a dependency for the editor, as shown on their GitHub page. They have provided an example where they modify the default toolbar to remove certain options. However, I find the example lacking and it does not demonstrate how to add all t ...

What steps can I take to trigger a 404 error instead of a cast error?

My route is defined as /mysafe/idofthemodel. When the idofthemodel is not found, it throws a cast error Cast to ObjectId failed for value "something" (type string) at path "_id" for model "modelname". Instead of this error, I ...

Executing a Root Hook Plugin Prior to Running All Mocha and Playwright Tests

I've recently incorporated automated tests into my Vue.js project by installing this useful plugin. The Vue.js application was initially set up using vue-cli. Everything is running smoothly, and I must say Playwright is proving to be a remarkably ro ...

I'm curious if anyone has had success utilizing react-testing-library to effectively test change events on a draftJS Editor component

​I'm having trouble with the fireEvent.change() method. When I try to use it, I get an error saying there are no setters on the element. After that, I attempted using aria selectors instead. const DraftEditor = getByRole('textbox') Draf ...

Send the user back to the previous page once authentication is complete

I am integrating Google authentication through Passport in my web application and I am facing an issue with redirecting the user back to the original page they requested after a successful sign-in. It seems like the use of location.reload() might be causin ...

JavaScript escape sequences are used to represent characters that are

Is there a way to pass a variable to another function in this scenario? I am inserting a textarea using JavaScript with single quotes, but when the function myFunction(abc123) is called, it appears like this, whereas it should look like myFunction('ab ...

What methods does MaterialUI utilize to achieve this?

Have you checked out the autocomplete feature in their component? You can find it here: https://mui.com/material-ui/react-autocomplete/ I noticed that after clicking on a suggestion in the dropdown, the input box retains its focus. How do they achieve thi ...

Is it possible to load modal content using ajax bootstrap pagination without having to refresh the main page?

Whenever I utilize the bootstrap modal and pagination for modal content, clicking the next/prev button causes the entire page, including the main window, to reload. Here are the scripting lines: $("#ajax_process_page").html("<%= escape_javascript(rend ...

Creating identical dropdown filter options from API in React.js

My dropdown menu is experiencing an issue where it is showing duplicated values from the API. When I receive documents from the backend, some of them have the same name, resulting in duplication in my dropdown list. Here is a snippet of my code: The funct ...

Utilizing ngModel within the controller of a custom directive in Angular, instead of the link function

Is there a way to require and use ngModel inside the controller of a custom Angular directive without using the link function? I have seen examples that use the link function, but I want to know if it's possible to access ngModel inside the directive ...

The execution of Javascript should be limited to when the tab or browser window is in focus

Similar Question: Detect If Browser Tab Has Focus I have developed a basic Java applet that is capable of capturing a client's screen. By using a small piece of JavaScript code, I can initiate the applet and capture the active screen image. Howe ...

Issue: In an Angular electron app, a ReferenceError is thrown indicating that 'cv' is

I have been working on a face detection app using OpenCv.js within an Angular electron application. To implement this, I decided to utilize the ng-open-cv module from npm modules. However, when attempting to inject the NgOpenCVService into the constructor ...

The HTML and JavaScript implementation of the Game of Life is experiencing technical difficulties

I attempted to create my own version of the Game of Life using HTML canvas and JavaScript. With the aid of various online tutorials, I was able to write a piece of code that I am still confident in. However, upon launching the HTML page in the browser and ...

Implementing TypeORM in an ExpressJS project (initialized using Express generator)

I am currently working on an ExpressJS project that was created using the Express generator. My goal is to integrate TypeORM into this project, but I am facing some challenges in achieving that. After attempting to modify the /bin/www file with the follow ...

Preserve the custom hook's return value in the component's state

I am currently facing a challenge in saving a value obtained from a custom hook, which fetches data from the server, into the state of a functional component using useState. This is necessary because I anticipate changes to this value, requiring a rerender ...