jQuery map does not work with json array

Question

I have a $.post jQuery call that calls a php file. The file then returns a JSON encoded array. Then, the array is mapped to edit some of the data in the array. However, I get the error arr.map is not function.

Here is the array being passed in the $.post call.

[{"set":"Alpha","key":"256"},
{"set":"Omega","key":"671"},
{"set":"Theta","key":"762"},
{"set":"Beta","key":"462"}]

Here is the map function.

idHash = {'Alpha': '1', 'Beta': '2', 'Theta': '3', 'Omega': '4'};
var arr = arr.map(function(item){
    item.set = idHash[item.set]
    return item;
})

After the map function, the array should look like this.

[{"set":"1","key":"256"},
{"set":"4","key":"671"},
{"set":"3","key":"762"},
{"set":"2","key":"462"}]

Dharman · Accepted Answer · 2020-03-21 17:14:48Z

8

The array you are executing .map() would need to be a jquery object. If you set the result data equal to a jquery array with $ affixed to it you should able to use the jquery map utility. You can also use $.map(array, function(item){});,

https://jsfiddle.net/62v2a0cw/1/

idHash = {'Alpha': '1', 'Beta': '2', 'Theta': '3', 'Omega': '4'};

var arr = $.map(idHash, function(item){
    item.set = idHash[item.set];
    console.log(item);
    return item;
});

Please see jsFiddle link. Let me know if that helps. That is simply to assist with .map(). If you want to create an array of JSON objects, you could use jQuery .each() and push each key, value pair accordingly to an array. You could use manipulate the value on each iteration accordingly to your needs. Based on your comments, assuming the JSON you are working with identified by idHash is equal to {'Alpha': '1', 'Beta': '2', 'Theta': '3', 'Omega': '4'}

arr = [];
idHash = {'Alpha': '1', 'Beta': '2', 'Theta': '3', 'Omega': '4'};

$.each(idHash, function(key, value){
    // do whatever with the value before setting
    value *= 15;
    arr.push({"set": key, "key": value });
});    
console.log(arr);

https://jsfiddle.net/62v2a0cw/2/

edited Mar 21, 2020 at 17:14

Dharman♦

34k27 gold badges106 silver badges158 bronze badges

answered Jul 11, 2015 at 19:52

Alexander Staroselsky

39k16 gold badges83 silver badges98 bronze badges

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

5 Comments

ChrisRockGM Over a year ago

I get this error. TypeError: Cannot use 'in' operator to search for '2113' in and then it lists the array.

Alexander Staroselsky Over a year ago

What is idHash referring to? If you replace that with a console.log(item); the .map() works.

Alexander Staroselsky Over a year ago

.map() requires either a jquery object using the $ or to call it such as $.map(array, function(){});. The error may be just with the item.set line of code.

ChrisRockGM Over a year ago

idHash = {'Alpha': '1', 'Beta': '2', 'Theta': '3', 'Omega': '4'};

ChrisRockGM Over a year ago

The idHash is supposed to be updating the values under the set key in this array. [{"set":"Alpha","key":"256"}, {"set":"Omega","key":"671"}, {"set":"Theta","key":"762"}, {"set":"Beta","key":"462"}]

Abhishekh Gupta · Accepted Answer · 2015-07-11 21:06:35Z

1

Signature of .map() is:

jQuery.map( array, callback )

So, you can try this:

var data = [{"set":"Alpha","key":"256"},
{"set":"Omega","key":"671"},
{"set":"Theta","key":"762"},
{"set":"Beta","key":"462"}];

$.map(data, function(elem){
    elem.set = newValue;
    elem.key = newValue;
});

Here is the fiddle.

edited Jul 11, 2015 at 21:06

answered Jul 11, 2015 at 20:55

Abhishekh Gupta

6,2464 gold badges20 silver badges49 bronze badges

1 Comment

TC_Guy Over a year ago

This was the short, elegant answer I was hoping to find! Everyone else comes up with these convoluted explanations, but your example worked exactly as I needed it to. Thank you so much.

Collectives™ on Stack Overflow

jQuery map does not work with json array

2 Answers 2

5 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related