Monday, May 20, 2024
 Popular · Latest · Hot · Upcoming
116
rated 0 times [  118] [ 2]  / answers: 1 / hits: 33964  / 6 Years ago, tue, february 13, 2018, 12:00:00

I have an API call in api.js:





 export const getGraphData = (domain, userId, testId) => {
return axios({
url: `${domain}/api/${c.embedConfig.apiVersion}/member/${userId}/utests/${testId}`,
method: 'get',
});
};





I have a React helper that takes that data and transforms it.





import { getGraphData } from './api';

const dataObj = (domain, userId, testId) => {

const steps = getGraphData(domain, userId, testId)
.then((result) => {
return result.attributes;
});

console.log(steps);

// const steps = test.get('steps');
const expr = /select/;

// build array of steps that we have results in
const resultsSteps = [];

steps.forEach((step) => {
// check for types that contain 'select', and add them to array
if (expr.test(step.get('type'))) {
resultsSteps.push(step);
}
});

const newResultsSteps = [];

resultsSteps.forEach((item, i) => {
const newMapStep = new Map();
const itemDescription = item.get('description');
const itemId = item.get('id');
const itemOptions = item.get('options');
const itemAnswers = item.get('userAnswers');
const newOptArray = [];
itemOptions.forEach((element) => {
const optionsMap = new Map();
let elemName = element.get('value');
if (!element.get('value')) { elemName = element.get('caption'); }
const elemPosition = element.get('position');
const elemCount = element.get('count');

optionsMap.name = elemName;
optionsMap.position = elemPosition;
optionsMap.value = elemCount;
newOptArray.push(optionsMap);
});
newMapStep.chartType = 'horizontalBar';
newMapStep.description = itemDescription;
newMapStep.featured = 'false';
newMapStep.detailUrl = '';
newMapStep.featuredStepIndex = i + 1;
newMapStep.id = itemId;
newMapStep.isValid = 'false';
newMapStep.type = 'results';
const listForNewOptArray = List(newOptArray);
newMapStep.data = listForNewOptArray;
newMapStep.userAnswers = itemAnswers;
newResultsSteps.push(newMapStep);
});

return newResultsSteps;
};

export default dataObj;





The issue is steps, when logged outside the .then() returns a Promise {<pending>}. If I log results.attributes inside the .then(), I see the data fully returned.


More From » reactjs

 Answers
38

You need to wait until your async call is resolved. You can do this by chaining on another then:



getGraphData(domain, userId, testId)
.then((result) => {
return result.attributes;
})
.then(steps => {
// put the rest of your method here
});


You can also look at async/await if your platform supports it which would allow code closer to your original



const steps = await getGraphData(domain, userId, testId)
.then((result) => {
return result.attributes;
});

// can use steps here

[#55166] Sunday, February 11, 2018, 6 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
janettejordynm

Total Points: 550
Total Questions: 94
Total Answers: 98

Location: Senegal
Member since Fri, Aug 21, 2020
4 Years ago
janettejordynm questions
Tue, Nov 24, 20, 00:00, 4 Years ago
Sat, May 23, 20, 00:00, 4 Years ago
Mon, Apr 6, 20, 00:00, 4 Years ago
Tue, Feb 18, 20, 00:00, 4 Years ago
;