getCustomersFromAPICall(): CustomerModel[] {
setTimeout(()=> {
return this.dataFromAPICall = [
{
firstName: 'Nintendo',
lastName: 'Switch',
caseID: 123,
employeeNumber: 1234,
photo: 'https://t4.ftcdn.net/jpg/02/90/27/39/360_F_290273933_ukYZjDv8nqgpOBcBUo5CQyFcxAzYlZRW.jpg',
displayCaseCode: '15',
reasonName: '1C',
frequencyType: FrequencyType.Intermittent,
emailAddress: 'NJ',
networkID: 'ABC',
caseState: CaseState.Open,
requestDate: new Date('12/12/2012'),
startDate: new Date('12/01/1990'),
endDate: new Date('12/01/2000'),
lastUpdated: new Date('1/1/1991')
},
{
firstName: 'Nintendo',
lastName: 'Switch',
caseID: 124,
employeeNumber: 1234,
photo: 'https://t4.ftcdn.net/jpg/02/90/27/39/360_F_290273933_ukYZjDv8nqgpOBcBUo5CQyFcxAzYlZRW.jpg',
displayCaseCode: '15',
reasonName: '1C',
frequencyType: FrequencyType.Continuous,
emailAddress: 'NJ',
networkID: 'ABC',
caseState: CaseState.Closed,
requestDate: new Date('12/12/2012'),
startDate: new Date('12/01/1990'),
endDate: new Date('12/01/2000'),
lastUpdated: new Date('1/1/1991')
},
{
firstName: 'Nintendo',
lastName: 'Switch',
caseID: 125,
employeeNumber: 1234,
photo: 'https://t4.ftcdn.net/jpg/02/90/27/39/360_F_290273933_ukYZjDv8nqgpOBcBUo5CQyFcxAzYlZRW.jpg',
displayCaseCode: '15',
reasonName: '1C',
frequencyType: FrequencyType.Intermittent,
emailAddress: 'NJ',
networkID: 'ABC',
caseState: CaseState.Closed,
requestDate: new Date('12/12/2012'),
startDate: new Date('12/01/1990'),
endDate: new Date('12/01/2000'),
lastUpdated: new Date('1/1/1991')
},
{
firstName: 'Storm',
lastName: 'Kevin',
caseID: 123,
employeeNumber: 1239,
photo: 'https://t4.ftcdn.net/jpg/02/90/27/39/360_F_290273933_ukYZjDv8nqgpOBcBUo5CQyFcxAzYlZRW.jpg',
displayCaseCode: '15',
reasonName: '1C',
frequencyType: FrequencyType.Intermittent,
emailAddress: 'NJ',
networkID: 'ABC',
caseState: CaseState.Open,
requestDate: new Date('12/12/2012'),
startDate: new Date('12/01/1990'),
endDate: new Date('12/01/2000'),
lastUpdated: new Date('1/1/1991')
},
{
firstName: 'Scott',
lastName: 'Summer',
caseID: 124,
employeeNumber: 1235,
photo: 'https://t4.ftcdn.net/jpg/02/90/27/39/360_F_290273933_ukYZjDv8nqgpOBcBUo5CQyFcxAzYlZRW.jpg',
displayCaseCode: '15',
reasonName: '1C',
frequencyType: FrequencyType.Continuous,
emailAddress: 'NJ',
networkID: 'ABC',
caseState: CaseState.Closed,
requestDate: new Date('12/12/2012'),
startDate: new Date('12/01/2000'),
endDate: new Date('12/01/2001'),
lastUpdated: new Date('1/1/2005')
},
{
firstName: 'Victor',
lastName: 'Von Doom',
caseID: 125,
employeeNumber: 1236,
photo: 'https://t4.ftcdn.net/jpg/02/90/27/39/360_F_290273933_ukYZjDv8nqgpOBcBUo5CQyFcxAzYlZRW.jpg',
displayCaseCode: '15',
reasonName: '1C',
frequencyType: FrequencyType.Intermittent,
emailAddress: 'NJ',
networkID: 'ABC',
caseState: CaseState.Open,
requestDate: new Date('12/12/2012'),
startDate: new Date('12/01/2010'),
endDate: new Date('12/01/2005'),
lastUpdated: new Date('1/1/2009')
},
{
firstName: 'Bruce',
lastName: 'Banner',
caseID: 126,
employeeNumber: 1237,
photo: 'https://t4.ftcdn.net/jpg/02/90/27/39/360_F_290273933_ukYZjDv8nqgpOBcBUo5CQyFcxAzYlZRW.jpg',
displayCaseCode: '15',
reasonName: '1C',
frequencyType: FrequencyType.Continuous,
emailAddress: 'NJ',
networkID: 'ABC',
caseState: CaseState.Open,
requestDate: new Date('12/12/2012'),
startDate: new Date('05/01/1990'),
endDate: new Date('01/01/1000'),
lastUpdated: new Date('1/1/2021')
},
{
firstName: 'Peter',
lastName: 'Parker',
caseID: 127,
employeeNumber: 1238,
photo: 'https://t4.ftcdn.net/jpg/02/90/27/39/360_F_290273933_ukYZjDv8nqgpOBcBUo5CQyFcxAzYlZRW.jpg',
displayCaseCode: '15',
reasonName: '1C',
frequencyType: FrequencyType.Continuous,
emailAddress: 'NJ',
networkID: 'ABC',
caseState: CaseState.Closed,
requestDate: new Date('12/12/2012'),
startDate: new Date('08/01/2015'),
endDate: new Date('01/01/1000'),
lastUpdated: new Date('10/1/2022')
}
];
}, 2000);
return this.dataFromAPICall;
}
With this code, i do not seem to be getting the desired results
findEmployee() {
//debugger;
this.searchEmployeeList = this.getCustomersFromAPICall();
if I remove the setTimeout, it works fine but I wanted to test the UI if the network was slow by adding a setTimeout()
CodePudding user response：
Your code is correctly return an empty value
It would be easier for you if you replaced the lengthy object with a smaller one, and trimmed your variable/function names. You would instantly recognise that this is incorrect:
getCustomers(){
setTimeout(()={
return this.data = [{ test: 1 }]
})
return this.data
}
Your function sets up a timeout, but immediately returns the current value of this.data. That is why you are getting nothing back - you are getting the value of this.data before you have added the elements to it.
What you probably want is an asynchronous function
Look into promises: how to create them and how to return them.
See if you can design an asynchronous function: this can return a promise, rather than an actual value. The promise can later resolve into the actual value. For example, this could be after a delay controlled by setTimeout.
CodePudding user response：
Try using Promises...
const customerFixture: CustomerModel[] = {
...
employeeNumber: 1234,
endDate: new Date('12/01/2000'),
lastUpdated: new Date('1/1/1991'),
...
}
getCustomersFromAPICall(): Promise<CustomerModel[]> {
// Here you return a promise that be resolve in 2 seconds (2000 in milliseconds) with customers
return new Promise((resolve) =>
setTimeout(() => resolve(customerFixture), 2000),
);;
}
async findEmployee() {
//You should wait the promise to be solved using "await" word before the method call. Also to make this work you have to add "async" word before this method name.
this.searchEmployeeList = await this.getCustomersFromAPICall();
// try to log it
console.log(this.searchEmployeeList)
Another option if you dont want to use async/await would be
findEmployee() {
//In this case you dont block the thread waiting the two seconds to be solved
this.getCustomersFromAPICall().then(customers => {
this.searchEmployeeList = customers;
console.log(this.searchEmployeeList)
})
// try to log it