Can i turn this json object into a list i can access or can i access it like this - Html

moritzknrd
April 18, 2023
253 views
0 votes
2 Answers

im trying to access this json object toget on the data of this API to show via ionic and angular but it doesn’t let me access the json object. The REST API Call is working, in the console i get the data i want but i cannot access it.

So i want to ask if there is a way to do it, preferable as a list?

Here is my Code:

Page.ts

import { Component, OnInit } from '@angular/core';

import { WowsService } from '../wows.service';

@Component({
  selector: 'app-ships',
  templateUrl: './ships.page.html',
  styleUrls: ['./ships.page.scss'],
})
export class ShipsPage implements OnInit {

  public shipsData:any;

  constructor(public api: WowsService) { }


  ngOnInit() {
    this.search();
  }

  search() {
    this.api.getShips(7).subscribe(result=>{
      console.log(result);
      this.shipsData = result;
      console.log(this.shipsData)
    });
  }

}

service.ts

import { Injectable } from '@angular/core';
import {HttpClient} from '@angular/common/http'

@Injectable({
  providedIn: 'root'
})
export class WowsService {

  constructor(public http: HttpClient) { }

  getShips(page = 1){
    return this.http.get(`https://api.worldofwarships.eu/wows/encyclopedia/ships/?application_id=2b7768388d55eeb026d68ea0d1c431d4&page=${page}`)
  }

}

page.html

<ion-header>
  <ion-toolbar>
    <ion-title>ships</ion-title>
    <ion-buttons slot="start">
      <ion-back-button></ion-back-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-item>
    
  </ion-item>
</ion-content>

The Json looks like this ( i cannot get access to the data section ):

{
    "status": "ok",
    "meta": {
        "count": 1,
        "page_total": 161,
        "total": 161,
        "limit": 1,
        "page": 1
    },
    "data": {
        "3315513040": {
            "description": "This ship is a copy of Zaō and is suitable for Clan Battles only",
            "price_gold": 0,
            "ship_id_str": "PJSC934",
            "has_demo_profile": false,
            "images": {
                "small": "https://glossary-wows-global.gcdn.co/icons//vehicle/small/PJSC934_4ff33cd01dbf1be2998e56d24f0ebd229f96b0f45183925996660da926b0bb2b.png",
                "large": "https://glossary-wows-global.gcdn.co/icons//vehicle/large/PJSC934_afc0e6050cb8667ccbbdec78d2d3ae469cb2b6fa36273b5b1ffe61ab73a4b0e0.png",
                "medium": "https://glossary-wows-global.gcdn.co/icons//vehicle/medium/PJSC934_2c2bb6e0774ca0edd0eca62b7184eda48055b39327536d56d0ea63b4cd5055d9.png",
                "contour": "https://glossary-wows-global.gcdn.co/icons//vehicle/contour/PJSC934_d9d53f763ae68f55546167fec3c536e56c6dc5dfa301d2b0c08c3f35a44d505e.png"
            },
            "modules": {
                "engine": [
                    3272453840
                ],
                "torpedo_bomber": [],
                "fighter": [],
                "hull": [
                    3272355536
                ],
                "artillery": [
                    3273633488
                ],
                "torpedoes": [
                    3268816592,
                    3273010896
                ],
                "fire_control": [
                    3273043664
                ],
                "flight_control": [],
                "dive_bomber": []
            },
            "modules_tree": {
                "3268816592": {
                    "name": "Type93 mod. 3",
                    "next_modules": null,
                    "is_default": true,
                    "price_xp": 0,
                    "price_credit": 0,
                    "next_ships": null,
                    "module_id": 3268816592,
                    "type": "Torpedoes",
                    "module_id_str": "PJUT978"
                },
                "3273010896": {
                    "name": "Type F3",
                    "next_modules": [
                        3268816592
                    ],
                    "is_default": true,
                    "price_xp": 0,
                    "price_credit": 0,
                    "next_ships": null,
                    "module_id": 3273010896,
                    "type": "Torpedoes",
                    "module_id_str": "PJUT974"
                },
                "3272453840": {
                    "name": "Propulsion: 159,000 hp",
                    "next_modules": null,
                    "is_default": true,
                    "price_xp": 0,
                    "price_credit": 0,
                    "next_ships": null,
                    "module_id": 3272453840,
                    "type": "Engine",
                    "module_id_str": "PJUE975"
                },
                "3272355536": {
                    "name": "Zaō",
                    "next_modules": null,
                    "is_default": true,
                    "price_xp": 0,
                    "price_credit": 0,
                    "next_ships": null,
                    "module_id": 3272355536,
                    "type": "Hull",
                    "module_id_str": "PJUH975"
                },
                "3273043664": {
                    "name": "Type10 mod. 1",
                    "next_modules": null,
                    "is_default": true,
                    "price_xp": 0,
                    "price_credit": 0,
                    "next_ships": null,
                    "module_id": 3273043664,
                    "type": "Suo",
                    "module_id_str": "PJUS974"
                },
                "3273633488": {
                    "name": "203 mm/50 3rd Year Type No.2 in a triple turret",
                    "next_modules": null,
                    "is_default": true,
                    "price_xp": 0,
                    "price_credit": 0,
                    "next_ships": null,
                    "module_id": 3273633488,
                    "type": "Artillery",
                    "module_id_str": "PJUA974"
                }
            },
            "nation": "japan",
            "is_premium": false,
            "ship_id": 3315513040,
            "price_credit": 0,
            "default_profile": {
                "engine": {
                    "engine_id_str": "PJUE975",
                    "max_speed": 34.5,
                    "engine_id": 3272453840
                },
                "torpedo_bomber": null,
                "anti_aircraft": {
                    "slots": {
                        "0": {
                            "distance": -1.0,
                            "avg_damage": 99,
                            "caliber": 40,
                            "name": "40 mm/60 Type 5 on a twin mount",
                            "guns": 9
                        },
                        "1": {
                            "distance": -1.0,
                            "avg_damage": 36,
                            "caliber": 25,
                            "name": "25 mm/60 Type 96 on a triple mount",
                            "guns": 11
                        },
                        "2": {
                            "distance": -1.0,
                            "avg_damage": 36,
                            "caliber": 25,
                            "name": "25 mm/60 Type 96 on a single mount",
                            "guns": 20
                        },
                        "3": {
                            "distance": -1.0,
                            "avg_damage": 124,
                            "caliber": 100,
                            "name": "100 mm/65 Type 98 on a Model A mount",
                            "guns": 6
                        }
                    },
                    "defense": 75
                },
                "mobility": {
                    "rudder_time": 7.7,
                    "total": 57,
                    "turning_radius": 840,
                    "max_speed": 34.5
                },
                "hull": {
                    "hull_id": 3272355536,
                    "hull_id_str": "PJUH975",
                    "torpedoes_barrels": 4,
                    "anti_aircraft_barrels": 46,
                    "range": {
                        "max": 203,
                        "min": 16
                    },
                    "health": 44900,
                    "planes_amount": null,
                    "artillery_barrels": 4,
                    "atba_barrels": 6
                },
                "atbas": {
                    "distance": 7.3,
                    "slots": {
                        "0": {
                            "burn_probability": 6.0,
                            "bullet_speed": 1000,
                            "name": "100 mm HE Type98",
                            "shot_delay": 3.0,
                            "damage": 1700,
                            "bullet_mass": 13,
                            "type": "HE",
                            "gun_rate": 20.0
                        }
                    }
                },
                "artillery": {
                    "max_dispersion": 136,
                    "shells": {
                        "AP": {
                            "burn_probability": null,
                            "bullet_speed": 920,
                            "name": "203 mm AP Type92",
                            "damage": 5400,
                            "bullet_mass": 155,
                            "type": "AP"
                        },
                        "HE": {
                            "burn_probability": 19.0,
                            "bullet_speed": 920,
                            "name": "203 mm HE Type1",
                            "damage": 3400,
                            "bullet_mass": 155,
                            "type": "HE"
                        }
                    },
                    "shot_delay": 13.0,
                    "rotation_time": 36.0,
                    "distance": 16.2,
                    "artillery_id": 3273633488,
                    "artillery_id_str": "PJUA974",
                    "slots": {
                        "0": {
                            "barrels": 3,
                            "name": "203 mm/50 3rd Year Type No.2 in a triple turret",
                            "guns": 4
                        }
                    },
                    "gun_rate": 4.4
                },
                "torpedoes": {
                    "visibility_dist": 1.8,
                    "distance": 8.0,
                    "torpedoes_id": 3273010896,
                    "torpedo_name": "Type F3",
                    "reload_time": 104,
                    "torpedo_speed": 76,
                    "rotation_time": 7.2,
                    "torpedoes_id_str": "PJUT974",
                    "slots": {
                        "0": {
                            "barrels": 5,
                            "caliber": 610,
                            "name": "610 mm Quintuple",
                            "guns": 4
                        }
                    },
                    "max_damage": 21366
                },
                "fighters": null,
                "fire_control": {
                    "fire_control_id": 3273043664,
                    "distance": 16.2,
                    "distance_increase": 0,
                    "fire_control_id_str": "PJUS974"
                },
                "weaponry": {
                    "anti_aircraft": 75,
                    "aircraft": 0,
                    "artillery": 80,
                    "torpedoes": 64
                },
                "battle_level_range_max": 11,
                "battle_level_range_min": 10,
                "flight_control": null,
                "concealment": {
                    "total": 57,
                    "detect_distance_by_plane": 7.5,
                    "detect_distance_by_ship": 12.2
                },
                "armour": {
                    "casemate": {
                        "max": -1,
                        "min": -1
                    },
                    "flood_prob": 19,
                    "deck": {
                        "max": -1,
                        "min": -1
                    },
                    "flood_damage": 25,
                    "range": {
                        "max": 203,
                        "min": 16
                    },
                    "health": 44900,
                    "extremities": {
                        "max": -1,
                        "min": -1
                    },
                    "total": 62,
                    "citadel": {
                        "max": -1,
                        "min": -1
                    }
                },
                "dive_bomber": null
            },
            "upgrades": [
                4260548528,
                4268937136,
                4262645680,
                4281520048,
                4278374320,
                4261597104,
                4220702640,
                4265791408,
                4269985712,
                4267888560,
                4266839984,
                4273131440,
                4275228592,
                4279422896,
                4259499952,
                4287811504,
                4257402800,
                4280471472
            ],
            "tier": 10,
            "next_ships": {},
            "mod_slots": 6,
            "type": "Cruiser",
            "is_special": true,
            "name": "[Zaō]"
        }
    }
}

I limited the output to 1 to make it better to look at. So now back to my problem, i am trying to access the data part but it wont let me. In the data part there are all entries of the data i want to get with this api. But it’s not a list so i cannot access it. Is there a way of solving this problem?

Answers

- TimGabrikowski
- April 18, 2023 at 10:16 am
- 0 votes
0
In Javascript at least, you can iterate over the properties of an object like so:
```
for(let property in result.data) {}
```
Where property is a string with the value of the property key. You can then get that property like so:
```
let ship = result.data[property];
```
In Square Brackets like if it is an array.

You can define a function to return an array with your ships like this:
```
function getShips(input) {
    let ships = [];

    for(let property in input.data) {
        let ship = {
            key: property,
            data: input.data[property],
        }

        ships.push(ship);
    }
    return ships;
}
```
This function returns a list of the ships that looks like this:
```
[
    {
        "key": "3315513040",
        "data": {
            "description": "...",
            ...
        }
    }
]
```
I know my samples are in javascript and not typescript like your angular project but I am sure that it will work. If not, it will give you an idea on what to search and try.

EDIT:
Call the function in your Page.ts file search() function:
```
search() {
    this.api.getShips(7).subscribe(result=>{
      console.log(result);
      let ships = getShips(result);
      this.shipsData = result;
      this.shipsData.data = ships // replace the data "array" with a propper array from the function
      console.log(this.shipsData)
    });
  }
```
Login or Signup to reply.

- ent30
- April 18, 2023 at 10:18 am
- 0 votes
0
There are multiple ways to iterate over an object:
1. using Object.keys()
  This will give you an array of the keys
```
const response = JSON.parse(/*your json object*/)

// or response.data if your interested in these keys
const responseKeys = Object.keys(response) 
responseKeys.forEach(k => console.log(response[k]))
```
1. Use for-in loop
  for-in loops directly over keys of an object
```
const response = JSON.parse(/*your json object*/)

for(responseKey in response) {
  console.log(responseKey)
}
```
1. You can iterate over keys and values at the same time using Object.entries()
```
const response = JSON.parse(/*your json object*/)

for (const [key, value] of Object.entries(response)) {
   console.log(`${key}: ${value}`);
}
```
Login or Signup to reply.

Please signup or login to give your own answer.

Click here to cancel reply.

Can i turn this json object into a list i can access or can i access it like this – Html

Answers