data.map не є функцією


110

Я б'юся головою про помилку, яку не можу зрозуміти, як виправити. У мене є таке;

JSON

{"products":
[
    {
        "product_id" : "123",
        "product_data" : {
            "image_id" : "1234",
            "text" : "foo",
            "link" : "bar",
            "image_url" : "baz"
        }
    },{
        "product_id" : "456",
        "product_data" : {
            "image_id" : "1234",
            "text" : "foo",
            "link" : "bar",
            "image_url" : "baz"
        }
    }
]}

та наступний jQuery

function getData(data) {
    this.productID = data.product_id;
    this.productData = data.product_data;
    this.imageID = data.product_data.image_id;
    this.text = data.product_data.text;
    this.link = data.product_data.link;
    this.imageUrl = data.product_data.image_url;
}

$.getJSON("json/products.json").done(function (data) {

    var allProducts = data.map(function (item) {
        return new getData(item);
    });
});

але я отримую повідомлення про помилку, що map.data не визначена як функція? Дивлячись на це, я не знаю, що не працює, оскільки скопіював це в новий проект із раніше використовуваного коду. Різниться лише джерело JSON. У попередньому не було {"products":частини перед дужками []. Це те, що мене відкидає?


72
Будь ласка, більше не бий собі голову - ми це
Марк К.

map.data або data.map?
виїзд

Відповіді:


187

Об'єкти {}в JavaScript не мають методу .map(). Це лише для масивів ,[] .

Отже, для того, щоб ваш код працював, змініть data.map()на, data.products.map()оскільки productsце масив, який ви можете переглядати.


iwow це працює, велике спасибі, у мене були такі ж проблеми, був ряд до даних
Anoop PS

63

Правильним способом перебору об'єктів є

Object.keys(someObject).map(function(item)...
Object.keys(someObject).forEach(function(item)...;

// ES way
Object.keys(data).map(item => {...});
Object.keys(data).forEach(item => {...});

Детальніше читайте тут


10
іноді ви можете шукати значення не ключі> Object.values ​​(someObject) .map (функція (елемент) ... // замість ключів
Рам

7

ПРОСТІЙШИЙ відповідь поставити «дані» в пару квадратних дужок (тобто [дані] ):

     $.getJSON("json/products.json").done(function (data) {

         var allProducts = [data].map(function (item) {
             return new getData(item);
         });

     });

Тут [data] є масивом, і на ньому можна використовувати метод ".map" . Це працює для мене! введіть тут опис зображення


Чи не просто це створює новий масив лише з одним елементом даних - вашим початковим об'єктом? Навіщо вам це наносити на карту? var data = {foo: 'bar'}; [data].map(function (item) { console.log(item); });
EpicVoyage

Так, це ПРОСТО створює новий масив лише з одним елементом даних. У цьому немає нічого поганого. Це не те, що мені потрібно картографувати. Це конкретний проект, який потрібно скласти. Якщо йому потрібно зіставити карту, але ваші дані не є масивом, буде помилка. Перетворення його в масив просто змінює його формат, а не значення, і це якраз те, що потрібно проекту.
Вільям Хоу,

Можливо, мені чогось не вистачає. Мені здається, що ваш приклад зробив би те саме без карти:$.getJSON("json/products.json").done(function (data) { var allProducts = new getData(data); });
EpicVoyage

Моя оригінальна відповідь дуже, дуже, дуже проста - це просто перетворення даних у масив, щоб НЕ ТІЛЬКИ зникала помилка "data.map не є функцією", але, що більш важливо, метод .map також буде РОБОТАЙТЕ для отримання правильних результатів. Більш нічого.
Вільям Хоу,

"EpicVoyage" - проблема тут у тому, що ви не розумієте питання. Оригінальне запитання: "data.map не є функцією", і, будь ласка, перейдіть у верх сторінки та подивіться на нього. Це не МОЙ проект. Повторюю: це НЕ МОЙ ПРОЕКТ. Це те, як виправити помилку "data.map не є функцією".
Вільям Хоу,


1

Якщо ви хочете нанести об’єкт на карту, ви можете використовувати Lodash. Просто переконайтеся, що він встановлений через NPM або Пряжа та імпортуйте його.

З Лодашем:

Lodash надає функцію _.mapValuesзіставлення значень та збереження ключів.

_.mapValues({ one: 1, two: 2, three: 3 }, function (v) { return v * 3; });

// => { one: 3, two: 6, three: 9 }

0

Ви завжди можете зробити наступне:

const SomeCall = request.get(res => { 

const Store = []; 
Store.push(res.data);

Store.forEach(item => { DoSomethingNeat 
});
}); 

0
this.$http.get('https://pokeapi.co/api/v2/pokemon')
.then(response => {
   if(response.status === 200)
   {
      this.usuarios = response.data.results.map(usuario => {
      return { name: usuario.name, url: usuario.url, captched: false } })
          }
    })
.catch( error => { console.log("Error al Cargar los Datos: " + error ) } )

Привіт, Фернандо, і ласкаво просимо до Stack Overflow! Це веб-сайт лише на англійській мові. Я відредагував частину Вашої відповіді, яка не була опублікована англійською мовою. Не соромтеся перекладати його та додавати повторно.
Піка-Чарівник Китів,

0

дані повинні бути об'єктом Json, для цього переконайтесь, що:

data = $.parseJSON(data);

Тепер ви можете зробити щось на зразок:

data.map(function (...) {
            ...
        });

Я сподіваюся, це допоможе комусь


-1

Під час $.map()виклику сталася помилка , спробуйте:

    function getData(data) {
        this.productID = data.product_id;
        this.productData = data.product_data;
        this.imageID = data.product_data.image_id;
        this.text = data.product_data.text;
        this.link = data.product_data.link;
        this.imageUrl = data.product_data.image_url;
    }

    $.getJSON("json.json?sdfsdfg").done(function (data) {

        var allPosts = $.map(data,function (item) {

            for (var i = 0; i < item.length; i++) {
                new getData(item[i]);
            };

        });

    }); 

Помилка у вашому коді полягала в тому, що ви зробили returnпід час виклику AJAX, тому він виконувався лише один раз.

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.