Retrieve an array object containing specific properties using axios

Currently, I am retrieving JSON data from an API call using axios and displaying it through Vue.

This snippet shows the JSON Object logged in the console:

0:
  category_id: "categ1"
  item_name: "item1"
  price: 100
  stock: 155
1:
  category_id: "categ2"
  item_name: "item2"
  price: 100
  stock: 155
2:
  category_id: "categ1"
  item_name: "item3"
  price: 100
  stock: 155
3:
  category_id: "categ3"
  item_name: "item4"
  price: 100
  stock: 155

Below is the mounted function in my Vue instance where I make use of axios for API calls:

mounted () {    
  axios.get('link_for_api_endpoint', {  
    headers : { 
      Authorization: 'Bearer ' + access_token,
    },
    params: {
      limit: 250
    }
  })
    .then((response) => {
      this.data = response.data.items;
      //console.log(response);  
      $("#ldr").hide(); 
      removeLoader();   
    })  
    .catch(function (error) {
      console.log(error);   
    })  
    .then(function () { 

    }); 
}

My goal is to filter out data that has a category value of "categ1" from the entire JSON object. How can I achieve this specific filter?

Answer №1

If you're dealing with an array of objects, consider utilizing Array.prototype.filter to filter out specific elements.

const filteredResult = response.filter(item => item.category_id === 'categ1');

The resulting array will contain only the objects with 'categ1' as the categoryId.

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

Running into memory issues while constructing the heap

After attempting to build and deploy our React application, I encountered the following error: FATAL ERROR: Reached heap limit Allocation failed - JavaScript heap out of memory While I initially thought this was solely a JavaScript issue, I am uncert ...

Mongodb processes timestamp data in a long format

I'm curious about how to work with timestamps in MongoDB using NumberLong in our database. Which JavaScript function should I use in the MongoDB shell for this purpose? For instance, how can I determine the millisecond time of the next day after a ce ...

Learn how to dynamically change the v-if condition of each item in a loop when clicked

I'm currently working on a Vue.js application where I have a list of contacts displayed using a v-for loop. Each contact has an 'edit' button associated with it, and my goal is to toggle the v-if="!isEditingContact" condition for only the se ...

What occurs when a file being imported is also importing a file that the first file is already importing?

I have three JavaScript files with dependencies: - main.js <- dependencies: module.js, helper.js - module.js <- dependencies: helper.js - helper.js <- no dependencies main.js and module.js both import from helper.js, while main.js imports from ...

Tips for maintaining retrieved data when parameters are updated on the preceding page in Nuxt framework

Is there a way to maintain the data received from "/about/1" when transitioning to "/about/2" without remounting the component? Currently, when the route parameter changes using [/about/:page]this.$route.params.page, the component is remounted causing the ...

Display or conceal a <div> segment based on the drop down selection made

A dropdown menu controls the visibility of certain div elements based on the selection made. While this functionality is working for one dropdown, it's not working for another even though the code is very similar. I've tried various solutions but ...

Execute a query to retrieve a list of names and convert it to JSON using Unicode encoding in

Just starting out with Laravel and I'm trying to figure out how to execute some queries Not talking about the usual select statements... I need to run this specific query: SET NAMES 'utf8' First question, here we go: I have Hebrew ...

.then function not functioning properly in Axios DELETE request in a React project

I am currently facing an issue with calling a function to update the array of notes after deleting a note from the database. The function causing the error is called deleteNote, and the function I intend to call within the .then promise is getNotes. Here i ...

When the browser window is resized to mobile view, a div is overlapped by an image

I've encountered an issue with the image size and position when resizing to mobile view in the browser. .extension { display: table; padding: 50px 0px 50px; width: 100%; height: auto; color: #fff; background-color: #558C89; ...

Having trouble including a YouTube iframe code within the document ready function

I am having trouble getting the youtube iframe API code to work properly within my $(document).ready() function. When I try to add the code inside the function, the player does not load. However, when I move the code outside of the document.ready, the play ...

Saving the execution of a function within an array

Creating a JavaScript program where function calls that generate 3D objects will be stored in an array is my current project. Specifically, I aim to include the following function calls: draw_cylinder(0,0,3,2); draw_sphere(0,0,5,3); draw_cone(17,0,7,3); d ...

Error message: Unchecked runtime error - Unable to retrieve data from the specified URL. The extension manifest must include permission to access this particular host. This issue is occurring in manifest

Can someone help me out? I keep on receiving the error messages Unchecked runtime.lastError: Cannot access contents of url. Extension manifest must request permission to access this host. and Unchecked runtime.lastError: Could not establish connection. Rec ...

Hide the menu when tapping outside on a tablet device

Currently working with HTML, CSS, and JS (specifically Angular) I have a Header menu that contains dropdown sub-menus and sub-sub-menus in desktop view. On a PC, the sub-menus appear on hover and clicking on an entry redirects you somewhere. Clicking o ...

Issues with invoking C# event through ajax communication

Whenever I click the Button, an Ajax method is called that triggers a webmethod on the server side. However, currently, the [WebMethod] is not being executed as expected. Below are the snippets of both the Ajax and server-side code: Ajax code $(document ...

JavaScript Brainfuck Compiler

I successfully created a BrainFuck compiler in JavaScript, which functions perfectly with this input: ++++++++[>++++[>++>+++>+++>+<<<<-]>+>+>->>+[<]<-]>>.>---.+++++++..+++.>>.<-.<.+++.--- ...

Encountering issues with the addEventListener function in a React application

Here's the scenario: I'm currently working on integrating a custom web component into a React application and I'm facing some challenges when it comes to handling events from this web component. It seems that the usual way of handling events ...

When using ng-repeat in Angular.js, an additional td is created

https://jsfiddle.net/gdrkftwm/ https://i.sstatic.net/CTi2F.jpg I have encountered a problem while creating a table from a Json object. There seems to be an extra td being generated, and I'm not sure why. I want the structure of my table to resemble ...

The SyntaxError message indicates that there was an unexpected non-whitespace character found after the JSON data when parsing it

I received an Error message: SyntaxError: JSON.parse: unexpected non-whitespace character after JSON data Here is the code snippet: <script> $(document).ready(function () { $('.edit1').on('change', function () { ...

Verify whether a variable is empty or not, within the sequence flows in Camunda Modeler

When working with a sequenceFlow in a process instance, I need to check a condition that may involve a variable that has not been defined yet. I want the flow to proceed even if the variable is not defined, rather than throwing an ActivitiException. I hav ...

Tips for compressing an image in a React application with the help of react-dropzone

I have integrated the react dropzone package into my Next JS app and I am looking to add automatic image compression feature. After receiving the images, I converted the blob/preview into a file reader. Then, I utilized the compressorjs package for compre ...