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.