data.map is not a function

Question

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?

Please don't bash your head anymore - we will get through this... — Mark C.
– Mark C., Commented Jun 12, 2015 at 12:51

ΩmegaMan · Accepted Answer · 2021-06-17 14:33:36Z

349

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.

edited Jun 17, 2021 at 14:33

ΩmegaMan

32.2k13 gold badges110 silver badges138 bronze badges

answered Jun 12, 2015 at 12:35

Henrik Andersson

47.5k16 gold badges102 silver badges94 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Anoop P S Over a year ago

iwow it works , thanks a lot i had same issues there was a row before the data

Adil · Accepted Answer · 2017-08-18 12:46:39Z

97

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

edited Aug 18, 2017 at 12:46

Adil

22.6k7 gold badges31 silver badges56 bronze badges

answered Jan 30, 2017 at 23:34

user3930374

1,0718 silver badges7 bronze badges

2 Comments

Ram Over a year ago

sometimes you might be looking for values not keys > Object.values(someObject).map(function(item)... //instead of keys

Khawar Qureshi Over a year ago

sometimes you might be looking for both Key and Values => Object.entries(someObject).forEach(([key, value]) => console.log(${key}: ${value}));

William Hou · Accepted Answer · 2021-10-29 22:13:17Z

27

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

edited Oct 29, 2021 at 22:13

answered Nov 12, 2019 at 19:19

William Hou

1,87919 silver badges21 bronze badges

11 Comments

EpicVoyage Over a year ago

Doesn't this simply create a new array with only one data element - your original object? Why do you need to map that? var data = {foo: 'bar'}; [data].map(function (item) { console.log(item); });

William Hou Over a year ago

Yes, it DOES simply create a new array with only one data element. There is nothing wrong with that. It's not that I who need to map. It's the specific project that needs to map. If it needs to map but your data is not an array, there'll be an error. Converting it to an array just changes its format, not its values, and that's just what the project needs.

EpicVoyage Over a year ago

I might be missing something. It seems to me that your example would do the same thing without the map: $.getJSON("json/products.json").done(function (data) { var allProducts = new getData(data); });

Moataz Elmasry Over a year ago

@WilliamHou Let me explain the problem here with an analogy. OP has a lockbox which he needs help opening but only has a hammer that doesn't work. Instead of providing him with the key, you are suggesting he put the lockbox in a wooden box and then smash the wooden box with the hammer. Yes, he has now used the hammer but he still has the original problem -- a locked lockbox.

user229044 Over a year ago

This is a nonsensical solution, and objectively incorrect in the context of the question. The answer is to use data.products.map, not to wrap data in an array. Your answer causes the entire data object to be passed into getData, which clearly expects one of the elements from data.products as its input, not the entire data object. Your answer will cause the program to blow up when a line like this.imageID = data.product_data.image_id; is reached. Even if this weren't the case, layering an arbitrary object in an array just so map is available is still nonsensical.

|

Arun P Johny · Accepted Answer · 2015-06-12 12:35:24Z

6

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

answered Jun 12, 2015 at 12:35

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

Comments

Matt · Accepted Answer · 2018-10-16 13:41:59Z

3

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 }

edited Oct 16, 2018 at 13:41

Matt

1,5804 gold badges17 silver badges31 bronze badges

answered Oct 16, 2018 at 13:24

Bill King

313 bronze badges

Comments

Alwaysblue · Accepted Answer · 2019-11-13 03:08:56Z

2

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

edited Nov 13, 2019 at 3:08

Alwaysblue

12.2k45 gold badges144 silver badges257 bronze badges

answered Dec 18, 2018 at 3:38

Kenlly Acosta

90112 silver badges14 bronze badges

Comments

Daniel Ryan Snell · Accepted Answer · 2017-12-30 17:59:22Z

0

You can always do the following:

const SomeCall = request.get(res => { 

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

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

answered Dec 30, 2017 at 17:59

Daniel Ryan Snell

1195 bronze badges

Comments

Picachieu · Accepted Answer · 2019-03-07 01:27:04Z

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

edited Mar 7, 2019 at 1:27

Picachieu

3,81010 gold badges29 silver badges46 bronze badges

answered Mar 7, 2019 at 1:24

Fernando Betancourt

1

1 Comment

Picachieu Over a year ago

Hello Fernando, and welcome to Stack Overflow! This is an English-only site. I have edited out the part of your answer that was not posted in English. Feel free to translate it and re-add it.

pankaj · Accepted Answer · 2025-08-20 08:15:42Z

0

you can use this way tooo.

// Convert Data  to array using Array.from()
    Array.from( data ).forEach(item => {
       // your logic...
    });

answered Aug 20 at 8:15

pankaj

1,97026 silver badges37 bronze badges

Comments

Giacomo Paita · Accepted Answer · 2015-06-12 12:52:42Z

-1

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.

edited Jun 12, 2015 at 12:52

answered Jun 12, 2015 at 12:41

Giacomo Paita

1,4192 gold badges12 silver badges22 bronze badges

Collectives™ on Stack Overflow

data.map is not a function

10 Answers 10

1 Comment

2 Comments

11 Comments

Comments

Comments

Comments

Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

10 Answers 10

1 Comment

2 Comments

11 Comments

Comments

Comments

Comments

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related