Web Applications

Exercise: API and JavaScript model

Inspect the JSON API. Note URLs used to get list and get item with particular identifier.

Download the starting file and finish the implementation. There are multiple TODOs in multiple groups 1), 2), 3), 4). Navigate to the following slides to get additional information for each group. Do not continue to the next group before you completely finish the previous one.

You can use your local machine.

TODO 1)

Finish implementation of the Model class. You should be able to:

• fetch a list of all items
• fetch an item for given identifier

Use 'Developer tools' to test your implementation. You can open 'Console' tab and execute JavaScript code directly. Try following code:

let model = new Model();
model.fetchList();
    

TODO 2)

Implement methods in the 'Presenter' class. The presenter is responsible for preparing page content in the 'mount' method. You need to fetch data using the Model. Once data are ready you need to call the right methods on the 'view'.

Employ 'console.log' and Developer tools to test the functionality. Your console should look like this:

18:25:27.... .... Loading started.
18:25:29.... .... New item: 001
....
18:25:30.... .... {id: '002', first_name: 'Derek', last_name: 'Pleass', email: 'dpleass1@state.gov', ip_address: '99.206.214.159'}
....
18:25:32.... .... Loading completed.
    

Full data would be too long, that is why this is only a sample.

Advanced: Load details in parallel.

TODO 3)

Implement all TODOs in view class.

TODO 4)

Add support for client-side filtering. After all data are loaded user can filter items using the input box ('input#search'). Till that time the input should be disabled. In the 'onMount' function register 'input' event handler () for the input 'search'. Show only items in which 'first_name' contains the user query (value of input#search).

You can change code around to get effective implementation.

Advanced: Handle filtering using 'onSearch' method in the 'Presenter' class.