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?

mrcat
źródło
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ć.

Henrik Andersson
źródło
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

user3930374
źródło
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

William Hou
źródło
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
4

data nie jest tablicą, jest obiektem z tablicą produktów, więc należy ją powtarzać data.products

var allProducts = data.products.map(function (item) {
    return new getData(item);
});
Arun P Johny
źródło
Cześć, mam ten sam błąd, czy możesz na to spojrzeć .. stackoverflow.com/questions/57834351/
hafizi hamid
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 }
Bill King
źródło
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 
});
}); 
Daniel Ryan Snell
źródło
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 ) } )
Fernando Betancourt
źródło
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

Kenlly Acosta
źródło
-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.

Giacomo Paita
źródło