axios在vue中嵌套json

Posted 2023-02-22

【中文标题】axios在vue中嵌套json

【英文标题】：Axios nested json in vue

【发布时间】：2018-11-10 23:28:49

【问题描述】：

我正在尝试在 vue.js 中使用 axios 获取一个 json 数组。但我无法访问嵌套 JSON 的值。

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

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

JSON 结构是

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

所以我可以收到日期的值并在 vue 中关闭

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

在 vue.js 中使用 date.date 或 date.closed。但是，我怎样才能同时获得餐食.name 或餐食.prices.students 的价值？

【问题讨论】：

JSON 无效，是否包裹在数组中？

@DominicTobias 是的。抱歉，我只是为此缩小了 json。但您可以在openmensa.org/api/v2/canteens/79/meals

上查看完整内容

【参考方案1】：

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

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>

【参考方案2】：

以下方法不起作用吗？

data.meals[0].name 

我想知道你是不是没有在你的饭菜数组上使用索引器。

【参考方案3】：

这是使用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.