How to get javascript/jquery array content?

Question

Good afternoon, Stack Overflow.

I’m feeling huge difficulty getting content from a specific javascript array.

In the first lines of javascript code it looks like this.
Loose

var arrayIDs = [];

After a while, it executes the following code

$(".form-group").find('*').each(function() {

    var id = $(this).attr("id");
    if ($("#" + id).val() > 0) {
        if ($("#" + id).data("id-produto-item") != undefined) {
     arrayIDs.push({
         id_produto_itens: $("#" + id).data("id-produto-item"),
         id_proposta: numeroProposta
     });
   }
}
});

After the data is filled in, I ultimately need to manipulate them.

When I give a.log console in ID arrays, this appears to me here:

*→ []
→ 0: {id_produto_itens: 150, id_proposta: "123"}
→ 1 : {id_produto_itens: 160, id_proposta: "123"}
→ 2: {id_produto_itens: 176, id_proposta: "123"}
→ 3: {id_produto_itens: 175, id_proposta: "123"}
length: 4__proto__: Array(0)*

The problem occurs when I want to scroll through the values as follows, so it doesn’t even enter into the $.each

No error message or anything, so when I put a console.log("message") or enter this "message"

$(document).on('click','#btnSalvar',function () {
   $.each(arrayIDs, function (key, value) {
      console.log("mensagem")
      console.log(arrayIDs.id_produto_itens);
   });
});

The question is, how to get the contents of this array?

Edit 1: I will put exactly when each stretch is called

Answer 1

Your array is not an object JQuery, so it doesn’t work on each().

Convert it to an object JQuery and the same will work:

let arrayIDs = [];

arrayIDs.push({
  "id_produto_itens": 1
},
{
  "id_produto_itens": 2
});

$(arrayIDs).each(function (key, value) {
    console.log(arrayIDs[key].id_produto_itens);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 2

You can take the element that is being iterated on each using this.

var arrayIDs = [
  {id_produto_itens: 150, id_proposta: "123"},
  {id_produto_itens: 160, id_proposta: "123"},
  {id_produto_itens: 176, id_proposta: "123"},
  {id_produto_itens: 175, id_proposta: "123"}
];

 $.each(arrayIDs, function () {
    console.log("id_produto_itens: " + this.id_produto_itens + ", id_proposta: " + this.id_proposta);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 3

An alternative only with JS without having to convert your array for a objeto JQuery is using the method foreach() performing a given function on each element of a array, so you will need to create a function to access the elements of your array.

Below, I created a function that displays the value id_produto_itens of the array and put this function as a parameter of the forEach().

var arrayIDs = [];

arrayIDs.push({id_produto_itens: 150, id_proposta: "123"});
arrayIDs.push({id_produto_itens: 160, id_proposta: "123"});
arrayIDs.push({id_produto_itens: 176, id_proposta: "123"});
arrayIDs.push({id_produto_itens: 175, id_proposta: "123"});

arrayIDs.forEach(function(item) {
    console.log(item.id_produto_itens);
});

Answer 4

Your code is absolutely correct, EXCEPT who forgot to add the index [key] when calling the array item:

                  faltou isso
                      ↓
console.log(arrayIDs[key].id_produto_itens);

However, I would suggest that you use the parameter value representing each item of the array:

$.each(arrayIDs, function (key, value) {
   console.log("mensagem")
    console.log(value.id_produto_itens);
});

See working:

var arrayIDs = [];

arrayIDs.push(
{
     id_produto_itens: 1,
     id_proposta: 123
},
{
     id_produto_itens: 2,
     id_proposta: 123
}
);

$.each(arrayIDs, function (key, value) {
   console.log("mensagem")
    console.log(value.id_produto_itens);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>