data.map nie jest funkcją


110

Walę się w głowę o błąd, którego nie potrafię naprawić. Mam następujące;

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"
        }
    }
]}

i następujące 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);
    });
});

jeszcze otrzymuję błąd, że map.data jest niezdefiniowana jako funkcja? Patrząc na to, nie wiem, co nie działa, ponieważ skopiowałem to do nowego projektu z wcześniej używanego kodu. Jedyną różnicą jest źródło JSON. Poprzedni nie miał {"products":części przed nawiasami []. Czy to mnie wkurza?


72
Proszę, nie bij się więcej w głowę - przejdziemy przez to ...
— Mark C.

map.data czy data.map?
— depperm

Odpowiedzi:


187

Obiekty {}w JavaScript nie mają metody .map(). To tylko dla tablic , [].

Tak więc, aby kod działał, zmień data.map()na, data.products.map()ponieważ productsjest tablicą, po której możesz iterować.


iwow to działa, wielkie dzięki, miałem te same problemy, że przed danymi był wiersz
— Anoop PS

63

Właściwą metodą iteracji po obiektach jest

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

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

Przeczytaj tutaj, aby uzyskać szczegółowe informacje


10
czasami możesz szukać wartości, a nie kluczy> Object.values ​​(someObject) .map (function (item) ... // zamiast kluczy
— Ram

7

Najprostszą odpowiedzią jest umieszczenie „dane” w parę nawiasów kwadratowych (czyli [dane] ):

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

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

     });

Tutaj [dane] to tablica i można na niej użyć metody „.map” . Mi to pasuje! wprowadź opis obrazu tutaj


Czy nie tworzy to po prostu nowej tablicy z tylko jednym elementem danych - oryginalnym obiektem? Dlaczego musisz to zmapować? var data = {foo: 'bar'}; [data].map(function (item) { console.log(item); });
— EpicVoyage

Tak, po prostu tworzy nową tablicę z tylko jednym elementem danych. Nie ma w tym nic złego. To nie ja muszę mapować. To konkretny projekt, który należy zmapować. Jeśli wymaga mapowania, ale dane nie są tablicą, wystąpi błąd. Przekształcenie go w tablicę zmienia tylko jego format, a nie wartości, a tego właśnie potrzebuje projekt.
— William Hou

Mogę coś przeoczyć. Wydaje mi się, że twój przykład zrobiłby to samo bez mapy:$.getJSON("json/products.json").done(function (data) { var allProducts = new getData(data); });
— EpicVoyage

Moja pierwotna odpowiedź jest bardzo, bardzo, bardzo prosta - wystarczy przekonwertować dane na tablicę, aby NIE TYLKO błąd „data.map nie jest funkcją” ZNIKAŁO, ale co ważniejsze, metoda .map również PRACUJ, aby uzyskać prawidłowe wyniki. Nic więcej.
— William Hou

„EpicVoyage” - problem polega na tym, że nie rozumiesz pytania. Oryginalne pytanie brzmi „data.map nie jest funkcją”. Przejdź na górę strony i przyjrzyj się temu. To nie jest MÓJ projekt. Powtarzam: TO NIE JEST MÓJ PROJEKT. Jak naprawić błąd „data.map nie jest funkcją”.
— William Hou


1

Jeśli chcesz zmapować obiekt, możesz użyć Lodash. Po prostu upewnij się, że jest zainstalowany przez NPM lub Yarn i zaimportuj go.

Z Lodash:

Lodash udostępnia funkcję _.mapValuesmapowania wartości i zachowywania kluczy.

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

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

0

Zawsze możesz wykonać następujące czynności:

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 ) } )

Witaj Fernando i witaj w Stack Overflow! To jest witryna wyłącznie w języku angielskim. Usunąłem część Twojej odpowiedzi, która nie została opublikowana w języku angielskim. Zapraszam do przetłumaczenia i ponownego dodania.
— Pika the Wizard of the Whales

0

dane muszą być obiektem Json, aby to zrobić, upewnij się, że:

data = $.parseJSON(data);

Teraz możesz zrobić coś takiego:

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

Mam nadzieję, że to komuś pomoże


-1

Wystąpił błąd przy $.map()wywołaniu, spróbuj tego:

    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]);
            };

        });

    }); 

Błąd w kodzie polegał na tym, że returnwykonałeś wywołanie AJAX, więc zostało wykonane tylko raz.

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.