Prepopulate Multi-Part Webform fields from client side javascript API

I am trying to prepopulate fields in a multi-part webform. I make an api call on the first page and stick the response in a hidden field.

$.ajax({
    type: 'get',
    url:  '/api_helper.php',
    success: function(response) {
        // put the full response in a hidden field
        if ( $('input(name=api_resp)').length > 0 ) {
            $('input(name=api_resp)').val(response);
        }
    }
});

Then on each click to the next button, I wait a half second for the new fields to appear in the DOM and input the values for any matching field :

$('.webform-submission-form .webform-button--next').once().click(function (event) {
    api_resp = JSON.parse($('input(name=api_resp)').val());
    setTimeout(function() {
        var field_value = new Array(
            $('.form-item-address input') : api_resp('address') , 
            $('.form-item-phone input') : api_resp('phone') , 
            // more fields, some looping compound fields
        )

        // put values in fields
        for ( var $field in field_value ) {
            $field.val(field_value(field));
        }
    },500);
});

This works “okay” but has some cumbersome bits I haven’t shown related to compound fields.

The question

Is there a better way to do this? Instead of the method above, can I insert the values into the Drupal API when I make the API call?