使用VueJS和Axios列出来自外部API的渲染

Question

I am having a bear of a time getting my VueJs app to render data from an external API. I've attempted to search for a similar issue, but everything I've found has been of no help.

I'm using the the USDA's nutrition database . When I run the code below, I can see through dev tools that my getNutrients function is making a successful call to the database when I click the button, yet my v-for element won't render any data. If I attempt to simply render nutrients from my data object, I'm able to render all of the raw JSON, just not when I try to render singular items within the v-for element.

Any help with getting the render to work would be greatly appreciated.

Thank you in advance

<template>
  <div>
    <button @click="getNutrients">Click</button>
      <ul>
        <li v-for="nutrient in nutrients">{{nutrient.nutrient_id}}</li>
      </ul>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  name: 'home',
  data () {
    return {
      nutrients: {}
    }
  },
  methods: {
    getNutrients: function () {
      axios.get('https://api.nal.usda.gov/ndb/nutrients/?format=json&api_key=DEMO_KEY&nutrients=205&nutrients=204&nutrients=208&nutrients=269')
        .then(response => {this.nutrients = response.data})
    }
  }
}
</script>

If it helps, I'm using the Vue Webpack template through the Vue-CLI.

Answer 1

The API's returning a report object, which contains an array of foods , each of which contains an array of nutrients , so you'd need to loop through the foods , then through the nutrients in each food :

<ul>
    <li v-for="food in foods">
        <h2>{{food.name}}</h2>
        <ul>
              <li v-for="nutrient in food.nutrients">{{nutrient.nutrient_id}}</li>
        </ul>
    </li>
</ul>


axios.get(url).then(response => { 
    this.foods = response.data.report.foods
})