I'm struggling with a knockout js component.

Here is what I'm trying to do:

1- Get data from an external API 2- Load that data on my JS Component

So basically what is happening is that when I create a promise in order to get my data when it's resolved, the rest of the component is throwing an error because data was pending when reaching that part.

This is what I'm doing:

get API Data

getQuote: async function(uniqueid){
            let urlAjax = "http://myendpoint.com";
            const promise = new Promise((resolve, reject) => {
                    url: urlAjax ,
                    data: {unique: uniqueid},
                    method: "GET"
                }).done(response => {
                    console.log("ajax response: "+response)
            let result = await promise;
            return result;

Here when I debug the result before sending it is working fine.

Then I'm doing again a .then() and cactch() to ensure that data is ready

define(['jquery', 'uiComponent', 'ko','Magento_Customer/js/customer-data', 'mage/url'], function ($, Component, ko, customerData, url) {
    'use strict';
    return Component.extend({
        defaults: {
            template: 'Vendor_Application/application',
            bData: ko.observableArray([]),
            bSpouseData : ko.observableArray([]),
            quote_data: ''
        initialize: function () {
            var self = this;
            this.quote_data = this.getQuote(this.uniqueid).then((res) =>{ 
                console.log("res: "+res)
                return res; 
            //If I try to access data like this it does not work

So, of course, I'm doing something wrong, I would like to have enough knowledge in Magento to do this API call before the component is rendered, just like Vue, React or Angular does.

What can I do?

Thanks and greetings!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.