Ionic 我可以把这个JSON对象变成一个我可以访问的列表吗或者我可以像这样访问它吗

carvr3hs  于 2023-04-18  发布在  Ionic
关注(0)|答案(2)|浏览(137)

我试图访问这个json对象，以获取这个API的数据，通过ionic和angular显示，但它不让我访问json对象。REST API调用正在工作，在控制台中，我得到了我想要的数据，但我无法访问它。
所以我想问是否有一种方法可以做到这一点，最好是作为一个列表？
下面是我的代码：
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>

JSON看起来像这样（我无法访问数据部分）：

{
    "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ō]"
        }
    }
}

我将输出限制为1，以便更好地查看。现在回到我的问题，我试图访问数据部分，但它不会让我。在数据部分，有我想用这个API获得的数据的所有条目。但它不是一个列表，所以我不能访问它。有没有解决这个问题的方法？

ionic-framework

2条答案

按热度按时间
d7v8vwbk

d7v8vwbk1#

有多种方法可以迭代对象：
1.使用Object.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.使用for-in loop
for-in直接在对象的键上循环

const response = JSON.parse(/*your json object*/)

for(responseKey in response) {
  console.log(responseKey)
}

1.您可以使用Object.entries()同时迭代键和值

const response = JSON.parse(/*your json object*/)

for (const [key, value] of Object.entries(response)) {
   console.log(`${key}: ${value}`);
}
赞(0）分享  回复(0）举报  2023-04-18
ru9i0ody

ru9i0ody2#

至少在Javascript中，你可以像这样迭代对象的属性：

for(let property in result.data) {}

其中property是一个字符串，其值为属性key。然后可以像这样获取该属性：

let ship = result.data[property];

在方括号中，就像它是一个数组。
你可以定义一个函数来返回一个包含你的船的数组，像这样：

function getShips(input) {
    let ships = [];

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

        ships.push(ship);
    }
    return ships;
}

这个函数返回一个类似于下面的船只列表：

[
    {
        "key": "3315513040",
        "data": {
            "description": "...",
            ...
        }
    }
]

我知道我的示例是用javascript编写的，而不是像你的angular项目那样使用typescript，但我确信它能工作。如果不能，它会给予你一个搜索和尝试的想法。
编辑：调用Page.ts文件中的函数search()函数：

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)
    });
  }
赞(0）分享  回复(0）举报  2023-04-18
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备2022004421号-2 NULL123 https://www.null123.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com