Coffee Shop

index.html

<h1>Coffee Shop</h1>

<h2>Food:</h2>
<ul id="foodlist"></ul>

<h2>Drink:</h2>
<ul id="drinklist"></ul>

main.dart

import 'dart:html';

class Menu {
  List<MenuItem> food;
  List<MenuItem> drink;
  
  Menu(this.food, this.drink);
  
  Menu.fromJson(Map<String, dynamic> json) {
    food = json["food"].map<MenuItem>((e) => MenuItem.fromJson(e)).toList();
    drink = json["drink"].map<MenuItem>((e) => MenuItem.fromJson(e)).toList();
  }
  
  @override
  toString() {
    return "Menu(food=$food, drink=$drink)";
  }
}

class MenuItem {
  String title;
  double price;
  int count;
  
  MenuItem(this.title, this.price, this.count);

  MenuItem.fromJson(Map<String, dynamic> json) {
    title = json["title"];
    price = json["price"];
    count = json["count"];
  }
  
  @override
  toString() {
    return "MenuItem($title, $price, $count)";
  }
}

getMenuList(List items) {
  return items.map((i) {
    LIElement li = LIElement();
    li.text = i.toString();
    return li;
  }).toList();
}

build (var data) {
  Menu menu = Menu.fromJson(data);
  Element foodList = querySelector('#foodlist');
  foodList.children.addAll(getMenuList(menu.food));
  
  Element drinkList = querySelector('#drinklist');
  drinkList.children.addAll(getMenuList(menu.drink));
}

void main() {
  Map<String, List> menuData = {
    "food": [
      {"title": "火腿堡", "price": 35.0, "count": 0},
      {"title": "香雞堡", "price": 40.0, "count": 0}
    ],
    "drink": [
      {"title": "鮮奶茶", "price": 30.0, "count": 0},
      {"title": "咖啡", "price": 35.0, "count": 0}
    ]
  };
  
  build(menuData);
}

View in DartPad:
https://dartpad.dartlang.org/a9e8068a0891801e78cc363f6268a79c