Merge two objects that each contain arrays into a single array that contains objects

I'm attempting to merge two arrays that contain objects into a single array containing all the objects. Hopefully, this explanation makes sense.

 getEntries() {
        const linksArr = ['/api/aggregated', '/api/techmetro'];

        axios.all(linksArr.map(l => axios.get(l))).then(axios.spread((...res) => {
            // all requests are now complete
            this.articles = res;
        }));
    },

The current result I'm getting is:

articles:Array[2]
0:Object
config:Object
data:Object
data:Array[10]
    0: Object
    ...
meta:Object
headers:Object
request:XMLHttpRequest
status:200
statusText:"OK"
1:Object
config:Object
data:Object
    data:Array[1]
    0: Object
0:Object
meta:Object
headers:Object
request:XMLHttpRequest
status:200
statusText:"OK"

However, my goal is:

articles:Array[11]
   0: Object
    ...

What am I overlooking? Thank you very much.

Answer №1

One straightforward approach is extracting the information from the collected responses:

... .then( response => 
   response.reduce( (prev, current) => prev.concat(current.data), []) ...

Answer №2

Do you need help finding the solution?

….then(([combinedList, techData]) => {
    this.articles = combinedList.concat(techData);
});

Alternatively, you could use

….then(result => {
    this.articles = result[0].concat(result[1]);
});

In case there are multiple arrays to merge together (e.g. result.length != 2), consider using [].concat(...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

What is the Flow equivalent of TypeScript's Record type?

Flow does not have an equivalent utility type like TypeScript's Record that I am searching for. I experimented with using { [key: KeyType]: Value } in Flow, but found that it carries a different semantic meaning. ...

Interact with the button through Swipe Left and Right gestures

Is it possible to trigger a button click using JQuery or JavaScript when swiping left or right on two buttons like these? <button id="right" type="button">SWIPE RIGHT</button> <button id="left" type="button">SWIPE LEFT</button> If ...

Converting a Python for-loop array into PHP

I'm currently in the process of converting a Python script to PHP. I am confident in my PHP skills, but Python is not my strong suit. Out of all the code, there are 5 lines that are giving me trouble during the translation process. Is there anyone ou ...

Using addClass and fadeIn simultaneously when hovering over an element

After writing JavaScript code that utilizes the JQuery library to swap classes on hover, I noticed that the transition between background images was quite abrupt. The code functions as intended, but I would prefer to incorporate a fadeIn and fadeOut effect ...

How can you efficiently pass the index as a prop to a child component in React.js when dealing with arrays stored in

Just starting out with React, so bear with me if my terminology is a bit off. I'm working on a table that displays a list of people in a specific order. I want to be able to assign a this.props.tablePosition value based on the index of each person. t ...

"Encountering an issue with Express.json where it fails to parse the

Receiving JSON POST data from an IoT API that includes multipart form-data. Occasionally, an image file may be included but I only want to focus on the JSON part: POST { host: '192.168.78.243:3000', accept: '*/*', 'content-le ...

The variants array in VUE.js is not displaying properly

I have recently been delving into vue.js for my work and encountered a significant issue. I wanted to create a simple TODO application. In my index.html file, I only have a div for a header and a root div with an ID: #app. Inside the root div, there is a ...

The React DOM isn't updating even after the array property state has changed

This particular issue may be a common one for most, but I have exhausted all my options and that's why I am seeking help here. Within my React application, I have a functional component named App. The App component begins as follows: function App() ...

The jQuery onClick function functions effectively for the initial two clicks; however, it ceases to

I am currently experimenting with jQuery to dynamically load a specific div from another page on my server into a designated section on the existing page. While the code is successfully functioning for the first two clicks on the website, it fails to work ...

Encountering a TypeError with Arg 1 while trying to execute the save method in jsPDF

I am currently working on a react project with a simple implementation of jsPDF. I am trying to execute the sample 'hello world' code but encountering an error when using the save method: https://i.stack.imgur.com/o4FWh.png My code is straightf ...

The art of integrating partial rendering into a template

I'm currently working on a project using Angular 2 and I need to display a partial inside a template without having to create a new component. Is this doable? import {Component} from 'angular2/core'; import {RouteConfig, ROUTER_DIRECTIVES} ...

Fade in and out animation for flash notifications

Is there a way to create a flash message with a smooth fade in and out animation using jQuery? I would appreciate any recommendations on the most efficient approach for achieving this effect. ...

Methods for ensuring that fake browser tab focus remains on several tabs simultaneously

Is there a way to simulate multiple tab/window focus in a browser for testing purposes? I need to test pages that require user input and focus on active windows/tabs. Are there any different browsers, plugins, or JavaScript code that can help me achieve th ...

Persuading on the Server-Side

After reading through the Google-Caja wiki, I became intrigued by its capabilities. From what I understand, with Caja we can send a snippet of HTML (such as a ) to Google-Caja's server (cajoling service) for processing. The HTML is cajoled and the Jav ...

How can you prevent warnings in Perl regarding uninitialized elements within an array?

#!/usr/bin/perl use strict; use warnings; sub generateParagraph { open my $file, "<", "dict.txt" or die "$!"; my @words = <$file>; close $file; print "Number of lines:"; my $lines = <>; print "Max words per line:"; my $range = <>; ...

"Experience a unique website layout with varying designs on desktop and mobile devices while using the React technology to enable desktop

Just starting out with React and I've noticed something strange. When I view my website on a PC, everything looks normal. However, when I switch to the desktop site on my phone, things appear differently. It seems like moving an element by 20px on mob ...

How can we accurately identify the server that initiated an AJAX call in a secure manner?

Imagine a scenario where Site A embeds a JavaScript file from Server B and then makes a JSONP or AJAX request to a resource on Server B. Is there any foolproof way for Server B to determine that the specific JSONP request originated from a user on Site A, ...

JavaScript is unable to identify the operating system that is running underneath

Even though I am on a Windows system, the browser console is showing that I am using Linux. function detectOS() { const userAgent = navigator.userAgent.toLowerCase(); if (userAgent.includes('win')) { return 'Windows' ...

Unlocking the key to retrieving request headers in the express.static method

Utilizing express.static middleware allows me to avoid manually listing each asset in the routes. All my routing is managed through index.html due to my use of Vue JS. However, a feature necessitates me to extract specific information from the request hea ...

Troubleshooting: Inability of Angular2 Component to access class property within template

Here is the code snippet that I am currently working with: post.component.ts: import { Component } from '@angular/core'; import { Router } from '@angular/router'; import { JobsService } from '../jobs.service'; @Component({ ...