Is there a way to efficiently retrieve distinct values from each item within the axios response object and store them in a vuex state?

My head is spinning!

After making an axios call, I am now staring at a massive JSON array object in the console - Check!

>(100) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, ...

Now it's time to work with this data:

  1. The response is too huge when expanded, and there are thousands of them. Instead of cluttering my Vuex state with giant responses, I need to extract only specific values like:
    • id
    • ref
    • environment.name
    • status
    • deployable.tag

To simplify it down to something like:

{ "id": id, "ref": ref, "environment": environment.name, "status": status, "tag": deployable.tag, }

How can I achieve this?

  1. This response is spread across multiple pages as it's paginated.

I have a working loop that logs all the results, but what I really need to do is combine all pages (now stripped to essential fields) before saving them to the state. Despite trying various utilities and techniques, nothing seems to be working for me :)

In summary:

  1. Fetch a page's results
  2. Simplify items in the array
  3. Combine them into an object for state insertion

Snippet from the loop:

  // Use headers to get the number of pages
  const pages = await axios.head(url, options)
    .then((response) => response.headers['x-total-pages']);
  console.log('pages=', pages); // DEBUG
  // Loop through and push them to an array
  for (let i = 0; i <= pages; i += 1) {
    console.log('i=', i);
    options = {
      headers: {
        'Private-Token': token,
      },
      params: {
        order_by: 'created_at',
        sort: 'desc',
        per_page: 100,
        page: i,
      },
    };
    axios.get(url, options)
      .then((result) => { console.log(result.data); })
  }
javascriptvue.jsstatevuex

Answer №1

Initialize an array to store the total results:

const allResults = [];

Iterate through each result and extract specific data:

result.data.forEach(item => {
  allResults.push({
     id: item.id,
     ref: item.ref,
     environment: item.environment.name,
     status: item.status,
     tag: item.deployable.tag
  });
});

Consider using a traditional for loop for improved performance over forEach.

Answer №2

To maintain the order of requests and sort data across pages, consider utilizing Promises. You can achieve this by placing each axios call into an array and then using Promise.all([]) with that array to receive all responses in the original request order.

// Retrieve page count using headers
const pages = await axios.head(url, options)
.then((response) => response.headers['x-total-pages']);
console.log('pages=', pages); // DEBUG

let promises = [];

// Iterate through pages and add Axios calls to array
for (let i = 0; i <= pages; i += 1) {
  console.log('i=', i);
  options = {
    headers: {
      'Private-Token': token,
    },
    params: {
      order_by: 'created_at',
      sort: 'desc',
      per_page: 100,
      page: i,
    },
  };

  let promise = axios.get(url, options);
  promises.push(promise);
}

// Wait for all Axios calls to resolve as promises
Promise.all(promises)
  .then((result) => {
    console.log(result[0].data);
    console.log(result[1].data); // if pages > 0

    let items = [];
    for (let i = 0; i <= pages; i += 1) {
      if (result[i].data.length >= 1000) {
        result[i].data.forEach(item => {
          items.push({
            id: item.id,
            ref: item.ref,
            environment: item.environment.name,
            status: item.status,
            tag: item.deployable.tag
          });
        }
      } else {
        items = items.concat(result[i]);
      }
    }

    // Perform operations on the items array here

  });

Answer №3

I prefer utilizing Array.prototype.map in this scenario to transform the original objects into simplified versions with a subset of properties:

const newResult = result.data.map(d => ({
                                   id: d.id,
                                   ref: d.ref,
                                   environmentName: d.environment.name,
                                   status: d.deployable.status,
                                   deployableTag: d.deployable.tag
                                 }))


const data = [
  {
    "created_at": "2016-08-11T07:36:40.222Z",
    "updated_at": "2016-08-11T07:38:12.414Z",
    "deployable": {
      "commit": {
        "author_email": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0a6b6e6763644a6f726b677a666f24696567">[email protected]</a>",
        "author_name": "Administrator",
        "created_at": "2016-08-11T09:36:01.000+02:00",
        "id": "99d03678b90d914dbb1b109132516d71a4a03ea8",
        "message": "Merge branch 'new-title' into 'master'\r\n\r\nUpdate README\r\n\r\n\r\n\r\nSee merge request !1",
        "short_id": "99d03678",
        "title": "Merge branch 'new-title' into 'master'\r"
      },
      "coverage": null,
      "created_at": "2016-08-11T07:36:27.357Z",
      "finished_at": "2016-08-11T07:36:39.851Z",
      "id": 657,
      "name": "deploy",
      "ref": "master",
      "runner": null,
      "stage": "deploy",
      "started_at": null,
      "status": "success",
      "tag": false,
      "user": {
        "id": 1,
        "name": "Administrator",
        "username": "root",
        "state": "active",
        "avatar_url": "http://www.gravatar.com/avatar/e64c7d89f26bd1972efa854d13d7dd61?s=80&d=identicon",
        "web_url": "http://gitlab.dev/root",
        "created_at": "2015-12-21T13:14:24.077Z",
        "bio": null,
        "location": null,
        "public_email": "",
        "skype": "",
        "linkedin": "",
        "twitter": "",
        "website_url": "",
        "organization": ""
      },
      "pipeline": {
        "created_at": "2016-08-11T02:12:10.222Z",
        "id": 36,
        "ref": "master",
        "sha": "99d03678b90d914dbb1b109132516d71a4a03ea8",
        "status": "success",
        "updated_at": "2016-08-11T02:12:10.222Z",
        "web_url": "http://gitlab.dev/root/project/pipelines/12"
      }
    },
    "environment": {
      "external_url": "https://about.gitlab.com",
      "id": 9,
      "name": "production"
    },
    "id": 41,
    "iid": 1,
    "ref": "master",
    "sha": "99d03678b90d914dbb1b109132516d71a4a03ea8",
    "user": {
      "avatar_url": "http://www.gravatar.com/avatar/e64c7d89f26bd1972efa854d13d7dd61?s=80&d=identicon",
      "id": 1,
      "name": "Administrator",
      "state": "active",
      "username": "root",
      "web_url": "http://localhost:3000/root"
    }
  },
  {
    "created_at": "2016-08-11T11:32:35.444Z",
    "updated_at": "2016-08-11T11:34:01.123Z",
    "deployable": {
      "commit": {
        "author_email": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="98f9fcf5f1f6d8fde0f9f5e8f4fdb6fbf7f5">[email protected]</a>",
        "author_name": "Administrator",
        "created_at": "2016-08-11T13:28:26.000+02:00",
        "id": "a91957a858320c0e17f3a0eca7cfacbff50ea29a",
        "message": "Merge branch 'rename-readme' into 'master'\r\n\r\nRename README\r\n\r\n\r\n\r\nSee merge request !2",
        "short_id": "a91957a8",
        "title": "Merge branch 'rename-readme' into 'master'\r"
      },
      "coverage": null,
      "created_at": "2016-08-11T11:32:24.456Z",
      "finished_at": "2016-08-11T11:32:35.145Z",
      "id": 664,
      "name": "deploy",
      "ref": "master",
      "runner": null,
      "stage": "deploy",
      "started_at": null,
      "status": "success",
      "tag": false,
      "user": {
        "id": 1,
        "name": "Administrator",
        "username": "root",
        "state": "active",
        "avatar_url": "http://www.gravatar.com/avatar/e64c7d89f26bd1972efa854d13d7dd61?s=80&d=identicon",
        "web_url": "http://gitlab.dev/root",
        "created_at": "2015-12-21T13:14:24.077Z",
        "bio": null,
        "location": null,
        "public_email": "",
        "skype": "",
        "linkedin": "",
        "twitter": "",
        "website_url": "",
        "organization": ""
      },
      "pipeline": {
        "created_at": "2016-08-11T07:43:52.143Z",
        "id": 37,
        "ref": "master",
        "sha": "a91957a858320c0e17f3a0eca7cfacbff50ea29a",
        "status": "success",
        "updated_at": "2016-08-11T07:43:52.143Z",
        "web_url": "http://gitlab.dev/root/project/pipelines/13"
      }
    },
    "environment": {
      "external_url": "https://about.gitlab.com",
      "id": 9,
      "name": "production"
    },
    "id": 42,
    "iid": 2,
    "ref": "master",
    "sha": "a91957a858320c0e17f3a0eca7cfacbff50ea29a",
    "user": {
      "avatar_url": "http://www.gravatar.com/avatar/e64c7d89f26bd1972efa854d13d7dd61?s=80&d=identicon",
      "id": 1,
      "name": "Administrator",
      "state": "active",
      "username": "root",
      "web_url": "http://localhost:3000/root"
    }
  }
]

const result = data.map(d => ({
  id: d.id,
  ref: d.ref,
  environmentName: d.environment.name,
  status: d.deployable.status,
  deployableTag: d.deployable.tag
}))

console.log(result)

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

Is it possible for me to initiate an AJAX request to a particular function in a PHP script from a JavaScript file?

I have a JavaScript function that retrieves the latitude and longitude of the user and saves it in an array for future use. My goal is to compare the user's location with multiple other locations stored in a database. I am attempting to achieve this b ...

javascriptphpjqueryajaxgoogle-maps

Can a for loop be implemented within a mongoose schema method?

Is there a way to modify this for loop so that it runs through the entire array instead of adding one by one? Any suggestions? EndorsedSkillSchema.methods = { async userEndorsedSkill(arr) { for (var i = 0; i < arr.length; i++) { const skil ...

javascriptmongoose

Utilize the power of Elasticsearch.js along with Bluebird for enhanced performance

Recently delving into node.js, I've been exploring the powerful capabilities of the bluebird promise framework. One of my current challenges involves integrating it with the elasticsearch javascript driver. After some experimentation, I was able to su ...

javascriptnode.jselasticsearchbluebird

What is the best way to integrate Google Analytics into a Next.js application without the need for an _app.js or _document.js file?

I'm encountering some challenges while trying to incorporate Google Analytics into my Next.js application. One issue I'm facing is the absence of an _app.js or _document.js file in the project structure. Additionally, I notice that when I include ...

javascripttypescriptgoogle-analytics

What is the correct way to extract results from an Array of Objects in Typescript after parsing a JSON string into a JSON object? I need help troubleshooting my code

Here is my code for extracting data from an array of objects after converting it from a JSON string to a JSON object. export class FourColumnResults { constructor(private column1: string, private column2: string, private column3: string, priv ...

javascriptarraysjsontypescript

Struggling to transmit data to material dialog in Angular2+

I am facing an issue with my Material Dialog not working properly. Can anyone point out what I might be missing? product-thumbnail.ts I will use this to trigger the dialog export class ProductThumbnailComponent implements OnInit { @Input() product: Pr ...

javascriptangulartypescriptangular-material

What is the process for choosing every child (regardless of level) of a parent using jQuery?

Is there a way to unbind all elements from a parent node using jQuery? How can I effectively select all children, regardless of their nesting level, from a parent node? I attempted the following: $('#google_translate_element *').unbind('c ...

javascriptjqueryhtmldom

Discovering all the links present on a webpage using node.js

Currently, I am diving into node.js (webdriver) and encountering some challenges. Despite my efforts to search online for examples of the tasks I need help with, I have come up empty-handed. One example that has me stumped is how to log all links from a pa ...

javascriptnode.jsselenium-webdriverwebdriver

Updating deeply nested document in Mongoose

Is it possible to change the value of array1.array2.status, according to the schema provided below? const SomeSchema = new mongoose.Schema({ status: Boolean, array1: [{ array2[{ status: boolean }] }] }) ...

javascriptnode.jsmongodbmongoose

Guidelines for sending data to child components using Vue Router

I'm currently working on a Vue component that includes Navigation and layout features and relies on a bus to communicate with its sub-components. The bus is passed down as a prop to the sub components, which then utilize $emit for communication. expo ...

vue.jsvue-router

Difficulties arising from Bootstrap menu causing interference with dropdowns

I am facing a problem with the two navigation menus on my website. Both menus are of the same type and are built using Bootstrap. The first navigation menu uses the “navbar-inverse” class, while the second one uses the “navbar-default” class with s ...

javascriptjqueryhtmlcsstwitter-bootstrap

Submitting HTML forms in SilverStripe using Ajax

I need to transfer data from a basic HTML form to a controller using Ajax, then handle the data and send a response back. Currently, my setup looks like this: HomePage.ss <form method="POST" class="form-horizontal submit-form" onsubmit="return checkf ...

javascriptphpjqueryajaxsilverstripe

Decipher the JSON data for a Facebook cover photo

I am utilizing the Facebook Graph API to retrieve the user's cover picture. By accessing the link provided at , a JSON object containing the picture link is returned. How can I fetch this link using JQuery or JavaScript? Here is my attempt: HTML: & ...

javascriptphpjqueryjsonfacebook-graph-api

Get ready for 10 AM with the RxJS timer function

I am trying to figure out how to schedule a method in my code using rxjs/timer. Specifically, I want the method to run at precisely 10 AM after an initial delay of 1 minute. However, my current implementation is running every 2 minutes after a 1-minute d ...

javascriptangulartypescriptrxjsobservable

Unveiling the Secret: Uncovering all Objects within an Array of Objects utilizing jQuery's data() Feature

I'm facing an issue with using jQuery's data() selector in a Freemarker template to transfer yaml data to JS. While I can successfully pass "shallow" key/value pairs, transferring an array/sequence of objects/hashmaps doesn't work as expecte ...

javascriptjqueryjsonyamlfreemarker

CSS trick for masking line borders with parent corner radius

I'm currently utilizing next js for my web application, and I have encountered a specific requirement that needs addressing. You can find the visual representation of this requirement in the following image: https://i.sstatic.net/zGVrl.png The progr ...

javascripthtmlcssreactjs

Creating a custom dynamic favicon and title in NextJS

Hello there! I am in the process of creating a web constructor. Currently, my application functions as follows: I verify the URL that the user is visiting (such as localhost:3000) I identify their project name within my web constructor (localhost:3000 -&g ...

javascripthtmlcssnext.jsseo

Issue: Received a redirect error while transitioning from the homepage to the dashboard using a navigation guard

Vue is throwing an error that I can't quite figure out: Error: Redirected when going from "/" to "/dashboard" via a navigation guard.. I have pinpointed where the issue occurs: import { Component, Vue } from "vue-property-dec ...

vue.jsvue-router

Effortless Inertia Scrolling Implemented in Next.js

My search for achieving smooth inertia scrolling in next.js has left me unimpressed with the available solutions, as they either lack performance or come with some drawback. This medium article and sandbox demo provided a choppy experience, While this jav ...

javascriptreactjsnext.js

Pause the initial ajax data loading in Tabulator.js and instead load data only after the first filter is applied

Currently, I am utilizing the tabulator.js library and hoping to delay the loading of data until after the first filter is applied, rather than immediately upon page load. Is there a way to achieve this functionality using something like: initialAjaxLoa ...

javascriptajaxtabulator