V-for on 2 seperate object arrays

user_18907126 0
Viewed 65

I'm trying to output 10 news from an array called stories. This array contains info regarding the story. fx title, text, URL

But I'm also trying to output data on the author from that story that is stored in another array called authors. This array contains, author id, author score etc.

How do I accomplish this in Vue.js using the v-for method.

This is what I got for now:

 created: function (){
    axios.get('https://hacker-news.firebaseio.com/v0/topstories.json')
    .then((response) => {
      let results = response.data.slice(0,10)
      results.forEach(id => {
        axios.get('https://hacker-news.firebaseio.com/v0/item/' + id + '.json')
        .then((response) => {
          this.stories.push(response);
          let myAuthor = response.data.by;
              axios.get('https://hacker-news.firebaseio.com/v0/user/' + myAuthor + '.json')
              .then((myAuthors) => {
                this.authors.push(myAuthors);
              })
            .catch((err) => {
              this.err = err;
              alert("Error fetching authors " + err);
            })
              
        })
        .catch((err) => {
          this.err = err;
        })
      })
    })
    .catch((err) => {
      this.err = err;
    }); 

  },

and the HTML:

<template>
  <div class="container">
    <div class="storyContainer" v-for="story in sorted_stories" :key="story">
            <span class="score">{{ story.data.score }}</span>
            <h2>Karma: {{ story.data.karma }}</h2>

            <a href="{ path: '/story/' + story.data.id }">{{ story.data.title }}<span>{{ story.data.url }}</span></a><br/>
            <span class="meta">
            by {{ story.data.by }} | {{ story.data.time }} | Story ID: {{ story.data.id }}
            </span><br>
    </div>
    <div v-for="author in authors" :key="author">
    <h1>ID {{ author.data.id }}</h1>
    <h1>Karma {{ author.data.karma }}</h1>
    </div>
  </div>
</template>
vuejs2 vue.js javascript
1 Answers

If I understood you correctly you can create another v-for in authors v-for and filter stories for author:

new Vue({
  el: '#demo',
  data() {
    return {
      stories: [],
      authors: []
    }
  },
  methods: {
    storiesForAuthor(id) { //  method to filter stories for author id
      return this.stories.filter(s => s.data.by === id)
    }
  },
  created: function (){
    axios.get('https://hacker-news.firebaseio.com/v0/topstories.json')
    .then((response) => {
      let results = response.data.slice(0,10)
      results.forEach(id => {
        axios.get('https://hacker-news.firebaseio.com/v0/item/' + id + '.json')
        .then((response) => {
          this.stories.push(response);
          let myAuthor = response.data.by;
              axios.get('https://hacker-news.firebaseio.com/v0/user/' + myAuthor + '.json')
              .then((myAuthors) => {
                this.authors.push(myAuthors);
              })
            .catch((err) => {
              this.err = err;
              alert("Error fetching authors " + err);
            })
              
        })
        .catch((err) => {
          this.err = err;
        })
      })
    })
    .catch((err) => {
      this.err = err;
    }); 
  },
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.26.1/axios.min.js" integrity="sha512-bPh3uwgU5qEMipS/VOmRqynnMXGGSRv+72H/N260MQeXZIK4PG48401Bsby9Nq5P5fz7hy5UGNmC/W1Z51h2GQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<div id="demo">
  <div class="container">
    <div v-for="author in authors" :key="author.id">
      <h3>ID {{ author.data.id }}</h3>
      <h5>Karma {{ author.data.karma }}</h5>
                                           <!--  inner v-for for filtering stories -->
      <div class="storyContainer" v-for="story in storiesForAuthor(author.data.id)" :key="story.id">
        <span class="score">{{ story.data.score }}</span>
        <h2>Karma: {{ story.data.karma }}</h2>

        <a href="{ path: '/story/' + story.data.id }">{{ story.data.title }}<span>{{ story.data.url }}</span></a><br/>
        <span class="meta">
        by {{ story.data.by }} | {{ story.data.time }} | Story ID: {{ story.data.id }}
        </span><br>
      </div>
      <hr />
    </div>
  </div>
</div>

user_119891890
Related