Back

Marvel superheroes example

In this example you can check how Generic UI grid is utilized with complex JSON file. The grid displays Marvel superheroes and some of their most interesting information e.g.name, real name, powers, comic count. The construction of the grid is straightforward simply pass the data to the source input and compose columns.

The data is displayed in various ways e.g. links, checkboxes, chips. All configured in the columns input via view attribute. Moreover, for better view the grid has paging enabled. It gives the grid ability to display between 10 to 200 items per page. Displayed items can be changed, by clicking on the 'Items per page' select element, found at the bottom of the grid. Paging is easily configured with the paging input.

Even with compound data, the grid is simple and easy to use. You can find the source code of this example at the bottom of the page.

Source code

This the source code of Marvel example. The field in the columns options is used to get desired value of an object. It is mostly simple function that queries the JSON file to get the specific value. The grid also gives the option to filter data directly from the base code. See the Author Lee header.The field function verifies if the comic was made by 'Stan Lee'.

app.component.html
app.component.ts
MarvelCharsResource
marvel.json
<gui-grid [columns]="columns"
		  [source]="source"
		  [paging]="paging">
</gui-grid>
import { Component, OnInit } from '@angular/core';
import { MarvelCharsResource } from './marvel-chars.resource';
import { GuiColumn, GuiPaging } from '@generic-ui/ngx-grid';

@Component({
	selector: 'gw-example-marvel-grid',
	templateUrl: './example-marvel-grid.component.html',
	styleUrls: ['./example-marvel-grid.component.scss']
})
export class ExampleMarvelGridComponent implements OnInit {

	columns: Array<GuiColumn> = [
		{
			header: 'Name',
			field: 'name',
			width: 250
		}, {
			header: 'Real name',
			field: (a: any) => {
				if (a.secretIdentities) {
					return a.secretIdentities[0];
				}
			},
			width: 250
		}, {
			header: 'Powers',
			field: 'powers'
		}, {
			header: 'Comic Count',
			field: (item) => item.ranking.comicCount,
			view: 'Chip',
			type: GuiDataType.NUMBER,
			width: 100
		}, {
			header: 'Series count',
			field: (item) => item.ranking.serieCount,
			type: GuiDataType.NUMBER,
			width: 100
		}, {
			header: 'Stories count',
			field: (item) => item.ranking.storyCount,
			type: GuiDataType.NUMBER,
			width: 100
		}, {
			header: 'Author Lee',
			field: (item: any) => {
				return (item.authors.findIndex((i) => i === 'Stan Lee') >= 0);
			},
			view: 'Checkbox',
			width: 100
		}, {
			header: 'Wiki',
			field: (a: any) => a.urls.wikipedia,
			view: 'link'
		}, {
			header: 'Description',
			field: 'description'
		}];

	source = this.marvelCharsResource.getCharacters();

	paging: GuiPaging = {
		page: 1,
		pageSize: 100,
		pageSizes: [10, 50, 100, 200]
	};

	constructor(private marvelCharsResource: MarvelCharsResource) {
	}

	ngOnInit() {
	}

}
import { Injectable } from '@angular/core';

import * as rawStats from './marvel.json';

@Injectable()
export class MarvelCharsResource {

	private characters: Array<any>;

	constructor() {
		this.prepareData();
	}

	getCharacters(): Array<any> {
		return this.characters;
	}

	private prepareData(): void {

		const results = (rawStats as any).chars;

		this.characters = results;
	}

}
{
	"chars": [
		{
			"aliases": [
				"Ben Reilly",
				"Dusk",
				"Hornet",
				"Peter Parker",
				"Prodigy",
				"Ricochet",
				"Scarlet Spider",
				"Spider-Man",
				"Spiderman",
				"Spidey",
				"Tiger",
				"Wallcrawler",
				"Web-slinger",
				"Webhead"
			],
			"authors": [
				"Stan Lee",
				"Steve Ditko"
			],
			"description": "Bitten by a radioactive spider, high school student Peter Parker gained the speed, strength and powers of a spider. Adopting the name Spider-Man, Peter hoped to start a career using his new abilities. Taught that with great power comes great responsibility, Spidey has vowed to use his powers to help people.",
			"images": {
				"background": "http://i.annihil.us/u/prod/marvel/i/mg/6/90/537ba2184e75f.gif",
				"thumbnail": "http://i.annihil.us/u/prod/marvel/i/mg/9/30/538cd33e15ab7/standard_xlarge.jpg"
			},
			"name": "Spider-Man",
			"powers": [
				"Agility",
				"Genius",
				"Genius-level intellect",
				"Precognitive",
				"Precognitive spider-sense",
				"Speed",
				"Spider-sense",
				"Superhuman strength"
			],
			"ranking": {
				"comicCount": 2593,
				"eventCount": 29,
				"pageviewCount": 89463,
				"serieCount": 537,
				"storyCount": 4197
			},
			"secretIdentities": [
				"Peter Benjamin Parker"
			],
			"urls": {
				"marvel": "http://marvel.com/characters/54/spider-man",
				"wikipedia": "https://en.wikipedia.org/wiki/Spider-Man"
			}
		},
...rest of the JSON data