Combine two arrays into one


When attempting to combine two arrays, the result looks like the image linked below:

https://i.sstatic.net/3FWMZ.png

I want the merged array to resemble the following example:

{0: {…}, storedArr: Array(2)}
0:
address: "ifanio de los Santos Ave, Mandaluyong, 1550 Metro Manila, Philippines"
addressNick: "test1"
latitude: 14.5724682
longitude: 121.0470239
remarks: "No.12"

1:
address: "ifanio de los Santos Ave, Mandaluyong, 1550 Metro Manila, Philippines"
latitude: 14.5724682
longitude: 121.0470239
remarks: "No.12"
__proto__: Object
length: 2
__proto__: Array(2)
__proto__: Obj

Please see the code snippet below for reference:

this.storage.get('storedAdd').then((addrr)=>{
      let storedArr = [];
      console.log(val)
        storedArr.push({
          address: val.address[0],
          addressNick: val.addressNickName,
          remarks: val.remarks,
          latitude: val.latitude,
         longitude: val.longitude
        });
        console.log(storedArr)
        console.log(addrr)
       this.storage.set('storedAdd', {...storedArr,...addrr});
      console.log({storedArr,...addrr})
      const datatransf = {...storedArr,...addrr}
      console.log(datatransf)
    this.packageAdd$.next(datatransf);
           
    })

Answer №1

Attempting to expand an array into an object is the issue here. As a result, you will end up with an array nested within the object at index 0.

this.storage.set('storedAdd', {...storedArr,...addrr});

Are you absolutely certain this is your desired outcome? Perhaps it should be structured like this instead:

this.storage.set('storedAdd', [...storedArr,...addrr]);

Answer №2

Instead of combining your arrays into an object like { ...arr1, ...arr2 }, make sure to merge them into an array using [ ...arr1, ...arr2 ]

var arr1 = ['a', 'b', 'c']
var arr2 = ['d', 'e']

var merged = [...arr1, ...arr2]

console.log(merged)

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

Prisma : what is the best way to retrieve all elements that correspond to a list of IDs?

I'm currently implementing Prisma with NextJs. Within my API, I am sending a list of numbers that represent the ID's of objects in the database. For example, if I receive the list [1, 2, 12], I want to retrieve the objects where the ID is eithe ...

PHP error: What causes the "variable undefined" issue within the array_map function?

In my PHP application, I am using the array_map function. Here is how I defined the array_map function: $ratingID = $this->db->insert_id(); $rated_item_array = array_map(function ($a) { return $a + array('RatingID' => $rat ...

Guide on updating the final element's value within an array and appending a new object into the array simultaneously using mongoose

"pmsStatus": [ { status: 0, fromTimeStamp: "12:40:50", reason: "no crane", toTimeStamp: "13:40:50" }, { status: 1, fromTimeStamp: &q ...

Creating a JSON schema for MongoDB using a TypeScript interface: a step-by-step guide

In order to enhance the quality of our data stored in MongoDB database, we have decided to implement JSON Schema validation. Since we are using typescript in our project and have interfaces for all our collections, I am seeking an efficient method to achie ...

Error: The specified index is outside the bounds of the list (Python 3)

Encountering issues with handling a Python list. In my code, I need to store three variables (item name, id, location) in files. To achieve this, I have implemented a fairly complicated system. Each item name and its ID are saved in a .txt file based on th ...

The expression has been altered following verification. It previously read as 'model: 1777' but now states 'model: 2222'

I've been working on this HTML code that utilizes [(ngModel)] to update input values, and I want the Total, Subtotal, and Amount Paid fields to be automatically calculated when a change is made. However, I'm encountering some issues with this app ...

Why won't my boolean value in the Angular service reflect in the HTML code?

For my project, I am utilizing a stepper and I need to display or hide a div based on the selected product. However, I am encountering an issue where the HTML isn't updating when I try to call the done() function. .service public beneficiary = true; ...

Is there a way to transform an angular 2 app.module into ES6 format?

import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { HttpModule } from '@angular/http'; //specific imports remov ...

Configuring Stylelint in a NextJS project using Emotionjs

I recently encountered an issue while trying to integrate Stylelint into a new NextJS Typescript project with EmotionJS. Many rules were not working in my styles files, and the only error I could identify was Unknown word CssSyntaxError. This particular U ...

Guide to adding information to a table with the help of an "interface" in Angular 6 and utilizing Typescript

Looking for some guidance with Angular as I am just starting out. I am currently trying to send an API request in angular 6 using Typescript. However, I am facing difficulties when it comes to adding data to a table. Check out my code on: Codepen In my p ...

What could be causing the .env.development file to malfunction in my Next.js application?

I am currently working on Jest and testing library tests. Let's discuss a component named BenchmarksPage. Please pay attention to the first line in its return statement. import { Box, capitalize, Container, FormControl, InputLabel, MenuI ...

Guide to developing universal customized commands in Vue 3 using Typescript

I recently built my app using the Vue cli and I'm having trouble registering a global custom directive. Can anyone point out what I might be doing incorrectly here? import { createApp } from "vue"; import App from "./App.vue"; impo ...

What is the best way to convert these values into an array?

My goal is to extract input from the terminal and store the numbers in an array. Here's how I intend to achieve this: ARRAY [1,2,3,4,5,6] The next step is to pass these numbers into an array using the following method. else if (strncmp(input, "C ...

Navigating from a Card to a new View in Angular

I am currently developing a project using Angular (latest version). Within my application, I have the functionality to dynamically generate bootstrap cards from an Order Array and display them in my "Order-Item-Component through its respective template. ...

Obtaining the correct information from an array using Ionic's Angular framework

I am currently working with an array of data that contains arrays within each item. I have been able to display the data as needed, except for the IDs. Approach Show arrays within the array Retrieve the IDs of the arrays (excluding the IDs inside the ar ...

Exploring MongoDB with Array Values

I am working with a user schema. { phone:'String' } Within my query field, I have an array of phone numbers like ['1233','2134','43433'] that I need to search for. My goal is to check if these phone numbers exist ...

Creating a table with merged (colspan or rowspan) cells in HTML

Looking for assistance in creating an HTML table with a specific structure. Any help is appreciated! Thank you! https://i.stack.imgur.com/GVfhs.png Edit : [[Added the headers to table]].We need to develop this table within an Angular 9 application using T ...

Error: Failed to locate package "package-name" in the "npm" registry during yarn installation

While working on a large project with numerous sub-projects, I attempted to install two new packages. However, YARN was unable to locate the packages despite the .npmrc being present in the main directory. ...

How can you establish a TypeScript project that employs classes shared by both client and server applications?

I am working on a project that consists of two components: ServerApp (developed with nodejs using NTVS) and BrowserApp (an Html Typescript application). My goal is to share classes between both projects and have immediate intellisense support. Can you pr ...

Angular's observable data fail to show on the screen

I am facing an issue with passing the data of an Observable fetched via an API request to a component variable for display. I have been trying but unable to make it work successfully. Any assistance would be greatly appreciated. Here is my code. Thank you. ...