如何从javascript中的for-each循环返回每个值

Question

我正在使用带有内容 API 的 Bootstrap vue 表，并且可以对我的代码使用一些帮助。我正在尝试使用 for 循环遍历数组并获取属性值。 console.info(episodes); call 打印出 var 剧集的每次迭代，但现在我如何将它绑定到我的可变剧集。即使在 for each 循环之外，使用 return 也只会返回一个结果。非常感谢您对其他实现的任何帮助或建议。完整模板如下。

<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

您可以在响应数组上使用map 方法返回所有元素。

在您当前的示例中，您不断重新设置 episodes 变量，而不是您实际想要做的 push()。 map 方法仍然是解决问题的更优雅的方法。

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

您可以更新last then 以匹配last then 下面

]).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)

你确实有一个不必要的第二个 then，但我把它留在那里以便你可以看到我要替换的内容。