Accessing the JSON fulfillmentValue value

Question

I'm new to Vue and I'm using electron-vue boilerplate. I am trying to display some items in Amazon using Promise in NodeJS. I'm using "amazon-product-api" and yes, I have access to the Amazon Product Advertising API. I have written my code in a separate .js file and have linked in Vue component.

This is my function to get the ItemSearch using amazon-product-api,

// This function will take take idea and give stats in return
// @input string
// @return json
function getKeywordStats (keyword, searchType, delay, domain) {
  // Setting URL and headers for request
  if (searchType === 0) {
    searchType = 'KindleStore'
  } else {
    searchType = 'Books'
  }

  if (domain === 'com') {
    domain = 'webservices.amazon.com'
  } else if (domain === 'de') {
    domain = 'webservices.amazon.de'
  } else if (domain === 'uk') {
    domain = 'webservices.amazon.uk'
  }

  var query = {
    keywords: keyword,
    searchIndex: searchType,
    sort: 'relevancerank',
    itemPage: 1,
    availability: 'Available',
    responseGroup: 'Large',
    domain: domain
  }
  return new Promise(function (resolve, reject) {
    amazonClient.itemSearch(query, function (error, results) {
      if (error) {
        console.log(error)
      } else {
        var title = results[0].ItemAttributes[0].Title[0]
        var imageUrl = results[0].ItemAttributes[0].Title[0]
        var data = {
          title: title,
          imageUrl: imageUrl
        }
        // console.log(results)
        // var noCompetitors = results.ItemAttributes.Items.TotalResults
        resolve(data)
      }
    })
  })
}

This is my Vue component,

<template>
    <div class='hello'>
        <p> {{data}} </p>
    </div>
</template>

<script>
/* eslint-disable no-unused-vars */
// ebook data - 0
// book data - 1

var amazon = require('../../controllers/amazon-service.js')

var keywordDictionary = {}

var getStats = amazon.getKeywordStats('trump aftershock', 0, null, 'de')
console.log()

export default {
  data () {
    return {
      data: [
        {
          terms: getStats
        }
      ]
    }
  }
}
</script>

<style>
.hello {
  color: blue
}
</style>

When I run this I'm able to show the promise data in my Vue component. This is how it showed on the page.

[ { "terms": { "isFulfilled": true, "isRejected": false, "fulfillmentValue": { "title": "Trump Aftershock: The President's Seismic Impact on Culture and Faith in America (English Edition)", "imageUrl": "Trump Aftershock: The President's Seismic Impact on Culture and Faith in America (English Edition)" } } } ]

But I wasn't able to get the "fulfillmentValue". I will attach some screenshots which will help to solve this issue. If I am doing it wrong please guide me to the right path.

What th app shows -

Verified the JSON response -

Make `getKeywordStats` an async function and resolve the promise it returns via `then` or `await`. — Brian Lee, Dec 05 '18 at 07:26

score 0 · Answer 1 · answered Dec 05 '18 at 07:30

The Amazon API function getKeywordStats is returning a Promise – it's an asynchronous operation. This means the function doesn't return the result like a normal synchronous function, instead it returns a Promise object which you can then register a callback function (via then) to be called once the data is retrieved. Be sure to read up on how promises work; I won't go into detail here since there's lots of information about them already.

Move the API call into your component created hook:

export default {
  data() {
    return {
      terms: null
    }
  },

  created() {
    amazon.getKeywordStats('trump aftershock', 0, null, 'de').then(terms => {
      this.terms = terms
    })
  }
}

Accessing the JSON fulfillmentValue value

1 Answers1