Блог

Главная - Вопросы по программированию - Как выполнить итерацию данных в vue.js

Как выполнить итерацию данных в vue.js

#javascript #vue.js

#javascript #vue.js

Вопрос:

Я пытаюсь повторить эти данные в vue внутри функции метода

 {
  "data": [
    {
      "id": 1,
      "name": "Jack Daniels",
      "mobile": "21223",
      "start": "2021-02-25T09:16:21.000000Z",
      "end": "2021-02-25T09:16:21.000000Z"
    }
  ]
}

вот мой код

 async getEvents() {
    try {
        const response = await axios.get('/api/customers')

        Object.entries(response).forEach(([key, value]) => {
            console.log(`${key}:${value}`)
        })

    } catch (err) {
        console.log(err)
    }
}

и вот вывод на

 data:[object Object],[object Object]

есть идеи, что пошло не так, и есть ли лучший подход для итерации данных в vue.js

Комментарии:

1. данные содержат массив, содержащий один объект. Вам нужно получить доступ к массиву с индексом 0, а затем вы получите объект

2. кроме того, что вы подразумеваете под функцией метода?

3. Вы также можете захотеть вывести из системы фактические записи, а не их строковые представления, console.log('key',key); console.log('value',value);

4. просто console.log(ответ), и вы увидите, что делать

5. @ccarstens не уверен в терминах, но я думаю, что его вызываемый обработчик метода простит мое невежество

Ответ №1:

Прежде всего, это не вопрос Vue (теги axios / js).
Здесь вам не нужны Object.entries (если вам нужно выполнить итерацию массива данных).
Просто используйте map для массива и все.

 const iteratedData = response.data.map((item, index) => {
    console.log(`Index ${index}`);
    console.log(item);
    // Do what you need with data, your iteration
    return item;
});

Комментарии:

1. Привет, спасибо за ваш повтор и за ваше исправление, я попробовал код, но получаю эту ошибку TypeError: response.data.map не является функцией

2. @EdsonTeliaken Ты можешь просто записать это на консоль? Чтобы увидеть фактическую структуру

3. @ Asimple я получаю это TypeError: response.data.map is not a function at _callee$ (app.js:2526) at tryCatch (app.js:38812) at Generator.invoke [as _invoke] (app.js:39042) at Generator.next (app.js:38867) at asyncGeneratorStep (app.js:2283) at _next (app.js:2285)

4. @EdsonTeliaken Я понял проблему с этим. Просто console.log(response) чтобы увидеть фактический объект и выяснить, через какое свойство вы должны выполнить итерацию. Потому что могут быть данные ответа, и data of data , поэтому, возможно, вам следует получить к нему доступ следующим образом: response.data.data.map

Ответ №2:

Код в порядке. Здесь ключ — это данные, а значение — массив объекта. итак, чтобы получить доступ к значению, вот пример кода

 let response = {
 "data":[{
 "id":1,
 "name":"Jack Daniels",
 "mobile":"21223",
 "start":"2021-02-25T09:16:21.000000Z",
 "end":"2021-02-25T09:16:21.000000Z"
 }]
};
Object.entries(response).forEach(([key,value])=>{
          console.log(`${key}:${value[0].id}`)
})

Здесь значение представляет собой массив, поэтому повторите значение, чтобы получить свойства. Это всего лишь пример для демонстрации логики.

Комментарии:

1. Эй, чувак, спасибо за ваш повтор, предположим, у меня есть более одной итерации данных, как я могу этого добиться? Спасибо

2. Вы можете использовать foreach для перебора массива объектов

Метки: