samples/external-api/app.html

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8" >
    <title>External API UI Extension Sample</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script>
    <link rel="stylesheet" href="https://contentful.github.io/ui-extensions-sdk/cf-extension.css">
    <script src="https://unpkg.com/contentful-ui-extensions-sdk@3"></script>
</head>

<body>
    <div class="cf-form-field">
        <select id="user-id" class="cf-form-input">
        </select>
        <div class="cf-form-hint">
            Get dummy user data from an external API.
        </div>
    </div>

    <script type="text/javascript">
        window.contentfulExtension.init(function (api) {
            api.window.startAutoResizer()
            var value = api.field.getValue()
            var serviceUri = "https://jsonplaceholder.typicode.com/users"

            $.ajax({
                url: serviceUri,
                type: "GET",
                crossDomain: true,
                dataType: "json",
                success: function (response) {
                    response.forEach(function (value) {
                        var option = document.createElement("option")
                        option.setAttribute("value", value.id)
                        option.innerText = value.name

                        $("#user-id").append(option)
                    })
                    $("#user-id").val(api.field.getValue())
                },
                error: function (xhr, status) {
                    console.log("Error fetching data. Status:", status)
                }
            })

            $("#user-id").on("input", function () {
                api.field.setValue(this.value)
            })
        })
    </script>
</body>

</html>