How to fetch JSON data from AJAX into a field?

[openbayou]

Hello,

I'm in the process of moving my site over from WordPress to Payload and so far it's going smoothly. However, I'm at a difficult junction where I'm making a block that gets JSON data and store them in a field. I have a block called 'Link' that's suppose to use AJAX to get JSON data. The link of the URL in the text field called 'urlLink' and get an API key from a global and then pass the url in that text to an AJAX function. The url for the AJAX is https://iframe.ly/api/iframely?url="urlfromtextfield"&api_key=keyfromsetting. Then take the title from the JSON output and put it in 'link-title' text field.

What's the best way to pass a URL from the field and get an API code from a field in a global and pass them to an API field and then pass the output to another field?

Here's my block:

`import type { Block } from 'payload'

export const blockLink: Block = {
slug: 'block-link',
interfaceName: 'blockLink',
labels: {
singular: 'Link',
plural: 'Link'
},
fields: [
{
name: 'urlLink',
type: 'text',
label: 'Link',
required: false,
},
{
name: 'link-title',
type: 'text',
label: 'Title',
required: false,
},
],
}`

And the global called settings

`import { GlobalConfig } from 'payload';

const Settings: GlobalConfig = {
slug: 'settings',
label: 'Settings',
admin: {
group: 'Admin',
},
fields: [
{
name: 'apiSettings',
label: 'API settings',
type: 'group', // Groups the fields together
fields: [
{
name: 'iframely_api',
label: 'iFramely API',
type: 'text',
admin: {
style: { padding: '20px', border: '1px solid var(--theme-elevation-100)', marginBottom: '25px' }, // Custom styling for the group
}
}
]
}
]
};

export default Settings;`