there is a nested "src": "", in json object which i intend to display on my page-CodePudding

using an api and trying to target a nested object in the json called "Species Illustration Photo" , inside of which there is an "img" object with the src link, how can i render this nested img src in my dom using vue?

here is all my code so far, below is the html.

fetch('https://www.fishwatch.gov/api/species')
    .then(res => res.json())
    .then(data => console.log(data))
    let app = Vue.createApp ({ 
  data() {
    return {
      fishes: [],
      fishName: ["Species Name"],
      fishPhoto: ["Species Illustration Photo"]
    }
  },
  mounted() {
    fetch('https://www.fishwatch.gov/api/species')
      .then(res => res.json())
      .then(data => {
        this.fishes = data
      })
  }
})
app.mount('.app')

I have tried adding several different things after the ["Species Illustration Photo"] but none have worked

here is my html

<div >
    <ul v-for="(fish, i) in fishes" :key="i">
      <li> {{ fish[fishName], fish[fishPhoto] }}</li> 
    </ul>
</div>

CodePudding user response：

This works well enough

<template>
  <ul>
    <li
      v-for="fish in fishObject['Image Gallery']"
      :key="fish['Fishery Management']"
    >
      <p>{{ fish.title }}</p>
      <img width="200" height="200" :alt="fish.alt" :src="fish.src" />
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      fishObject: {},
    }
  },
  async created() {
    const response = await fetch('https://www.fishwatch.gov/api/species')
    const data = await response.json()
    this.fishObject = data[0] // you can also v-for on that one of course
  },
}
</script>

You can of course iterate on the received data rather than doing data[0] but since the whole initial array is full of 116 elements, I thought it would not be relevant here.

Nesting the current v-for in another v-for would be the solution for that case.

PS: not sure if you need to use Species Illustration Photo or Image Gallery but the idea is overall the same. Thought a gallery might be more useful to loop on.