Combine two arrays into one


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

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

Storing Swift Arrays in a MySQL Database

My task involves sending an array of strings, which contains HTML code and image names, to MySQL using the following code: func uploadNote(user: String, title: String, category: String, content: [String]) { let URL: NSURL = NSURL(string: "http:// ...

What is the best way to group an array based on a dynamic key?

My goal is to group values in an array by a given ID. I've attempted a method for this, but it's not working for dynamic keys. Here is the current array: let employees = [{"employeeDetail": [{"empID": "XXYYZZ11"," ...

Vue cannot detect the component that is provided by my plugin

This unique plugin, currently only includes a single component (coded in TypeScript): import _Vue, { PluginObject } from "Vue"; import MyComponent from "./MyComponent.vue"; const VuePlugin: PluginObject<void> = { install(Vue: typeof _Vue): void { ...

Creating TypeScript interfaces from Laravel backend

I'm currently exploring ways to automatically generate TypeScript code from the API of my Laravel application. I have been using scribe for generating API documentation and then utilizing it to create TypeScript definitions. However, I am facing an is ...

Receiving an error in Typescript when passing an object dynamically to a React component

Encountering a typescript error while attempting to pass dynamic values to a React component: Error message: Property 'title' does not exist on type 'string'.ts(2339) import { useTranslation } from "react-i18next"; import ...

Understanding how the context of an Angular2 component interacts within a jQuery timepicker method

Scenario: I am developing a time picker component for Angular 2. I need to pass values from Angular 2 Components to the jQuery timepicker in order to set parameters like minTime and maxTime. Below is the code snippet: export class TimePicker{ @Input() ...

acquire tabulations from every single document within the templates on DocuSign

When using Docusign, it is possible to retrieve tabs data for a specific document within a template by specifying the documentId. However, I have not been able to locate a method to obtain tabs data for all documents contained within a template. ...

An error occurred when trying to convert a com.google.gson.JsonObject to a com.google.gson.JsonArray

I am encountering an issue with parsing a JSON response. Here is the response data: { "deal": { "categorie": { "description": "Offres Shopping", "idcategorie": "1", "nom": "Shopping" }, "cond ...

Acquire a specific key based on a conditional subkey value in PHP

Can we simplify the process of searching for ID->22 in an array (where each ID is unique) and returning the parent key? Here is a sample code: foreach ($array as $key => $value) { if($value['date']->ID == 22) { echo $key; } } In th ...

Is there a way to utilize a value from one column within a Datatables constructor for another column's operation?

In my Typescript constructor, I am working on constructing a datatable with properties like 'orderable', 'data' and 'name'. One thing I'm trying to figure out is how to control the visibility of one column based on the va ...

Guide on incorporating a YouTube iframe in React with Typescript

It appears that Typescript is posing some challenges for me in this scenario. Here's the code snippet I am trying to include: <iframe width="560" height="315" src="https://www.youtube.com/embed/BLAH?showinfo=0" frameBorder="0" ...

Set the style of the mat-select element

I'm having an issue with my select option in Angular Material. The options look fine, but when I select one, the strong tag disappears. Can anyone help me style only that part? Thank you in advance. <mat-select formControlName="projectId" ...

Implementing serialization and deserialization functionality in Typescript for classes containing nested maps

I am currently facing a challenge in transforming Typescript code into NodeJS, specifically dealing with classes that contain Map fields of objects. I have been experimenting with the class-transformer package for serialization and deserialization (to JSON ...

Error Message: Angular Unit Test Fails with "Cannot read property 'subscribe' of undefined"In this article, we will

My Angular app's unit tests using Jest are giving me the error "TypeError: Cannot read property 'subscribe' of undefined". Despite searching online, none of the solutions provided seem to work for me. Below is some relevant code: page-view. ...

Building an AngularJS Service with TypeScript that is Non-Singleton: A Step-by-Step Guide

I need help converting an AngularJS Typescript Service into a Non-Singleton. Can anyone provide guidance on how to achieve this? (Note: This is not the same as other questions that focus on achieving this in JS) I have included some simple pseudo code be ...

What is the best way to interpret a line break within a string variable in TypeScript?

Realtime Data base contains data with \n to indicate a new paragraph. However, when this data is retrieved and stored in a String variable, the website fails to interpret the \n as a paragraph break: https://i.stack.imgur.com/tKcjf.png This is ...

Using Node.js and Typescript to bring in external modules from

Attempting to generate a random integer between 1 and 6 using the 'random' library. Here's what I have coded so far: import random from 'random' function rollDice(min:number, max:number) { return Math.floor(Math.random() * (ma ...

Issue: Unable to locate a matching object '[object Object]' of type 'object'. NgFor can solely bind to data structures like Arrays and Iterables

I am facing an error that says "Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays." I am trying to create a Notification list but I can't figure out w ...

Angular project hosting causing malfunctions in route parameters

Encountering a problem with route parameters after deploying my website on namecheap hosting. Routes Setup: const routes: Routes = [ { path: 'women', component: ProductlistingComponent }, { path: 'women/:search_1', component: ...

Guide to creating two-way data binding using ngModel for custom input elements like radio buttons

I am currently facing an issue with implementing a custom radio button element in Angular. Below is the code snippet for the markup I want to make functional within the parent component: <form> <my-radio [(ngModel)]="radioBoundProperty" value= ...