首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >Axios在vue中嵌套json

Axios在vue中嵌套json
EN

Stack Overflow用户
提问于 2018-06-01 05:21:40
回答 3查看 363关注 0票数 1

我正在尝试在vue.js中使用axios作为json数组。但是我不能访问嵌套的JSON的值。

代码语言:javascript
复制
.then( response => (this.dateData = response.data))

适用于关卡。但不是为了更多。

JSON结构是

代码语言:javascript
复制
{
    "date":"2018-05-31",
    "closed":false,
    "meals":
    [  
      {  
         "id":1,
          "name":"Name here",
          "category":"Categoryname",
          "prices":{  
              "students":2.75
           }
      },
      {
          ....
      }
    ]  
},
{  
    "date":"2018-06-06",
    "closed":false,
    ....
}

因此,我可以接收date的值,并使用vue关闭

代码语言:javascript
复制
<div v-for="date in dateData">
 {{date.date}}
 {{date.closed}}
</div>

在vue.js中使用date.datedate.closed命令。但是怎样才能同时获得meals.name或meals.prices.students的值呢?

EN

回答 3

Stack Overflow用户

回答已采纳

发布于 2018-06-01 05:52:37

您可以嵌套v-for循环(当然,还可以添加一些样式,如表或任何您想要的样式)。只需将每个循环放在它自己的html元素中:

代码语言:javascript
复制
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
    })
  }
})
代码语言:javascript
复制
<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>

票数 2
EN

Stack Overflow用户

发布于 2018-06-01 05:38:13

以下内容不起作用吗?

代码语言:javascript
复制
data.meals[0].name 

我想知道您是否只是没有在您的餐点数组上使用索引器。

票数 0
EN

Stack Overflow用户

发布于 2018-06-01 05:51:06

这是一个使用forEach的解决方案

代码语言:javascript
复制
/*
* 提示:该行代码过长,系统自动注释不进行高亮。一键复制会移除系统注释 
* 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.
}

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/50632965

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档