question

vishnu kausik avatar image
vishnu kausik asked ·

Transfer API data from Index.js to APL's JSON file

hey guys,

I'm kinda new to Alexa developer and I got a doubt.

this is the code I have in the Index.js as well as my APL code

1626782174079.jpeg

I have blacked out the API key :P

this is what the API link displays:

1626781277616.png

Now How do I extract the "URL" part at the last line of the returned data and place it in my source section to my APL code?

what will make me extract the API's "URL" property from my index.js and put it in my source section of my APL code?


Regards

PS. it would be really helpful if the community can help me with this. Been scratching my head for the past week with this :/

alexa skills kitapiecho showapl
1626781277616.png (120.2 KiB)
1626782174079.jpeg (148.0 KiB)
10 |2000 characters needed characters left characters exceeded

Up to 2 attachments (including images) can be used with a maximum of 512.0 KiB each and 1.0 MiB total.

1 Answer

Alexander Martin avatar image
Alexander Martin answered ·

Hi @vishnu kausik,


I have not tested this part, but it should work.

// store return value of getRemoteData as JSON
const data = await getRemoteData('https://api.nasa.gov/planetary/apod?api_key=...').then(JSON.parse); // maybe you should still check/handle possible error cases here
const outputSpeech = `the astronomy picture of the day is by ${data.copyright}. ${data.explanation}`;


if (aplHelper.supportsAPL(handlerInput)) {
  handlerInput.responseBuilder.addDirective({
    type: 'Alexa.Presentation.APL.RenderDocument',
    token: 'ImageToken',    
    document: require('./apl/layouts/APOD.json'),
    datasources: {
      astronomyPicture: {
        type: 'object',
        properties: {
          url: data.url // pass url from JSON response to APL document
        }
      }
    }
  });
}


return handlerInput.responseBuilder.speak(outputSpeech).getResponse();

In your APL document you have access to the defined datasources via the payload parameter. You can then read out the URL for your image in this way:

{
  type: "Image",
  source: "${payload.astronomyPicture.properties.url}"
}

Learn more about Datasources here.


Hope this helps.


Regards, Alex

1 comment
10 |2000 characters needed characters left characters exceeded

Up to 2 attachments (including images) can be used with a maximum of 512.0 KiB each and 1.0 MiB total.

Just tested it out and it works great. Thank you mate!

Regards, Vishnu

0 Likes 0 ·