Question

我试图找到我能用我的知识水平理解的解决方案。但没有成功。我希望其他人可以从这个问题中受益。

目前我正在尝试了解如何通过接口和模型从不同的嵌套JSON文件中提供数据。对于我的例子，让我们说我计划将来有3个JSON文件。（items.json，characters.json，monsters.json）

首先，我想知道一个聪明的JSON结构是什么样的。（有许多示例教程，但我没有找到任何像我这样的特殊情况）

哪一个更聪明？

第一个变体：

{
    "wearable": {
        "torso": [
            {
                "name": "Schlachtrobe",
                "defense": 7,
                "price": 22
            }
        ],
        "head": [
            {
                "name": "stirnband",
                "defense": 2,
                "price": 50
            }
        ],
        "wrist": [
            // etc...
        ]
    },
    "weapons": [
        // etc...
    ],
    "consumables": [
        {
            "name": "Bonbon",
            "effect": "Heilt um 100 TP"
        },
        {
            "name": "Schokolade",
            "effect": "Heilt um 250 TP"
        }
    ]
}

第二种变体：

[
    {
        "id": 1,
        "category": "wearable",
        "type": "torso",
        "name": "Schlachtrobe",
        "defense": 7,
        "price": 22
    },
    {
        "id": 2,
        "category": "wearable",
        "type": "head",
        "name": "stirnband",
        "defense": 2,
        "price": 50
    },
    {
        "id": 3,
        "category": "consumables",
        "name": "Bonbon",
        "effect": "Heilt um 100 TP"
    },
    {
        "id": 4,
        "category": "consumables",
        "name": "Schokolade",
        "effect": "Heilt um 250 TP"
    }
]

第二种变体可以更轻松地将项目（例如在未来的monsters.ts中）附加到其他项目。在这种情况下，例如只需附上身份证号码。但是，每个项目必须使用相同的界面结构...然后，例如，＆＃34; Bonbon＆＃34;类别＆＃34;消耗品＆＃34;总是有一个空数字字段，称为＆＃34;防御＆＃34;这只是一个类似的例子。肯定会有更多空白的领域。

接口和模型是什么？我试着像这样解决这个问题：

items.interface.ts

export interface ItemsInterface {

}

export interface ArmorsInterface {
    name: string;
    defense: number;
    price: number;
}

export interface ConsumablesInterface {
    name: string;
    price: number;
    effect: string;
}

item.model.ts

export class ItemsModel implements ItemsInterface {


}

export class ArmorsModel implements ArmorsInterface {

    name: string;
    defense: number;
    price: number;

    constructor(obj?: any) {
        this.name = (obj && obj.name) ? obj.name : '';
        this.defense = (obj && obj.defense) ? obj.defense : '';
        this.price = (obj && obj.price) ? obj.price : '';
    }

}

export class ConsumablesModel implements ConsumablesInterface {

    name: string;
    price: number;
    effect: string;

    constructor(obj?: any) {
        this.name = (obj && obj.name) ? obj.name : '';
        this.price = (obj && obj.price) ? obj.price : '';
        this.effect = (obj && obj.effect) ? obj.effect : '';
    }

}

然后可以在服务中使用这些：

@Injectable()
export class ItemsService {

    private items;
    private _armors: BehaviorSubject<ArmorsInterface> = new BehaviorSubject(new ArmorsModel());
    private _consumables: BehaviorSubject<ConsumablesInterface> = new BehaviorSubject(new ConsumablesModel());

    constructor(private http: HttpClient) {
        this.loadItems();
    }

    get getArmors() {
        return this._armors.asObservable();
    }

    get getConsumables() {
        return this._consumables.asObservable();
    }

    loadItems() {
        this.http.get(`./assets/data/items.json`).subscribe((items: ItemsInterface) => {
            this.items = items;
            this._armors.next(new ArmorsModel(items));
            this._consumables.next(new ConsumablesModel(items));
        });
    }

}

服务肯定有很多错误。我还是个初学者。 ;）

最后您将如何使用该服务：

export class SiteHomeComponent implements OnInit {

    public armors: ArmorsInterface;

    constructor(private iS: ItemsService) {

    }

    ngOnInit() {
        // Returns the Data and write it in data
        this.iS.getArmors.subscribe((data) => {
            this.armors = data;
        });
    }

}

可以做得更好吗？或者你会以不同的方式做什么？我感谢所有帮助我认识到错误并学会如何正确行事的事情。感谢您的关注。：）

使用Interfaces＆amp; amp;中的最佳JSON结构和getData（）服务嵌套JSON的模型

0 个答案: