Mapping and displaying returned data from json in vue app

Question

I am returnig json from my api.

      dietPhase: (state) => state.dietPhase,

I have this in state which returns 3 types of meals - breakfast, dinner and supper. I've filtered it to return only breakfast type. Now I'm having issue with mapping this. I want it to only return ingriedients name and unit from this json. How can I do this, and display it on my html?

computed - 

breakfast() {
      return _.filter(this.dietPhase.meals, ({ type }) => type == "breakfast");
    },

  mounted() {
    this.setSlug(this.dietPhaseSlug);
    this.fetch();
  },
  methods: {
    ...mapActions({
      setSlug: "dietPhase/setSlug",
      fetch: "dietPhase/fetch",
    }),
     

[
   {
      "id":"34649fd9-88a5-4773-b890-3253f964ab7b",
      "description":"Chicken and veg",
      "type":"breakfast",
      "ingredients":[
         {
            "name":"Chicken",
            "weight":"65",
            "unit":"65g",
            "type":"tag",
            "type_id":"5b32d5b3-dd88-459e-80ca-9c9c4d0891c3"
         },
   {
            "name":"Vegetables",
            "weight":"95",
            "unit":"95g",
            "type":"product_group",
            "type_id":"b5fad2f4-25e6-45d2-9d2a-4202cbfaef40"
         }
      ]
   },

Answer 1

You can use .map to iterate over the filtered list and then again to get the ingredients' names and units for every meal item.

To render the resulting list properly, you can use two v-for, an outer one for the meal items and an inner one for the ingredients:

new Vue({
  el:"#app",
  data(){
    return{
     dietPhase: {
       meals: [
         {
           "id":"34649fd9-88a5-4773-b890-3253f964ab7b",
           "description":"Chicken and veg",
           "type":"breakfast",
           "ingredients": [
             {
               "name":"Chicken",
               "weight":"65",
               "unit":"65g",
               "type":"tag",
               "type_id":"5b32d5b3-dd88-459e-80ca-9c9c4d0891c3"
             },
             {
               "name":"Vegetables",
               "weight":"95",
               "unit":"95g",
               "type":"product_group",
               "type_id":"b5fad2f4-25e6-45d2-9d2a-4202cbfaef40"
             }
           ]
         },
       ]
      }
    }
  },
  computed: {
    breakfast(){
      return _.filter(this.dietPhase.meals, ({ type }) => type == "breakfast")
        .map(meal => {
          const ingredients = meal.ingredients.map(ingredient => (
            {name:ingredient.name, unit:ingredient.unit}
          ));
          return {...meal, ingredients}
        });
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.20/lodash.min.js"></script>

<div id="app">
  <table>
    <thead>
      <tr>
        <td>id</td>
        <td>description</td>
        <td>type</td>
        <td>ingredients</td>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(meal,i) in breakfast" :key="i">
        <td>{{meal.id}}</td>
        <td>{{meal.description}}</td>
        <td>{{meal.type}}</td>
        <td>
          <ul>
            <li v-for="(ingredient,j) in meal.ingredients" :key="j">
              {{ingredient.name}} {{ingredient.unit}}
            </li>
          </ul>
      </tr>
    </tbody>
  </table>
</div>