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"
         }
      ]
   },

Majed Badawi · Accepted Answer · 2020-10-29 21:17:30Z

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>

edited Oct 29, 2020 at 21:17

answered Oct 29, 2020 at 20:51

Majed Badawi

28.5k4 gold badges30 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Dave Over a year ago

How do I display this in my vue? I hold this in a computed When I put {{breakfast}} in html, it returns entire json and it's not mapped. How do I target the mapped meal inside this?

Majed Badawi Over a year ago

@Dave you mean rendering it? And how is it "not mapped"?

Dave Over a year ago

Yes, how to render it properly in html.

Majed Badawi Over a year ago

How exactly do you want to render it? Like showing the list of meals and in each one it's ingredients list?

Dave Over a year ago

I just want it like this a list with v-for {{ingredient.name}} {{ingredient.unit}}

|

Collectives™ on Stack Overflow

Mapping and displaying returned data from json in vue app

1 Answer 1

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related