Read a JSON from AWS S3 Using JavaScript

Question

I have this link to an AWS S3 bucket, which automatically downloads the JSON I need. Just to clarify, the JSON isn't displayed on the web page itself. I want to load the data into JavaScript from the link I currently have. I've tried using the following function below, but it hasn't worked. The URL is from AWS-transcribe.

function httpGetAsync(theUrl, callback)
{
    var xmlHttp = new XMLHttpRequest();
    xmlHttp.onreadystatechange = function() {
        if (xmlHttp.readyState == 4 && xmlHttp.status == 200)
            callback(xmlHttp.responseText);
    }
    xmlHttp.open("GET", theUrl, true); // true for asynchronous
    xmlHttp.send(null);
}

Does anyone know how to get a JavaScript object from this URL?

Answer 1

You can use the new ES6 fetch API to send a HTTP request and parse the stringified JSON response.

1. Using ES2017 async-await

const url = `https://s3.us-west-2.amazonaws.com/aws-transcribe-us-west-2-prod/165208660162/16/asrOutput.json?X-Amz-Security-Token=FQoDYXdzEBkaDNEU%2BEwhAVoss9PKYyK3A2qPjQJuSJOukAWY%2BTcHUY8vJoq9xQdb2%2FwEYalKy2uDvgEo03cgqeGAp%2Bjg7WGLNi4nr%2Bv5K2yOYMNG1WNmjbC8pWWArkrgGwCr8%2FXLZCxgziieoi1nV9BToNYEaSXI%2BpUR2w50o1T7a%2FY%2FQkL6hBO%2BIr3%2Fr9KYtWk%2BvC5dJryzW%2BxuHjXVv3SP%2F3SsYrqMuFLgqWct3Msvo37or4S7IxGDg6wcFzutLLQ2RrNXXa77oZJ3C%2BLn7t%2FTmthj3IJXT%2F8%2FlNEYMGc6WUG6aEqC%2F3iQmq6Pg6HDNRYQytIg0OelRhBJ7PzF0spwssUo2ZnuuRQKu%2B%2BuFbnp1Ne2B9PNDDIRRQF1bHKydwRiI%2BfIBH%2FRk3SnFH6dzppvdQjjOlZQzaVYsEE4aWJZ1UA%2FGtZlwID%2FU301m3XjdNebnH%2FgeCCrRKs1U51obmXyXeNP0veCXzgFexrf6JApN7bRrBOpWNp%2BlBXXeHI0YPa07zL62JerTwbLmSXzxbqbMSjso0t2LygCWhvsKXry5gig06%2FtyuLf%2Fxi0GRKKrDlpR2Kg%2BHGE%2B1cCbxFT3jPaIZPy1ktScZpxMw89g0kojO7W1wU%3D&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Date=20180511T164920Z&X-Amz-SignedHeaders=host&X-Amz-Expires=900&X-Amz-Credential=ASIAJHSTNMRIX5LPMVVQ%2F20180511%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Signature=586c9c3f4a1a755757e8cd20e77fa1318cf769fce71d3167a885b209d56e537f`;

async function downloadObject(url) {
  try {
    const fetchResponse = await fetch(url);
    return await fetchResponse.json();
  } catch (err) {
    console.error('Error - ', err);
  }
}

downloadObject(url);

2. Using chained then and catch blocks

const url = `https://s3.us-west-2.amazonaws.com/aws-transcribe-us-west-2-prod/165208660162/16/asrOutput.json?X-Amz-Security-Token=FQoDYXdzEBkaDNEU%2BEwhAVoss9PKYyK3A2qPjQJuSJOukAWY%2BTcHUY8vJoq9xQdb2%2FwEYalKy2uDvgEo03cgqeGAp%2Bjg7WGLNi4nr%2Bv5K2yOYMNG1WNmjbC8pWWArkrgGwCr8%2FXLZCxgziieoi1nV9BToNYEaSXI%2BpUR2w50o1T7a%2FY%2FQkL6hBO%2BIr3%2Fr9KYtWk%2BvC5dJryzW%2BxuHjXVv3SP%2F3SsYrqMuFLgqWct3Msvo37or4S7IxGDg6wcFzutLLQ2RrNXXa77oZJ3C%2BLn7t%2FTmthj3IJXT%2F8%2FlNEYMGc6WUG6aEqC%2F3iQmq6Pg6HDNRYQytIg0OelRhBJ7PzF0spwssUo2ZnuuRQKu%2B%2BuFbnp1Ne2B9PNDDIRRQF1bHKydwRiI%2BfIBH%2FRk3SnFH6dzppvdQjjOlZQzaVYsEE4aWJZ1UA%2FGtZlwID%2FU301m3XjdNebnH%2FgeCCrRKs1U51obmXyXeNP0veCXzgFexrf6JApN7bRrBOpWNp%2BlBXXeHI0YPa07zL62JerTwbLmSXzxbqbMSjso0t2LygCWhvsKXry5gig06%2FtyuLf%2Fxi0GRKKrDlpR2Kg%2BHGE%2B1cCbxFT3jPaIZPy1ktScZpxMw89g0kojO7W1wU%3D&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Date=20180511T164920Z&X-Amz-SignedHeaders=host&X-Amz-Expires=900&X-Amz-Credential=ASIAJHSTNMRIX5LPMVVQ%2F20180511%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Signature=586c9c3f4a1a755757e8cd20e77fa1318cf769fce71d3167a885b209d56e537f`;

const successCb = (resp) => {
    console.log(resp);
};

const errorCb = (err) => {
    console.error('Error - ', err);
};

function downloadObject(url, successCb, errorCb) {
    fetch(url)
      .then(response => response.json())
      .then(successCb)
      .catch(errorCb);
}

downloadObject(url, successCb, errorCb);