Как лучше всего извлечь ключ и значение из объекта ответа Ax ios? - PullRequest
Новая
       9

Как лучше всего извлечь ключ и значение из объекта ответа Ax ios?

0 голосов
/ 17 января 2020

У меня есть схема Mon goose, которая записывает пару ключ: значение в массиве смешанного типа, например:

Пн goose

const budgetSchema = new Schema({
  earnings: Number,
  expenses: [mongoose.Schema.Types.Mixed]
});

bugdet:{
  earning:1000,
  expenses: [
{shopping: 300},{bills:700}
]
}

In Vue. js Я запрашиваю данные с помощью Ax ios, и они работают нормально, но когда я отображаю свойство затрат, оно отображается как {shopping: 300}.

Vue js

<template>
  <div class="about">
    <h1>My Budget</h1>
    {{ myExpenses }}
  </div>
</template>

<script>
import axios from "axios"
export default {
  name: "myBudget",
  data() {
    return{
        myExpenses:[]
    }
  },
  methods: {},
  mounted(){
      axios.get("http://localhost:3000/budget",{
          headers:{"Content-Type": "application/json"},
          withCredentials: true
      }).then(res =>{
          this.myExpenses =  res.data.budget[0].expenses[0]
      })
  }
};
</script>

Я бы хотел отобразить ключ и значение данных "расходов" отдельно. Есть ли способ извлечь объект?

Ответы [ 2 ]

2 голосов
/ 17 января 2020

Похоже, что у вас топор ios довольно хорошо обработан, и из моей интерпретации вашего вопроса вы действительно пытаетесь получить доступ к данным, которые вам возвращает ios. В следующих примерах не используется ax ios, но предполагается, что данные stati c в методе данных совпадают с данными, полученными из ax ios. Однако одна вещь, которую я заметил в отношении ваших данных, заключается в том, что вы получаете только первый индекс expenses. Возможно, вы захотите сделать что-то вроде this.myExpenses = res.data.budget[0].expenses, которое вернет весь список расходов, а не только первое значение.

Я думаю, вы пытаетесь это сделать: 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  </head>
  <body>
    <div id="app">
      <h1>My Budget</h1>
      <div v-for="expense in myExpenses">
        <div>Name:{{ Object.keys(expense)[0] }}</div>
        <div>Total:{{ Object.values(expense)[0] }}</div>
        <hr />
      </div>
    </div>
  </body>
  <script>
    var app = new Vue({
      el: '#app',
      data: {
        myExpenses: [{ shopping: 300 }, { bills: 700 }]
      }
    });
  </script>
</html>

Однако я бы рекомендовал изменить схему так, чтобы она возвращала объекты, которые выглядят так: 

{ name: 'shopping', total: 300 }

Этот шаблон более эффективно использует структуру объекта для указания имени его полей и связанных с ними значений. Это также позволит вам сделать что-то вроде этого: 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  </head>
  <body>
    <div id="app">
      <h1>My Budget</h1>
      <div v-for="expense in myExpenses">
        <div>Name:{{ expense.name }}</div>
        <div>Total:{{ expense.total }}</div>
        <hr />
      </div>
    </div>
  </body>
  <script>
    var app = new Vue({
      el: '#app',
      data: {
        myExpenses: [
          { name: 'shopping', total: 300 },
          { name: 'bills', total: 700 }
        ]
      }
    });
  </script>
</html>
0 голосов
/ 17 января 2020

Вы можете использовать деструктуризацию: 

const {
  data: {
    budget: [firstElement]
  }
} = res;

и работать с переменной firstElement, которая будет равна res.data.budget[0];

...