Zyring Day 7 – displaying lists of apartments

[Note: These are more in-depth (read: tedious) write-ups of my experience with each section of the Zyring project, leading on from my intro post on Zyring. This is mostly for my own benefit but could conceivably be of use to someone doing the project.]

Getting a list of all apartments for a city

The aim of this tutorial was to retrieve the list of apartment data for each city and show it on the city page. This took me a little bit of time but there were no major problems, the instructions were clear. Just some syntax errors to fix and some reading up on $resource.

I now have some beautiful pages like this:

Screenshot for Redmond with a list of data

List of data for Redmond

Display a list of all apartments in each city

Unsurprisingly, in the next tutorial I have to clean up this mess I’ve vomited onto the HTML file, and display it in a more useful format. This uses the ng-repeat command I met in an earlier tutorial.

First I made a simple list of apartment titles, just to check I knew what I was doing:

<ul>
    <li>{{apartment.title}}</li>
</ul>

Then I had a think about what I’d actually want to display for each apartment. For a start, I went with:

  • title
  • thumbnail
  • floorplan
  • price
  • contact details
  • list of features

… basically everything except the location data, which I’ll think about how to display when I get on to the map stuff later.

This mostly went ok, except I need to work out how to extract all the list of features properly. At the moment I’m just extracting the first four items on the list:

<ul>
    <li>{{apartment.features[n]}}</li>
</ul>

This might be a better way to go anyway as the lists are quite long, but I still want to figure out how to extract all the items each time.

My pages now look like this:

List of data for Redmond, tidied up

Much tidier.

A definite improvement on last time.

After this I seem to have a choice of four different tutorials to tackle next! This will have to wait for a couple of days though.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s