data.map is not a function

I'm bashing my head against an error I can't work out how to fix. I have the following;

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

and the following 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);
    });
});

yet I'm getting an error that map.data is undefined as a function? Looking at it I don't know what's not working as I've copied this to a new project from previously used code. The only thing different is the JSON source. The previous one didn't have the {"products": part before the [] brackets. Is this what's throwing me off?

Objects, {} in JavaScript do not have the method .map(). It's only for Arrays, [].

So in order for your code to work change data.map() to data.products.map() since products is an array which you can iterate upon.

The right way to iterate over objects is

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

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

Read here for details

In some cases (not in all), the SIMPLEST answer is to put "data" into a pair of square brackets (i.e. [data]) to change the items in the "data" into an array:

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

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

     });

Here, [data] is an array, and the ".map" method can be used on it. It works for me!

Or convert "data" into an array in the following way:

     let dataArr = Array.from(data);

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

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

     });

But the very question here is to get the "products" out of the "data":

     data.products

The "products" is an array.

And then ".map" can be used:

     data.products.map

data is not an array, it is an object with an array of products so iterate over data.products

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

If you want to map an object you can use Lodash. Just make sure it's installed via NPM or Yarn and import it.

With Lodash:

Lodash provides a function _.mapValues to map the values and preserve the keys.

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

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

data needs to be Json object, to do so please make sure the follow:

data = $.parseJSON(data);

Now you can do something like:

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

I hope this help some one

You can always do the following:

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

Solution: There is no map method for objects { }. Map method is for arrays which we declare like that [ ]. If you want your code to behaves properly for desired outcome you need to change data.map to data.products.map() because products is an array and you can easily iterate on it.

There is an error on $.map() invocation, try this:

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

	});	

The error in your code was that you made return in your AJAX call, so it executed only one time.