How can I return each value from my for-each loop in javascript

Question

I'm using Bootstrap vue table with contentful's API and could use some help with my code. I'm attempting to use a for loop to iterate over an array and get the property values. The console.info(episodes); call prints out each iteration for the var episodes, but now how do I bind this to my variable episodes. Using return only returns one result even outside of the for each loop. Any help or suggestions on another implementation is greatly appreciated. Full Template below.

<template>
  <div>
    <h1>Bootstrap Table</h1>
    <b-table striped responsive hover :items="episodes" :fields="fields"></b-table>
  </div>
</template>
<style>
</style>
<script>
import axios from "axios";
// Config
import config from "config";
// Vuex
import store from "store";
import { mapGetters, mapActions } from "vuex";
// Services
import { formatEntry } from "services/contentful";
// Models
import { entryTypes } from "models/contentful";
// UI
import UiEntry from "ui/Entry";
import UiLatestEntries from "ui/LatestEntries";
const contentful = require("contentful");
const client = contentful.createClient({
  space: "xxxx",
  environment: "staging", // defaults to 'master' if not set
  accessToken: "xxxx"
});
export default {
  name: "contentful-table",
  data() {
    return {
      fields: [
        {
          key: "category",
          sortable: true
        },
        {
          key: "episode_name",
          sortable: true
        },
        {
          key: "episode_acronym",
          sortable: true
        },
        {
          key: "version",
          sortable: true
        }
      ],
      episodes: []
    };
  },
  mounted() {
    return Promise.all([
      // fetch the owner of the blog
      client.getEntries({
        content_type: "entryWebinar",
        select: "fields.title,fields.description,fields.body,fields.splash"
      })
    ])
      .then(response => {
        // console.info(response[0].items);
        return response[0].items;
      })
      .then(response => {
        this.episodes = function() {
          var arrayLength = response.length;
          var episodes = [];
          for (let i = 0; i < arrayLength; i++) {
            // console.info(response[i].fields.title + response[i].fields.splash + response[i].fields.description + response[i].fields.body );
            var episodes = [
              {
                category: response[i].fields.title,
                episode_name: response[i].fields.splash,
                episode_acronym: response[i].fields.description,
                version: response[i].fields.body
              }
            ];
            // episodes.forEach(category => episodes.push(category));
            console.info(episodes);
          }
          return episodes;
        };
      })
      .catch(console.error);
  }
};
</script>

Answer 1

You can use the map method on the response array to return all the elements.

In your current example you keep re-setting the episodes variable, instead of the push() you actually want to do. The map method is still a more elegant way to solve your problem.

this.episodes = response.map((item) => {
    return {
        category: item.fields.title,
        episode_name: items.fields.splash,
        episode_acronym: item.fields.description,
        version: item.fields.body
    }
})

You can update the last then to match the last then below

]).then(response => {
    return response[0].items;
})
.then((response) => {
    this.episodes = response.map((item) => {
        return {
            category: item.fields.title,
            episode_name: items.fields.splash,
            episode_acronym: item.fields.description,
            version: item.fields.body
        };
    });
})
.catch(console.error)

You do have an unnecessary second then, but I left it there so that you could see what I am replacing.