jQuery $.each - Iterate over an array of objects and select a field for each object

Question

I have an array of objects like below, let's say arrayValues:

{ field1 : "933", field2 : "something", fieldN: "344" }
{ field1 : "21", field2 : "something", fieldN: "344" }
{ field1 : "34", field2 : "something", fieldN: "344" }

Using jQuery foreach I am trying to get value of field1 for each object in the array and then add them to another array, let's say newArray:

var newArray = [];
$.each(arrayValues, function () {   
   newArray.push('what to put here?');
});

At the end, newArray should contain: 933, 21, 34

How to do this?

You could use plain js `map` method here `const newArray = data.map(({field1}) => field1)` — Nenad Vracar, Mar 17 '20 at 14:58
Does this answer your question? [From an array of objects, extract value of a property as array](https://stackoverflow.com/questions/19590865/from-an-array-of-objects-extract-value-of-a-property-as-array) — Yevhen Horbunkov, Mar 17 '20 at 15:16

Rory McCrossan · Accepted Answer · 2020-03-17T15:03:45.793

5

You don't need jQuery for this. jQuery is a framework primarily for amending the DOM. For working with arrays you just need plain old Javascript. As such, simply using map() will build the array you require:

let arrayValues = [
  { field1 : "933", field2 : "something", fieldN: "344" },
  { field1 : "21", field2 : "something", fieldN: "344" },
  { field1 : "34", field2 : "something", fieldN: "344" }
]

let newArray = arrayValues.map(o => o.field1);
console.log(newArray);

Note that if you would prefer to have the values as integers use o => parseInt(o.field1, 10)

If, for whatever reason, you did want to do this in jQuery then you would use $.map():

let newArray = $.map(arrayValues, o => o.field1);

edited Mar 17 '20 at 15:03

answered Mar 17 '20 at 14:58

Rory McCrossan

331,213
40
305
339

I wonder, how many `map()`-posts have in their portfolio guys with 100k+ rep – Yevhen Horbunkov Mar 17 '20 at 15:20
More than a few :) – Rory McCrossan Mar 17 '20 at 16:09
It works but compiler says error syntax in lambda => – Willy Mar 17 '20 at 16:49
1

It sounds like you need a better compiler that supports ES6. You can use anonymous functions instead: `let newArray = arrayValues.map(function(o) { return o.field1; });` – Rory McCrossan Mar 17 '20 at 16:51
Also, once I have newArray I would like to iterate it by applying newArray.forEach but it is not recognized. Is not newArray an array? since I cannot apply forEach. – Willy Mar 17 '20 at 17:00
`newArray` is absolutely an array, and `forEach()` works fine: https://jsfiddle.net/jdeg73x9/. I'm not sure what the issue is, but something in your code is clearly incorrect – Rory McCrossan Mar 17 '20 at 17:02
It works sorry. For some reason intellisense in Visual Studio was failing. – Willy Mar 17 '20 at 17:28
Ah yeah, I'd suggest disabling intellisense for JS in Visual Studio - it's awful. Works great everywhere else, though. – Rory McCrossan Mar 17 '20 at 17:56

Twisty · Answer 2 · 2020-03-17T16:26:56.907

Consider the following code.

$(function() {
  var arr = [{
      field1: "933",
      field2: "something",
      fieldN: "344"
    },
    {
      field1: "21",
      field2: "something",
      fieldN: "344"
    },
    {
      field1: "34",
      field2: "something",
      fieldN: "344"
    }
  ]

  var newArr = [];

  $.each(arr, function(k, v) {
    newArr.push(parseInt(v.field1, 10));
  });
  console.log(newArr);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Please review: https://api.jquery.com/jquery.each/

The $.each() function is not the same as $(selector).each(), which is used to iterate, exclusively, over a jQuery object. The $.each() function can be used to iterate over any collection, whether it is an object or an array. In the case of an array, the callback is passed an array index and a corresponding array value each time. (The value can also be accessed through the this keyword, but Javascript will always wrap the this value as an Object even if it is a simple string or number value.) The method returns its first argument, the object that was iterated.

jQuery $.each - Iterate over an array of objects and select a field for each object

2 Answers2