Angular TypeScript Element implicitly has an 'any' type because expression of type '1' can't be used to index

3 days ago 9
ARTICLE AD BOX

I am using Angular to pull a JSON file from a URL and trying to display the values in my page. My current issue is I am getting an error as follows:

Element implicitly has an 'any' type because expression of type '1' can't be used to index type 'WritableSignal<DataLayer | undefined>'. Property '1' does not exist on type 'WritableSignal<DataLayer | undefined>'.ts(7053) (property) AppComponent.results: WritableSignal<DataLayer | undefined>

app.component.ts

constructor(private http: HttpClient) {} onCountryClick(target: any) { console.log('Country clicked:', target.id); this.http.get(`https://api.worldbank.org/v2/country/${target.id}?format=json`).subscribe(data => { const dataLayer: DataLayer = {} as DataLayer; this.results.set(dataLayer); dataLayer.name = this.results[1][0].name; dataLayer.capital = this.results[1][0].capitalCity; dataLayer.region = this.results[1][0].region.value; dataLayer.income = this.results[1][0].incomeLevel.value; dataLayer.long = this.results[1][0].longitude; dataLayer.lat = this.results[1][0].latitude; console.log(this.results()); }); }

The error occurs with this.results[1].

Using this.results[1][0].name returns the correct string I wish to display.

Example:

this.http.get('https://api.worldbank.org/v2/country/ru?format=json')

This returns the following:

[ { "page": 1, "pages": 1, "per_page": "50", "total": 1 }, [ { "id": "RUS", "iso2Code": "RU", "name": "Russian Federation", "region": { "id": "ECS", "iso2code": "Z7", "value": "Europe & Central Asia" }, "adminregion": { "id": "", "iso2code": "", "value": "" }, "incomeLevel": { "id": "HIC", "iso2code": "XD", "value": "High income" }, "lendingType": { "id": "IBD", "iso2code": "XF", "value": "IBRD" }, "capitalCity": "Moscow", "longitude": "37.6176", "latitude": "55.7558" } ] ]

this.results[1][0].name returns 'Russian Federation'

this.results[1][0].capitalCity returns 'Moscow'

this.results[1][0].region.value returns 'Europe & Central Asia'

And so on.

This is what I have tried so far:

datalayer.ts

export interface DataLayer { name: {[index: string]: any}; capital: string; region: string; income: string; long: string; lat: string; }

Neither {[index: string]: any} or string seems to work. They return the same error.

Is there an easier way to get the data I need? What am I missing?

Read Entire Article