This is a listing of places to stay in Albuquerque, NM. It has various listings available for different purposes. These include Fort Marcy Hotel Suites (Listing ID: 895688) and Hampton Inn Albuquerque Downtown/University Area (Listing ID: 919620).
The Fort Marcy Hotel Suites is an upscale hotel that offers family-friendly facilities and a business center with a computer workstation. This beautiful hotel suite is located near the airport, making it easy to enjoy the area's many attractions from your home base. The Hampton Inn Albuquerque Downtown/University Area provides easy access to those attending conferences or events at Ernest N. Morial Convention Center.
Now, let's build what we want to see in the view: a listing of hotels with their reviews and ratings, as shown in Figures 4-8.
Figure 4-8: Hotel listing page built using AMP Components
Since we can't create our custom HTML tags, the only choice is to leverage existing tags provided by AMP components and make sense of them using JS code. We'll make use of two components: amp-list and amp-list-item.
Amp-list will display the hotels and the reviews along with their ratings. We can further enhance this component by loading the data asynchronously using JS, allowing for a smooth, fast load.
Amp-list-item will be responsible for displaying both a hotel highlight and a review snippet for it, as shown in Figures 4-9.
We'll use a new variable named h to hold the current hotel ID. We'll also be changing a couple of other variables, as outlined in Table 4-2.
Content JSON content that gets loaded by JS. This is essentially the same as the original JSON data, with a slight modification of removing the nested reviews property. We only need the hotel's name and its rating. Every hotel will have an additional AMP HTML tag that specifies its overall rating score on two separate lines (rating_1 and rating_2).