8 Working with data
This chapter covers
- How to use observable objects and observable arrays
- How to automatically update UI elements when observables change their value
- How a device’s local storage can be used to save data
In the last few chapters, you took a deeper dive into creating apps with NativeScript through the lens of the Tekmo app. You learned how to design multi-page apps, navigate between pages, and how to organize and style your UI using layouts and CSS. In the Tekmo app, a lot of time was spent duplicating UI elements: take the products page as an example (figure 8.1).
Figure 8.1 The products page from the Tekmo app, showing several hard-coded products.
Each of the products was hard-coded in the product page’s XML file. Yeah, it’s only six products, but what if there were dozens of products. Better yet, what if the products changed on a regular basis? In fact, updating hard-coded UI elements would become cumbersome rather quickly.
Let’s take a different approach: imagine that we pulled the product listings for the Tekmo app from a file, database, or publically-accessible API endpoint? After retrieving this data, we could update the product listing with the retrieved data. This would allow us to write less code and our app would be more dynamic because we’re no longer hard-coding everything.