• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# Building a Food Data Model
2
3In real-world development, it is impractical to describe all aspects of food in code, including the food name and nutrition facts. This is where the food data model comes into the picture. With the food data model, you can store and manage data in a unified manner.
4
5
6![en-us_image_0000001267767897](figures/en-us_image_0000001267767897.png)
7
8
91. Create a folder named **model** and create a file named **FoodData.ets** therein.
10
11   ![en-us_image_0000001223127760](figures/en-us_image_0000001223127760.png)
12
132. Define a food data storage model, **FoodData**, and an enum variable, **Category**. The **FoodData** class contains **id**, **name**, **category**, **image**, **calories**, **protein**, **fat**, **carbohydrates**, and **vitaminC** attributes.
14   The ArkTS programming language is an extension of the TS language and also supports the TS syntax.
15
16   ```ts
17   enum Category  {
18     Fruit,
19     Vegetable,
20     Nut,
21     Seafood,
22     Dessert
23   }
24
25   let NextId = 0;
26   class FoodData {
27     id: string;
28     name: string;
29     image: Resource;
30     category: Category;
31     calories: number;
32     protein: number;
33     fat: number;
34     carbohydrates: number;
35     vitaminC: number;
36
37     constructor(name: string, image: Resource, category: Category, calories: number, protein: number, fat: number, carbohydrates: number, vitaminC: number) {
38       this.id = `${ NextId++ }`;
39       this.name = name;
40       this.image = image;
41       this.category = category;
42       this.calories = calories;
43       this.protein = protein;
44       this.fat = fat;
45       this.carbohydrates = carbohydrates;
46       this.vitaminC = vitaminC;
47     }
48   }
49   ```
50
513. Store food images in the **resources** > **base** > **media** directory. Use food names as the image names.
52
534. Create food resource data. Create **FoodDataModels.ets** in the **model** folder and declare the food composition array **FoodComposition** on the page. The following example creates two pieces of food data.
54
55   ```ts
56   const FoodComposition: any[] = [
57     { 'name': 'Tomato', 'image': $r('app.media.Tomato'), 'category': Category.Vegetable, 'calories': 17, 'protein': 0.9, 'fat': 0.2, 'carbohydrates': 3.9, 'vitaminC': 17.8 },
58     { 'name': 'Walnut', 'image': $r('app.media.Walnut'), 'category': Category.Nut, 'calories': 654 , 'protein': 15, 'fat': 65, 'carbohydrates': 14, 'vitaminC': 1.3 }
59     ]
60   ```
61
62   In real-world development, you can customize more data resources when needed. Use [Lazy Loading](../quick-start/arkts-rendering-control.md#lazy-loading) to load data if a large amount of food data is involved.
63
645. Create the **initializeOnStartUp** method to initialize the **FoodData** array. Export the **FoodData** class from **FoodData.ets**, and import **FoodData** and **Category** in **FoodDataModels.ets**.
65   ```ts
66   // FoodData.ets
67   export enum Category {
68    ......
69   }
70   export class FoodData {
71     ......
72   }
73   // FoodDataModels.ets
74   import { Category, FoodData } from './FoodData'
75
76   export function initializeOnStartup(): Array<FoodData> {
77     let FoodDataArray: Array<FoodData> = []
78     FoodComposition.forEach(item => {
79       FoodDataArray.push(new FoodData(item.name, item.image, item.category, item.calories, item.protein, item.fat, item.carbohydrates, item.vitaminC ));
80     })
81     return FoodDataArray;
82   }
83   ```
84
85
86The data resources for the diet application are now ready. You can continue to create a food category list by loading the data.
87