Hello, I have this lightning data table and I want to display my respond from an API but I can't figure out how to match values to the right columns.  I tried fetching from lwc that did not work. Appreciate any help. 
 

JAVa Script

const columns = [
    { label: 'ID', fieldName: 'id' },
    { label: 'image', fieldName: 'imageType' },
    { label: 'title', fieldName: 'title', type: 'name' },
    { label: 'ready', fieldName: 'readyInMinutes', type: 'number' },
    { label: 'Serving', fieldName: 'servings' },
    { label: 'sourceURL', fieldName: 'sourceUrl' },

];

export default class bitsin extends LightningElement {
columns = columns;
data;
  
connectedCallback(){
    CallOut().then(
        result => {
            this.data = result;
                console.log('THIS THE SUCCESS MES ' + result);
        }
   ).catch( error => {
        console.error('this is the error ' + error);
   })
}

}

 

HTML 

<template>
    <div class="slds-var-m-around_small">
        <div style="height: 300px;">
            <lightning-datatable
                    key-field="id"
                    data={data}
                    hide-checkbox-column
                    columns={columns}>
            </lightning-datatable>
        </div>
                    </div>
</template>

 

Apex class

public with sharing class CallOut {
    
    @AuraEnabled(cacheable=true)
    public static string spoonacular(){
        
        Http http = new Http();
        HttpRequest request = new HttpRequest();
        string endpoint =  ''URLSAMPLE;
        request.setEndpoint(endpoint);
        request.setMethod('GET');
        httpResponse response = http.send(request);
        string donus;
        Integer statusCode = response.getStatusCode();
        if( statusCode == 200) {
           donus = response.getBody();
           system.debug('responsee ' + response.getBody());
        } else {
            system.debug('RESPOnse: ' + response.getBody());
        }

        return donus;
        

    }

       
}

 

JSON return

[
    {
        "id": 209128,
        "imageType": "jpg",
        "title": "Dinner Tonight: Grilled Romesco-Style Pork",
        "readyInMinutes": 45,
        "servings": 4,
        "sourceUrl": "http://www.seriouseats.com/recipes/2008/07/grilled-romesco-style-pork-salad-recipe.html"
    },
    {
        "id": 31868,
        "imageType": "jpg",
        "title": "Dinner Tonight: Chickpea Bruschetta",
        "readyInMinutes": 45,
        "servings": 2,
        "sourceUrl": "http://www.seriouseats.com/recipes/2009/06/dinner-tonight-chickpea-bruschetta-babbo-nyc-recipe.html"
    },
..... and so on