data.map no es una función

Me estoy golpeando la cabeza contra un error que no sé cómo solucionarlo. Tengo lo siguiente;

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

y el siguiente 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);
    });
});

Sin embargo, recibo un error de que map.data no está definido como función. Mirándolo, no sé qué es lo que no funciona, ya que lo he copiado en un nuevo proyecto a partir del código usado anteriormente. Lo único diferente es la fuente JSON. El anterior no tenía la {"products":parte antes de los corchetes []. ¿Es esto lo que me desconcierta?

Objetos, {}en JavaScript no tiene el método .map(). Es sólo para matrices , [].

Entonces, para que su código funcione, cambie data.map()a data.products.map()ya que productses una matriz sobre la que puede iterar.

La forma correcta de iterar sobre objetos es

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

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

Lea aquí para más detalles

La respuesta MÁS SENCILLA es poner "datos" en un par de corchetes (es decir, [datos] ):

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

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

     });

Aquí, [datos] es una matriz y el método ".map" se puede utilizar en ella. ¡Esto funciona para mi!

data no es una matriz, es un objeto con una matriz de productos, así que repita data.products

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

Si desea mapear un objeto, puede usar Lodash. Solo asegúrese de que esté instalado a través de NPM o Yarn e impórtelo.

Con Lodash:

Lodash proporciona una función _.mapValuespara mapear los valores y preservar las claves.

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

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

Siempre puede hacer lo siguiente:

const SomeCall = request.get(res => { 

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

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

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

los datos deben ser un objeto Json, para hacerlo, asegúrese de lo siguiente:

data = $.parseJSON(data);

Ahora puedes hacer algo como:

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

Espero que esto ayude a alguien

Hay un error en la $.map()invocación, intente esto:

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

        });

    }); 

El error en su código fue que hizo returnen su llamada AJAX, por lo que se ejecutó solo una vez.