0

I'm using Nuxt.js to render content from a separate WordPress installation. I've managed to set up a dynamic page that grabs the correct content based on the url path, however I don't know how to grab the featured image, as featuredmedia key name includes a colon: 

wp:featuredmedia { href: 'root.com/linktoimage' }

Nuxt.js returns:

'error  Parsing error: Unexpected token, expected'

How can I get Nuxt.js to read this correctly without returning an error? I additionally need to alter the returned link as the actual end point for the API is different from the link, though I think this will be relatively easy to resolve on my own.

Appreciate any help I can get on this. Thanks.

EDIT

The whole script in this page component is:

<script>
import axios from 'axios'

export default {
  async asyncData (context) {
    let { data } = await axios.get('https://rootdomain.com/cms/index.php/wp-json/wp/v2/posts?slug=' + context.params.post)

    return {
      data,
      featuredImageURL: data[0]._links.wp:featuredmedia[0].href,
      title: data[0].title.rendered,
      content: data[0].content.rendered
    }
  }
}
</script>

The data, title, and content are being grabbed and rendered as expected. The issue seems to lie in how Nuxt.js reads that colon in the target key (wp:featuredmedia).

Anthony Collins
  • 49
  • 9
  • how are you accessing it? – thanksd Jul 13 '17 at 14:19
  • I'm using the async asyncData method. I'm getting the data by making a this call: 'let { data } = await axios.get('https://rootdomain.com/index.php/wp-json/wp/v2/posts?slug=' + context.params.post)' this is getting the expected data, except I need to add the /index.php to get the api to work properly. – Anthony Collins Jul 13 '17 at 15:24
  • No how are you trying to access the data in the `wp:featuredmedia` property? It should be something like `let href = data['wp:featuredmedia'].href` – thanksd Jul 13 '17 at 15:31
  • I was trying to return the data with featuredImageURL: data[0]._links.wp:featuredmedia[0].href. I've just tried your method but it returns unexpected token on the square bracket. I've added my script code to the original post if this helps. – Anthony Collins Jul 13 '17 at 15:38
  • So it would need to be `data[0]._links['wp:featuredmedia'][0].href`. Is that what you tried? – thanksd Jul 13 '17 at 15:40
  • That worked! Thanks so much for your help! – Anthony Collins Jul 13 '17 at 15:46
  • Happy to help. [Here's more info on bracket vs dot notation](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Property_Accessors) – thanksd Jul 13 '17 at 15:50
  • Possible duplicate of [Selecting a JSON object with a colon in the key](https://stackoverflow.com/questions/4925760/selecting-a-json-object-with-a-colon-in-the-key) – thanksd Jul 13 '17 at 15:50

0 Answers0