Extracting IDs from an array response in Vue.js

Hey there, I have a scenario where I am fetching response data using Vue.js with Axios from Laravel:

Here is my example method in Vue.js:


getApps(page = 1){


 
     axios.get('/api/getappforms')
     .then(response =>
     { 

   apps = response.data
  
 }
     ).catch(err => console.log(err));



}

And here is my Laravel method:


$DataApps = Appclications::select('application.*','wilayas.name as wilaya','dairas.name as daira_field','communes.name as commune_field')
->leftJoin('dairas','dairas.id','=','application.id_daira')
->leftJoin('wilayas','wilayas.id','=','application.id_wilaya')

->leftJoin('communes','communes.id','=','application.id_commune')
->paginate(15);


    return   response()->json($DataApps);

Everything works perfectly, but I need to extract only the IDs from the 'apps' variable in Vue.js and store them in another array. Can anyone assist me with this?

Thanks in advance!

Answer №1

Feedback Received:

{"current_page":1,
"data":
[
{
"id_app":1,
"name":"John",
"last_name":"Smith",
"phone":"123456789",
"position":"Manager",
"situation":"Employed",
"date_born":"1990-05-22",
"photo_profile":null,
"nb_children":2,
"id_wilaya":2,
"email":"[email protected]",
"job_field":"Sales",
"military":null,
"anem":"yes",
"field_motivation":"Love this job",
"created_at":"2021-10-15T08:30:00.000000Z",
"updated_at":"2021-10-15T08:30:00.000000Z",
"wilaya":"Algiers",
"daira_field":"Bab El Oued",
"commune_field":"Casbah"
},
{
"id_app":2,
"name":"Mary",
"last_name":"Johnson",
"phone":"987654321",
"position":"Supervisor",
"situation":"Unemployed",
"date_born":"1988-12-31",
"photo_profile":null,
"nb_children":1,
"id_wilaya":3,
"email":"[email protected]",
"job_field":"Marketing",
"military":null,
"anem":"no",
"field_motivation":"Seeking new opportunities",
"created_at":"2021-10-16T09:45:00.000000Z",
"updated_at":"2021-10-16T09:45:00.000000Z",
"wilaya":"Oran",
"daira_field":"Es Senia",
"commune_field":"Ain Turk"
}
],
"first_page_url":"http:\/\/localhost:3000\/api\/getfeedbacks?page=1",
"from":1,
"last_page":1,
"last_page_url":"http:\/\/localhost:3000\/api\/getfeedbacks?page=1",
"next_page_url":null,
"path":"http:\/\/localhost:3000\/api\/getfeedbacks",
"per_page":15,
"prev_page_url":null,
"to":2,
"total":2}

Answer №2

If you only want to extract the ids, you can accomplish that by using the following method

fetchIds(page = 1){
  axios.get('/api/getappforms')
   .then(response =>
   { 
     let apps = response.data
     console.log(apps); // verifying if it's an array
     let ids = apps.map(item => return item.id);
     console.log(ids); // the resulting array of ids will be displayed here
   }
).catch(err => console.log(err));
}

Answer №3

Appreciate it, I have resolved the issue:

fetchApps(page = 1){
 
 
     axios.get('/api/fetchappdata')
     .then(response =>
     { 

    this.apps = response.data;
   let ids = this.apps.data.map((item) => { return item.id_app  }   );
   console.log(ids); // check your ids array here 
 }
     ).catch(err => console.log(err));



}

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

AngularJS: Utilizing a single 'partial form' for creating and updating articles

For the example, let's consider a simple form with just one text input. I would like to put it in a partial so that I can include other inputs and have a single form for both creating and updating the artist. Partial Code <input name="name" type= ...

convert and transform XML data into JSON format

I have been working with nodejs-expressjs and I received a response in raw XML format. My goal is to convert this raw XML into either a JavaScript array or a JSON array so that I can extract the domain name along with its status. I want to display this inf ...

The resize function fails to trigger when it is required

Struggling to get this code working properly. If the window width is greater than 800, I want 6 images with a red background. If the window width is less than 800, I want 4 images with a blue background. I need this functionality to work both on r ...

Tips for splitting lengthy text into multiple lines in Vue

Vue is being used to display a line which appears lengthy when displayed in one line. I'm interested in splitting this long line into multiple lines automatically. Can someone guide me on how this can be achieved? <span class="text-xs"> ...

What steps can I take to prevent already selected options from being chosen in a Vue.js HTML form?

Among my json data, I have a list of all inventories: { "status": true, "data": [ { "inv_id": 1, "name": "Arts" }, { "inv_id": 2, "name": "web" }, { "inv_id": 3, "name": "mobileapp" }, { "inv_id": 4, "name": "ws" }, { "inv_id": 5, ...

"Enhance your Angular configuration with the powerful ngBootbox plugin

Is there a way to permanently change the locale of ngBootbox? I tried adding an extra angular configuration: var app = angular.module('some_module', ['highcharts-ng', 'ui.router', 'oc.lazyLoad', 'ui.selec ...

Is there a way to use AJAX for transferring a value?

I am looking to transmit a value to a php-script (servo.php) that will then write the received data in a file (/dev/servoblaster). The script section of my HTML file (index.html): <script> function tiltt() { var tilt = document.getElementById("tilt ...

How can one update transitive dependencies to a specific newer version in npm to address CVE vulnerabilities?

Here are the packages that require upgrading. I attempted to update the version and signature of the packages listed in package-lock.json. However, whenever I run npm i after modifying package-lock.json, the changes made to package-lock.json disappear. ...

Tips for creating JSON using AngularJs to store tabular information

I successfully created an HTML page using AngularJS. <form name="target" ng-submit="createAllKeywordsJSON(codeMasterList)"><!-- createAllKeywordsJSON() --> <input type="submit" value="Save" class="myButton" name="submit" style="margin: ...

Is there a way to update the styling of specific sections of an input field as the user enters text in React?

Just like in most markdown editors, I am looking to enable the ability to modify parts of an input field as the user enters text. For instance: When the user types "_above_", as soon as the second underscore is typed, the text should be styled accordingly ...

How to dynamically insert li elements into a ul list using the .after() method

After trying to add an li element to the ul list, I noticed that my DOM wasn't updating when checking the page source. Even attempting to delete elements with the delete button didn't seem to work as expected. Here is the code snippet below. ...

Is there a solution to resolve CORS API requests between a Laravel backend and a Node.js/Express.js client?

While developing an API in nodejs/expressjs, I successfully tested it using Postman. However, when attempting to test it with an axios call within Laravel, I encountered some issues. The errors that I received are as follows: Access to XMLHttpRequest a ...

What is causing the Invalid left-hand side error in the postfix expression at this specific line of code?

I encountered an error stating "invalid left-hand side in postfix expression" while trying to execute this particular line of code data: 'Action=AutionMaxBid&AuctionItemID='+<?php echo $bidItemID ;?>+'', This error occurred d ...

CORS headers present but AJAX request still fails

A request sent via AJAX from a locally hosted page to a remote server is encountering errors, despite the presence of CORS headers. The JavaScript code for this request is as follows: $.ajax({url: 'http://prox.tum.lt/420663719182/test-upload?Action=S ...

Loading dynamic images in HTML using Javascript and Django templates

Attempting to load a specific image using javascript within a django template has presented challenges due to the formatting of django tags. The standard django static asset source in an img tag looks like this: {% load static %} <img src="{% static & ...

The nested jade elements are failing to render

If I have a jade setup with 3 files as follows: 1. //layout.jade doctype html html body block content 2. //index.jade extends layout block content h1 Animals block cat block dog 3. //animals.jade extends index block cat p Meow block ...

Angular Cascade of Multiple Requests

I am currently working on a project where I need to develop a service that can take CSV data, convert it into rows, and then make API requests for each row, adding the formatted results to an output string. To explain further, my code (written in Coffeesc ...

Pricing determined by location on a website created with HTML

We are looking to customize our HTML5/CSS3 website by displaying different pricing tables based on the location of each visitor. Our goal is to have a fixed price for users from Singapore while showing a different price for visitors from other parts of th ...

Encountering "Cannot GET" error following asynchronous AJAX call in ReactJS react.Component

I'm encountering a problem with my reactjs code. After addressing issues related to asynchronous operations, I now face a blank page with an error message saying "Cannot GET /thenameofthepage." Here is the code snippet following the react.Component: ...

Unable to trigger onclick event for creating a new title

I'm currently working on a text generator project using JavaScript. My goal is to create a function that saves the selected text from a dropdown menu and displays it as the page title when the "Generate" button is clicked. The issue I'm facing i ...