Aurelia fetch client not receiving data from controller

Question

I'm trying to load a database in a controller(asp.net MVC) and then using the aurelia fetch client to load the data from the controller into the view but no data is being fetched by aurelia(view tables are empty which isn't the result when manually declaring an array of inputs)

EmployeesController(Controller)

using Microsoft.AspNetCore.Mvc;
using SPAproject.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;

namespace SPAproject.Controllers
{
    [Route("api/[controller]")]
    public class EmployeesController : Controller
    {
        private readonly EmployeesDbContext context;

        public EmployeesController(EmployeesDbContext context)
        {
            this.context = context;
        }

        [HttpGet]
        public IEnumerable<Employee> Get()
        {
            return context.Employees.ToList();
        }
    }
}

emp-api(where I'm fetching the data)

import { HttpClient } from 'aurelia-fetch-client';
import { inject } from 'aurelia-framework';

let latency = 200;
let id = 0;


@inject(HttpClient)
export class EmpAPI {
    isRequesting = false;

    constructor(http) {
        this.http = http;
        this.http.configure(config =>
                            config.useStandardConfiguration()
                                    .withDefaults({
                                        mode: 'cors'
                                   }
                                 )
                             );
        this.employees = [];

        http.fetch('/api/Employees')
            .then(x => x.json())
            .then(employees => this.employees = employees);


    }

    getEmployeeList() {
        this.isRequesting = true;
        return new Promise(resolve => {
            setTimeout(() => {
                let results = this.employees.map(x => {
                    return {
                        id: x.id,
                        firstName: x.firstName,
                        lastName: x.lastName,
                        email: x.email
                    }
                });
                resolve(results);
                this.isRequesting = false;
            }, latency);
        });
    }

    getEmployeeDetails(id) {
        this.isRequesting = true;
        return new Promise(resolve => {
            setTimeout(() => {
                let found = this.employees.filter(x => x.id == id)[0];
                resolve(JSON.parse(JSON.stringify(found)));
                this.isRequesting = false;
            }, latency);
        });
    }

    saveEmployee(employee) {
        this.isRequesting = true;
        return new Promise(resolve => {
            setTimeout(() => {
                let instance = JSON.parse(JSON.stringify(employee));
                let found = this.employees.filter(x => x.id == employee.id)[0];

                if (found) {
                    let index = this.employees.indexOf(found);
                    this.employees[index] = instance;
                } else {
                    instance.id = getId();
                    this.employees.push(instance);
                }

                this.isRequesting = false;
                resolve(instance);
            }, latency);
        });
    }
}

employee-list(where I'm trying to get the data to from API)

import { EventAggregator } from 'aurelia-event-aggregator';
import { EmpAPI } from 'emp-api';
import { inject } from 'aurelia-framework';
import { EmployeeUpdated } from 'employeeUpdated';
import { EmployeeViewed } from 'employeeViewed';

@inject(EmpAPI, EventAggregator)
export class EmployeeList {
    constructor(api, ea) {
        this.api = api;
        this.ea = ea;
        this.employees = [];

        ea.subscribe(EmployeeViewed, msg => this.select(msg.employee));
        ea.subscribe(EmployeeUpdated, msg => {
            let id = msg.employee.id;
            let found = this.employees.find(x => x.id == id);
            Object.assign(found, msg.employee);
        });
    }

    created() {
        this.api.getEmployeeList().then(employees => this.employees = employees);

    }

    select(employee) {
        this.selectedId = employee.id;
        return true;
    }
}

score 0 · Answer 1 · answered Feb 18 '19 at 22:28

0

Either you can use one of their wrapper methods like http.get('/api/Employees') in this case.

If you want to use fetch, then you need to specify a method http.fetch('/api/Employees', {method: 'GET'})

answered Feb 18 '19 at 22:28

peinearydevelopment

11,042
5
48
76

score 0 · Answer 2 · answered Feb 19 '19 at 12:06

The issue you see is because you didn't wait for your data to return. By the time your employee-list element is created, employees property in your EmpAPI is still undefined, as your data fetching call hasn't been returned yet.

I see that you have 200 ms latency to prevent this from happening, but sometimes maybe that is not enough (I suspect this). Maybe you can try a different latency if you want to keep this strategy? There are different ways to do this, like only resolve the getEmployeeList() promise only when the data fetching call has already been resolved, delay the call further, wait for the call etc.

Aurelia fetch client not receiving data from controller

2 Answers2