javascript - Vue.js 是否有一种优雅的方式来循环 axios 中的映射键？

Question

我正在继续我创建的 Vue.js 练习。我正在将一个 json api 填充到一个表中，一切正常，但我面临一个限制，即 api 中有多个具有几乎相同名称的键（strIngredient1、strIngredient2、strIngredient3、..etc），其中一些键为空。在对 x 是数字的 substring(strIngredientx) 进行映射搜索时，有没有办法包含正则表达式？并且还要排除空值？我确实使用了 axios 但不确定是否是完美的方式，这是我的代码：

成分.vue（父）：

<template>
  <div>
    <table class="table table-bordered">
      <thead>
        <tr>
          <th scope="col">ID</th>
          <th scope="col">Name</th>
          <th scope="col">Category</th>
          <th scope="col">strIBA</th>
          <th scope="col">Ingredients</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in all_cocktails" v-bind:key="item">
          <td>{{ item.id }}</td>
          <td>{{ item.name }}</td>
          <td>{{ item.strIBA }}</td>
          <td>{{ item.category }}</td>
          <td><subComponent :item="item"></subComponent></td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import subComponent from "./subComponent";

import axios from "axios";
export default {
  data() {
    return {
      loading: false,
      all_cocktails: {},
    };
  },
  components: {
    subComponent,
  },
  async mounted() {
    this.loading = true;
    await this.getData();
  },
  computed: {},
  methods: {
    getData() {
      axios
        .get(
          "https://www.thecocktaildb.com/api/json/v1/1/search.php?s=margarita"
        )
        .then((response) => (this.all_cocktails = response.data.drinks))
        .then(
          (response) =>
            (this.all_cocktails = this.all_cocktails.map((d) => ({ //using map to pick the keys that I want.
              id: d.idDrink,
              name: d.strDrink,
              category: d.strCategory,
              strIBA: d.strIBA,
              Ingredients: [ //here is there a way to loop for substring and not null instead of going through all of them ?
                d.strIngredient1,
                d.strIngredient2,
                d.strIngredient3,
              ],
            })))
        )
        .catch((error) => console.log(error))
        .finally(() => (this.loading = false));
    },
  },
};
</script>

<style>
</style>

subComponent.vue（子）：

<template>
  <div>
    <select>
      <option
        v-for="(item, index) in item.Ingredients"
        :key="index"
        v-bind:value="item"
      >
        {{ item }}
      </option>
    </select>
  </div>
</template>

<script>
export default {
  props: {
    item: {},
  },
  data() {
    return {};
  },
};
</script>

标签： javascriptvue.js

Answer 1

这够干净吗？

axios
    .get("https://www.thecocktaildb.com/api/json/v1/1/search.php?s=margarita")
    .then((response) => (this.all_cocktails = response.data.drinks))
    .then((response) =>
        (this.all_cocktails = this.all_cocktails.map((d) => {
            let obj = { 
                id: d.idDrink,
                name: d.strDrink,
                category: d.strCategory,
                strIBA: d.strIBA,
            }
            let Ingredients = []
            for(let i = 0; i < Object.keys(d).length; i++) {
                if(d["strIngredient"+i]) Ingredients.push(d["strIngredient"+i])
            }
            obj.Ingredients = [...new Set(Ingredients)]
            return obj
        })))

输出：

{
  id: '178332',
  name: 'Smashed Watermelon Margarita',
  category: 'Cocktail',
  strIBA: null,
  Ingredients: [
    'Watermelon',
    'Mint',
    'Grapefruit Juice',
    'Lime',
    'Tequila'
  ]
}