Appending data from an existing HTTP GET request in Typescript to replace the contents of an existing object

This query is an extension of a previous one, regarding data in the ngOnInit section which differs from the markers object.

Data fetched from http get in my data.service.ts is being appended to:

items:any = [];

ngOnInit() {
    this.dataService.fetchData(this.slug)
        .subscribe(
            (data) => {
                this.checkData(data);//this function will append the data to this.items
        }
    );
}


checkData(data) {
    if (data.length === 0) {
        return this.router.navigate(['']);
    }
    return this.items = data;
}

markers =[
  {
      lat: 51.673858,
      lng: 7.815982
  },
  {
      lat: 51.373858,
      lng: 7.215982
  },
  {
      lat: 51.723858,
      lng: 7.895982
  }

]

How can I replace the existing markers object with my this.items object (which contains lat and lng)?

https://i.sstatic.net/VKQ8A.jpg

The answer provided by @Eric N was correct, converting the marker.latitude and marker.longitude to parseFloat().

Answer №1

Is your application currently connecting markers.lat and markers.lng while receiving data.latitude and data.longitude? It would be more organized to synchronize the keys used in your markers and app with those of your data source. However, if you are constrained to working with two different types of data objects, you have the option to map the incoming data to a new object with the correct keys.

let newItems:any[] = [];

for (var element in data) {  // iterate over the data type
  let marker = data[element];
  newItems.push(
    { 
        lat: marker.latitude, // generate new objects that match the keys utilized in the app
        lng: marker.longitude
    }
}

this.items = newItems;  // then set them

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

Can you explain the significance of the "type" reserved word in TypeScript?

When attempting to construct an interface in TypeScript, I discovered that the word "type" is both a keyword and a reserved term. In Visual Studio 2013 with TypeScript 1.4, for instance, when defining the following interface: interface IExampleInterface { ...

Learn how to automatically access keys in local storage using Angular

I need to implement a way to store data in local storage so that it persists even when the page is refreshed. In my HTML file, there is a button that triggers a function in my TypeScript file. This function takes a parameter 'game', which is an i ...

What is the method for creating an object type that necessitates a key determined by a variable?

Is it feasible to create a custom type in TypeScript that can check if a given key exists within the Type definition? I am specifically using noUncheckedIndexAccess: true configuration. interface one { foo: string; bar: string; } interface two { b ...

Angular 2 RC1 CLI and the use of RouteParameter

I've been diving into routing with Angular2 CLI using RC.1, and it seems like there have been quite a few changes in routing since the release of angular2 RC. Before that, everything worked smoothly in the beta version. When I try to use ../ in rout ...

Is it necessary for the changeState to be reverted when initiating an UNDO_ONE action to reverse an optimistic delete in @ngrx/data?

Check out the code on StackBlitz When performing an optimistic delete using @ngrx/data, such as removing our Hero "Ant-Man," it impacts the changeState in the following way: { "entityCache": { "Hero": { "ids": [1, 2, 3, 5, 6], "entities ...

When launching a Docker container for an Angular project, an error occurred stating "Docker /docker-entrypoint.sh: 32: exec: yarn: not

I am attempting to develop an angular application within a docker container. After successfully building a docker image and spawning a container from it, I encountered the error message /docker-entrypoint.sh: 32: exec: yarn: not found when trying to execut ...

Navigating the interface types between Angular, Firebase, and Typescript can be tricky, especially when working with the `firebase.firestore.FieldValue`

I am working on an interface that utilizes Firestore timestamps for date settings. export interface Album{ album_name: string, album_date: firebase.firestore.FieldValue; } Adding a new item functions perfectly: this.album ...

Struggling to grasp the concept of Observable Catch closure scope in Angular2?

Seeking guidance on using catch with Observables. I find myself confused and would appreciate some assistance. My goal is to handle a 403 error from the API by deleting the local token and marking the user as unauthenticated in my TokenStore. The approach ...

What is the best approach for passing the result of one observable to subsequent observables?

I'm currently working with this code snippet: zip( this.$one.getOne(id) .pipe(switchMap(oneResult => { return this.$two.getTwo(oneResult.id) })) .pipe(switchMap(twoResult => { // I need to use the **oneResult* ...

What is the best way to style an Angular 2 link with a blue color and underline effect?

In my template, I have the following code: <a (click)="delete(book)">Delete</a> Although the link functions properly, it doesn't seem visually appealing. I don't necessarily want it to be blue and underlined, but I'm unsure of ...

The inline style in Angular 2 is not functioning as expected when set dynamically

Having a small dilemma... I'm trying to apply an inline style within a div like this: div style="background: url(..{{config.general.image}})"></div Oddly enough, it was functioning in beta 16 but ever since the RC1 upgrade, it's no longer ...

Show the distinct values of a mat-select element that retrieves information from an Angular filtered dataSource

Working on an Angular 9 app where data is displayed using a mat-table and filtered based on certain fields. The issue I'm facing is that the dropdown menu shows duplicate values, which is expected since some values may be repeated in the dataset. The ...

When updating data with Angular Reactive Forms, the default value of input appears as 'undefined' upon submission, even though it is bound to the value property rather than the placeholder

I have developed a versatile Angular component that I am using to create various forms for the purpose of easily modifying multiple data items. Within this component, I have incorporated 2 input fields which are tied to input properties while iterating ov ...

Steering clear of the generic Function type in React with TypeScript

Can anyone help me find a guideline that prohibits the use of "Function" as a type? myMethod: Function; I have searched but couldn't locate any information on this. Appreciate any suggestions :) ...

Develop a series of sequential tests for the playwright to execute

Can someone assist me with my code? I am attempting to write a test in Playwright that navigates to the forgot password page, creates a new password, and then tries to log in using that new password. However, I am encountering an issue with retrieving the ...

How to identify the maximum value between two keys in Angular2

Currently, I am parsing through a data file containing approximately 500 entries that look like this: const LOCKERS: Locker[] = [ { lockerNumber: 1, room: 'Ladies', size: 'Small'}, { lockerNumber: 2, room: 'Ladies', size: ...

Ensuring Input Validity in Angular4 and Symfony3

Currently, I am utilizing angular 4 and symfony3. In my application, there is a textarea that is required. However, when I only press enter (code 13) in this textarea without entering any other character, the form gets submitted. How can I prevent this spe ...

Exploring Angular Performance: Template Functions vs. Properties. Which Method Reigns Supreme in Speed?

When dealing with multiple input controls that need to display a message when touched and invalid, I created a function for re-use in my form. The form contains numerous controls, so re-usability is important. isInvalid = (control: AbstractControl): boole ...

What is the best way to explain the concept of type indexing in TypeScript using its own keys?

I'm still learning TypeScript, so please bear with me if my question sounds basic. Is there a way to specify the index for this type so that it utilizes its own keys rather than just being an object? export type TypeAbCreationModal = { [index: stri ...

An issue with Angular Material Mat-Select Mat-Error arises when the selected value leaves the binding empty

I am facing an issue with the Angular Material Mat-Select dropdown. I almost have it working to bind the selected dropdown value to the object property, but when I check the object property value in the callback function, it appears to be blank. This cause ...