我如何 return 我的 for-each 循环中的每个值 javascript

Question

我正在使用 Bootstrap vue table 和 contentful 的 API，我的代码可能需要一些帮助。我正在尝试使用 for 循环遍历数组并获取属性值。 console.info(集);调用打印出 var 剧集的每次迭代，但现在我如何将其绑定到我的可变剧集。使用 return 仅 returns 一个结果，即使在 for each 循环之外也是如此。非常感谢对其他实现的任何帮助或建议。完整模板如下。

<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 方法 return 所有元素。

在您当前的示例中，您不断重新设置 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，但我把它留在那里，这样你就可以看到我正在替换的内容。

我如何 return 我的 for-each 循环中的每个值 javascript

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

javascript

vue.js

bootstrap-vue

contentful-api