Axios nested json in vue

Question

I'm trying to get with axios in vue.js a json array. But I can't access the values of the nested JSON.

.then( response => (this.dateData = response.data))

works for the level. But not for more.

JSON Structure is

{
    "date":"2018-05-31",
    "closed":false,
    "meals":
    [  
      {  
         "id":1,
          "name":"Name here",
          "category":"Categoryname",
          "prices":{  
              "students":2.75
           }
      },
      {
          ....
      }
    ]  
},
{  
    "date":"2018-06-06",
    "closed":false,
    ....
}

So I can receive the value of date and closed in vue with

<div v-for="date in dateData">
 {{date.date}}
 {{date.closed}}
</div>

with date.date oder date.closed in vue.js. But how can I get also the value of meals.name oder meals.prices.students?

Answer 1

You can nest the v-for loops (and of course add some style such as table or whatever you want). Just put each loop inside its own html element:

new Vue({
  el: '#demo',
  data() {
    return {
      dateData: []
    }
  },
  mounted() {
    axios.get("https://openmensa.org/api/v2/canteens/79/meals").then(value => {
      this.dateData = value.data
    }).catch(error => {
    	// do something
    })
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>

<div id="demo">
  <div v-for="date in dateData">
    <h3>{{date.date}} - {{date.closed}}</h3>
    <div v-for="meal in date.meals">
      <p><strong>{{ meal.name }}</strong></p>
      <p>{{ meal.category }}</p>
      <div v-for="(v, k) in meal.prices">
        {{ k }} : {{ v }}
      </div>
    </div>
  </div>
</div>

Answer 2

Here is a solution using forEach:

const data = [{"date":"2018-05-31","closed":false,"meals":[{"id":3299946,"name":"Zitronenhühnchen mit Tomatenconfit, Romanesco und Rosmarinkartoffeln","category":"Angebote","prices":{"students":2.75,"employees":4.5,"pupils":null,"others":null},"notes":[]},{"id":3299947,"name":"Rote Bete-Bohnenragout mit Kartoffel-Linsenstampf","category":"Angebote","prices":{"students":2.0,"employees":3.75,"pupils":null,"others":null},"notes":["Menü ist vegan"]},{"id":3299948,"name":"Hausgemachte frische Pasta, heute Maccheroni mit Paprika und Schinken in Tomatenragout, dazu italienischer Hartkäse Grana Padano","category":"Angebote","prices":{"students":2.3,"employees":4.05,"pupils":null,"others":null},"notes":["Menü enthält Schweinefleisch"]},{"id":3354754,"name":"Pizza Kapstadt mit Wiener, Gewürzgurke und Röstzwiebeln","category":"Angebote","prices":{"students":null,"employees":null,"pupils":null,"others":null},"notes":["Menü enthält Rindfleisch","Menü enthält Schweinefleisch"]},{"id":3354755,"name":"Pizza Caprese mit Tomaten, Basilikum und Mozzarella","category":"Angebote","prices":{"students":null,"employees":null,"pupils":null,"others":null},"notes":["Menü ist vegetarisch"]},{"id":3299951,"name":"Dürrröhrsdorfer Bratwurst ungarischer Art mit Kartoffelsalat","category":"Wok \u0026 Grill","prices":{"students":2.5,"employees":4.25,"pupils":null,"others":null},"notes":["Menü enthält Schweinefleisch"]},{"id":3352011,"name":"Vanille, Schoko oder Schoko-Vanille Softeis:\nGroße Portion 1,80€\nKleine Portion 1,20€","category":"Angebot des Tages","prices":{"students":1.8,"employees":1.8,"pupils":null,"others":null},"notes":[]},{"id":3299952,"name":"Pastasoße Vesuvianna mit Tomaten, Oliven und Kapern","category":"Pasta","prices":{"students":null,"employees":null,"pupils":null,"others":null},"notes":["Menü ist vegan"]},{"id":3299953,"name":"Lammcurry","category":"Pasta","prices":{"students":null,"employees":null,"pupils":null,"others":null},"notes":[]},{"id":3354858,"name":"Nudelauflauf mit Basilkumsoße und Tomate","category":"Auflauf","prices":{"students":1.97,"employees":3.07,"pupils":null,"others":null},"notes":["Menü ist vegetarisch"]},{"id":3354859,"name":"Gratinierte Pasta mit Pute und Gemüsen","category":"Auflauf","prices":{"students":1.97,"employees":3.07,"pupils":null,"others":null},"notes":[]},{"id":3299956,"name":"Blumenkohlsuppe mit roten Linsen und Kresse","category":"Terrine","prices":{"students":1.67,"employees":2.77,"pupils":null,"others":null},"notes":["Menü ist vegetarisch"]},{"id":3299957,"name":"Kalte Gurkensuppe","category":"Terrine","prices":{"students":1.67,"employees":2.77,"pupils":null,"others":null},"notes":["Menü ist vegetarisch"]},{"id":3299958,"name":"Drei Kartoffeltaschen mit Tomaten-Mozzarellafüllung mit großem Bauernsalat","category":"Abendangebot","prices":{"students":3.4,"employees":5.15,"pupils":null,"others":null},"notes":["Menü ist vegetarisch"]},{"id":3299959,"name":"Hausgemachte Fischfrikadelle mit Sahnegurken und Stampfkartoffeln","category":"Abendangebot","prices":{"students":3.4,"employees":5.15,"pupils":null,"others":null},"notes":["Menü enthält Schweinefleisch"]}]},{"date":"2018-06-01","closed":false,"meals":[{"id":3299960,"name":"Vanillerisotto mit Pfirsich und Haselnuss","category":"Angebote","prices":{"students":1.9,"employees":3.65,"pupils":null,"others":null},"notes":["Menü ist vegetarisch"]},{"id":3299961,"name":"Rückensteak vom Schwein mit Mango-Senfsoße, Karotten-Kürbiskerngemüse und Curry-Couscous","category":"Angebote","prices":{"students":2.35,"employees":4.1,"pupils":null,"others":null},"notes":["Menü enthält Schweinefleisch"]},{"id":3299962,"name":"Maultaschen mit Gemüse-Ricottafüllung auf Paprikakraut mit Tomatensoße","category":"Angebote","prices":{"students":2.35,"employees":4.1,"pupils":null,"others":null},"notes":["Menü enthält Knoblauch","Menü ist vegetarisch"]},{"id":3299963,"name":"Rückensteak vom Schwein mit Mango-Senfsoße, Karotten-Kürbiskerngemüse und Waffel-Kartoffeln","category":"Angebote","prices":{"students":2.7,"employees":4.45,"pupils":null,"others":null},"notes":["Menü enthält Schweinefleisch"]},{"id":3299964,"name":"Hausgemachte frische Pasta, heute Trecce alla pugliese ~ mit Broccoli, Sardellen und Tomate, dazu Schafskäse","category":"Angebote","prices":{"students":2.3,"employees":4.05,"pupils":null,"others":null},"notes":[]},{"id":3299965,"name":"Süßkartoffel-Gemüsekuchen","category":"Angebote","prices":{"students":3.0,"employees":4.75,"pupils":null,"others":null},"notes":["Menü ist vegetarisch"]},{"id":3347978,"name":"Gegrilltes Seehechtfilet mit Dillkartoffeln, dazu Gurkensalat mit Joghurt","category":"Wok \u0026 Grill","prices":{"students":4.0,"employees":5.75,"pupils":null,"others":null},"notes":[]},{"id":3352012,"name":"Vanille, Schoko oder Schoko-Vanille Softeis:\nGroße Portion 1,80€\nKleine Portion 1,20€","category":"Angebot des Tages","prices":{"students":1.8,"employees":1.8,"pupils":null,"others":null},"notes":[]},{"id":3354860,"name":"Sahnesoße","category":"Pasta","prices":{"students":null,"employees":null,"pupils":null,"others":null},"notes":["Menü ist vegetarisch"]},{"id":3299968,"name":"Tomatenratatouille","category":"Pasta","prices":{"students":null,"employees":null,"pupils":null,"others":null},"notes":["Menü ist vegan"]}]},{"date":"2018-06-02","closed":true,"meals":[]},{"date":"2018-06-03","closed":true,"meals":[]},{"date":"2018-06-04","closed":false,"meals":[{"id":3328667,"name":"Kräuterquark mit Leberwurst, Petersilienkartoffeln und Salat","category":"Angebote","prices":{"students":2.0,"employees":3.75,"pupils":null,"others":null},"notes":["Menü enthält Schweinefleisch"]},{"id":3328668,"name":"Sahne-Zwiebelhähnchen mit Broccoli und Spätzle oder Kurkumareis","category":"Angebote","prices":{"students":2.7,"employees":4.45,"pupils":null,"others":null},"notes":[]},{"id":3328669,"name":"Blumenkohl und Wurzelgemüse in Kräuterrahm mit Schwenkkartoffeln","category":"Angebote","prices":{"students":1.8,"employees":3.55,"pupils":null,"others":null},"notes":["Menü ist vegetarisch"]},{"id":3328670,"name":"Pizza mit Hirtenkäse und Blattspinat","category":"Angebote","prices":{"students":null,"employees":null,"pupils":null,"others":null},"notes":["Menü ist vegetarisch"]},{"id":3328671,"name":"Pizza mit BBQ-Hühnchen, Paprika und Mais","category":"Angebote","prices":{"students":null,"employees":null,"pupils":null,"others":null},"notes":[]},{"id":3328672,"name":"Grillteller Schweinesteaks, Grillwürstchen und Cevapcici mit BBQ-Dip, Pommes frites und Salat","category":"Wok \u0026 Grill","prices":{"students":3.2,"employees":4.95,"pupils":null,"others":null},"notes":["Menü enthält Knoblauch","Menü enthält Rindfleisch","Menü enthält Schweinefleisch"]},{"id":3328673,"name":"Amori in Pastasoße all'amatriciana mit Tomaten und Bauchspeck, dazu italienischer Hartkäse Grana Padano","category":"Hausgemachte frische Pasta, heute","prices":{"students":2.3,"employees":4.05,"pupils":null,"others":null},"notes":["Menü enthält Schweinefleisch"]},{"id":3328674,"name":"Pastasoße Carbonara","category":"Pasta","prices":{"students":null,"employees":null,"pupils":null,"others":null},"notes":["Menü enthält Schweinefleisch"]},{"id":3328675,"name":"Tomatensoße mit Ricotta","category":"Pasta","prices":{"students":null,"employees":null,"pupils":null,"others":null},"notes":["Menü ist vegetarisch"]},{"id":3328676,"name":"Rakottkrumpli Kartoffelauflauf ungarisch","category":"Auflauf","prices":{"students":1.97,"employees":3.07,"pupils":null,"others":null},"notes":["Menü enthält Schweinefleisch"]},{"id":3328677,"name":"Ofenschlupfer mit Apfel und Quark","category":"Auflauf","prices":{"students":1.97,"employees":3.07,"pupils":null,"others":null},"notes":["Menü ist vegetarisch"]},{"id":3328678,"name":"Mais-Kartoffeltopf","category":"Terrine","prices":{"students":1.67,"employees":2.77,"pupils":null,"others":null},"notes":["Menü ist vegetarisch"]},{"id":3328679,"name":"Ananas-Kaltschale","category":"Terrine","prices":{"students":1.67,"employees":2.77,"pupils":null,"others":null},"notes":["Menü ist vegan"]},{"id":3328680,"name":"Gemüseschnitzel mit Chili sin carne und Nachos","category":"Abendangebot","prices":{"students":2.3,"employees":4.05,"pupils":null,"others":null},"notes":["Menü ist vegetarisch"]},{"id":3328681,"name":"Schweineschnitzel mit Chili con carne und Nachos","category":"Abendangebot","prices":{"students":2.3,"employees":4.05,"pupils":null,"others":null},"notes":["Menü enthält Alkohol","Menü enthält Rindfleisch","Menü enthält Schweinefleisch"]}]},{"date":"2018-06-05","closed":false,"meals":[{"id":3328682,"name":"Szegediner Gulasch mit Semmelknödel oder Kartoffeln, dazu Möhrensalat mit Apfel","category":"Angebote","prices":{"students":2.45,"employees":4.2,"pupils":null,"others":null},"notes":["Menü enthält Schweinefleisch"]},{"id":3328683,"name":"Gebackenes Schollenfilet mit Karottenmix und Kartoffelpüree","category":"Angebote","prices":{"students":2.8,"employees":4.55,"pupils":null,"others":null},"notes":[]},{"id":3328684,"name":"Falafel mit Couscous, Tortilla-Chip, Joghurt-Dip und Salat","category":"Angebote","prices":{"students":2.25,"employees":4.0,"pupils":null,"others":null},"notes":["Menü enthält Knoblauch","Menü ist vegetarisch"]},{"id":3328685,"name":"Pizza mit Hirtenkäse und Blattspinat","category":"Angebote","prices":{"students":null,"employees":null,"pupils":null,"others":null},"notes":["Menü ist vegetarisch"]},{"id":3328686,"name":"Pizza mit BBQ-Hühnchen, Paprika und Mais","category":"Angebote","prices":{"students":null,"employees":null,"pupils":null,"others":null},"notes":[]},{"id":3328687,"name":"Gefülltes Fladenbrot mit Hirtenkäse.-und Paprikacreme, knackigem Gemüse, getrockneter Tomate,Oliven und Peperoni","category":"Wok \u0026 Grill","prices":{"students":3.1,"employees":4.85,"pupils":null,"others":null},"notes":["Menü enthält Knoblauch","Menü ist vegetarisch"]},{"id":3328688,"name":"Trecce alla greco und Schafskäse","category":"Hausgemachte frische Pasta, heute","prices":{"students":2.3,"employees":4.05,"pupils":null,"others":null},"notes":["Menü ist vegetarisch"]},{"id":3328689,"name":"Pute in fruchtiger Currysoße","category":"Pasta","prices":{"students":null,"employees":null,"pupils":null,"others":null},"notes":[]},{"id":3328690,"name":"Tomatensoße mit Paprika","category":"Pasta","prices":{"students":null,"employees":null,"pupils":null,"others":null},"notes":["Menü ist vegan"]},{"id":3328691,"name":"Rakottkrumpli Kartoffelauflauf ungarisch","category":"Auflauf","prices":{"students":1.97,"employees":3.07,"pupils":null,"others":null},"notes":["Menü enthält Schweinefleisch"]},{"id":3328692,"name":"Ofenschlupfer mit Apfel und Quark","category":"Auflauf","prices":{"students":1.97,"employees":3.07,"pupils":null,"others":null},"notes":["Menü ist vegetarisch"]},{"id":3328693,"name":"Mais-Kartoffeltopf","category":"Terrine","prices":{"students":1.67,"employees":2.77,"pupils":null,"others":null},"notes":["Menü ist vegetarisch"]},{"id":3328694,"name":"Ananas-Kaltschale","category":"Terrine","prices":{"students":1.67,"employees":2.77,"pupils":null,"others":null},"notes":["Menü ist vegan"]},{"id":3328695,"name":"Ofenkartoffel mit Hüttenkäse und Tomatensalat","category":"Abendangebot","prices":{"students":2.5,"employees":4.25,"pupils":null,"others":null},"notes":["Menü ist vegetarisch"]},{"id":3328696,"name":"Putensteak mit Tomaten-Frischkäsecreme gratiniert, dazu Erbsen und Kartoffelbällchen","category":"Abendangebot","prices":{"students":3.25,"employees":5.0,"pupils":null,"others":null},"notes":["Menü enthält Knoblauch"]}]},{"date":"2018-06-06","closed":false,"meals":[{"id":3328697,"name":"Brühnudeln mit Geflügelfleisch, Brot","category":"Angebote","prices":{"students":1.7,"employees":3.45,"pupils":null,"others":null},"notes":[]},{"id":3328698,"name":"Hähnchenbrust mit Kokos-Currysoße, Zuckerschoten und Basmati Reis","category":"Angebote","prices":{"students":2.8,"employees":4.55,"pupils":null,"others":null},"notes":["Menü enthält Knoblauch"]},{"id":3328699,"name":"Emmentaler Käseschnitzel mit Tatarensoße, Pfannenkartoffeln und Gurken-Bohnensalat","category":"Angebote","prices":{"students":2.9,"employees":4.65,"pupils":null,"others":null},"notes":["Menü ist vegetarisch"]},{"id":3328700,"name":"Pizza Piccante mit Tomate, Jalapenos und Cheddarkäse","category":"Angebote","prices":{"students":null,"employees":null,"pupils":null,"others":null},"notes":["Menü ist vegetarisch"]},{"id":3328701,"name":"Pizza Gyros mit Zwiebeln, Paprika und Tsatsiki","category":"Angebote","prices":{"students":null,"employees":null,"pupils":null,"others":null},"notes":["Menü enthält Knoblauch","Menü enthält Schweinefleisch"]},{"id":3328702,"name":"Buntes Wokgemüse mit Mie Nudeln","category":"Wok \u0026 Grill","prices":{"students":2.5,"employees":4.25,"pupils":null,"others":null},"notes":["Menü ist vegetarisch"]},{"id":3328703,"name":"Linguine alla Carbonara, dazu italienischer Hartkäse Grana Padano","category":"Hausgemachte frische Pasta, heute","prices":{"students":2.3,"employees":4.05,"pupils":null,"others":null},"notes":["Menü enthält Schweinefleisch"]},{"id":3328704,"name":"Chili con carne","category":"Pasta","prices":{"students":null,"employees":null,"pupils":null,"others":null},"notes":["Menü enthält Rindfleisch"]},{"id":3328705,"name":"Rahmsoße mit Erbsen und Paprika","category":"Pasta","prices":{"students":null,"employees":null,"pupils":null,"others":null},"notes":["Menü ist vegetarisch"]},{"id":3328706,"name":"Rakottkrumpli Kartoffelauflauf ungarisch","category":"Auflauf","prices":{"students":1.97,"employees":3.07,"pupils":null,"others":null},"notes":["Menü enthält Schweinefleisch"]},{"id":3328707,"name":"Ofenschlupfer mit Apfel und Quark","category":"Auflauf","prices":{"students":1.97,"employees":3.07,"pupils":null,"others":null},"notes":["Menü ist vegetarisch"]},{"id":3328708,"name":"Mais-Kartoffeltopf","category":"Terrine","prices":{"students":1.67,"employees":2.77,"pupils":null,"others":null},"notes":["Menü ist vegetarisch"]},{"id":3328709,"name":"Ananas-Kaltschale","category":"Terrine","prices":{"students":1.67,"employees":2.77,"pupils":null,"others":null},"notes":["Menü ist vegan"]}]}]

data.forEach(processDate);

function processDate(el) {
  el.meals.forEach(printMeals);
}

function printMeals(el) {
  console.log(el.name);
  // etc.
}

Answer 3

Does the following not work?

data.meals[0].name 

I am wondering if you just are not using an indexer on your meals array.