data.map não é uma função

101

Estou batendo minha cabeça contra um erro que não consigo descobrir como consertar. Eu tenho o seguinte;

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

e o seguinte 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);
    });
});

ainda estou recebendo um erro que map.data é indefinido como uma função? Olhando para ele, não sei o que não está funcionando, pois copiei isso para um novo projeto de um código usado anteriormente. A única coisa diferente é a fonte JSON. O anterior não tinha a {"products":parte antes dos colchetes []. É isso que está me confundindo?

mrcat
fonte
64
Por favor, não bata mais com a cabeça - vamos superar isso ...
Mark C.
map.data ou data.map?
depperm

Respostas:

172

Objetos, {}em JavaScript não possuem o método .map(). É só para Arrays , [].

Portanto, para que seu código funcione, mude data.map()para, data.products.map()pois productsé um array sobre o qual você pode iterar.

Henrik Andersson
fonte
iwow funciona, muito obrigado eu tive os mesmos problemas, houve uma briga antes dos dados
Anoop PS
61

A maneira certa de iterar sobre os objetos é

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

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

Leia aqui para detalhes

user3930374
fonte
10
às vezes você pode estar procurando por valores, não chaves> Object.values ​​(someObject) .map (function (item) ... // em vez de keys
Ram
5

O MAIS SIMPLES resposta é colocar "dados" em um par de colchetes (isto é, [dados] ):

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

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

     });

Aqui, [data] é uma matriz e o método ".map" pode ser usado nela. Funciona para mim! insira a descrição da imagem aqui

William Hou
fonte
3

data não é uma matriz, é um objeto com uma série de produtos, para iterar data.products

var allProducts = data.products.map(function (item) {
    return new getData(item);
});
Arun P Johny
fonte
Olá, recebi o mesmo erro, pode dar uma olhada ... stackoverflow.com/questions/57834351/…
hafizi hamid
1

Se você deseja mapear um objeto, você pode usar Lodash. Apenas certifique-se de que ele está instalado via NPM ou Yarn e importe-o.

Com Lodash:

Lodash fornece uma função _.mapValuespara mapear os valores e preservar as chaves.

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

// => { one: 3, two: 6, three: 9 }
Bill King
fonte
0

Você sempre pode fazer o seguinte:

const SomeCall = request.get(res => { 

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

Store.forEach(item => { DoSomethingNeat 
});
}); 
Daniel Ryan Snell
fonte
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
fonte
Olá Fernando, e bem-vindo ao Stack Overflow! Este é um site somente em inglês. Eu editei a parte de sua resposta que não foi postada em inglês. Sinta-se à vontade para traduzi-lo e adicioná-lo novamente.
Pika, o Mago das Baleias,
0

os dados precisam ser objeto Json, para fazer isso, certifique-se do seguinte:

data = $.parseJSON(data);

Agora você pode fazer algo como:

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

Espero que isso ajude alguém

Kenlly Acosta
fonte
-1

Ocorreu um erro na $.map()invocação, tente o seguinte:

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

        });

    }); 

O erro em seu código foi cometido returnem sua chamada AJAX, então ela foi executada apenas uma vez.

Giacomo Paita
fonte