How to store and retrieve values from an object in using jQuery-CodePudding

I am trying to store the names and heights of several div tags in an object for later use. I am attempting to do this by finding the divs with class "hidden," then registering their names and heights in an .each loop. However, when I attempt to my code, I will either get the same div tag's name and value repeated several times, or I will just get the initial values of the object.

    var heightMap = {name:'x',value:'y'};
    function setHeightMap() {
        $( ".hidden" ).each(function() {
            $setName = $( this ).attr('id');
            $setValue = $( this ).height();
        });
        $heightMap.push({'name':$setName, 'value':$setValue});
    };
    console.log(heightMap);

CodePudding user response：

Use the map function to loop over all the elements with the CSS class .hidden and return an object with the name and value for each element. The result will be and array with objects.

var heightMap = $(".hidden").map((index, element) => {
  const $element = $(element);
  const name = $element.attr('id');
  const value = $element.height();
  return ({ name, value });
});

CodePudding user response：

Consider the following.

$(function() {
  var heightMap = [];

  function setHeightMap() {
    $(".hidden").each(function(i, el) {
      heightMap.push({
        name: $(el).attr("id"),
        height: $(el).height()
      });
    });
  };

  setHeightMap();
  console.log(heightMap);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <div  style="width: 20px; height: 30px;" id="obj-1"></div>
  <div  style="width: 30px; height: 60px;" id="obj-2"></div>
  <div  style="width: 40px; height: 120px;" id="obj-3"></div>
  <div  style="width: 50px; height: 240px;" id="obj-4"></div>
</div>

You cannot use .push() on an Object. You will want to set this to be an Array and then you can push Objects into it.

You will want to use .push() inside your Each loop.

You can also use .map() in a similar method.

$(function() {
  var heightMap = $(".hidden").map(function(i, el) {
    return {
      name: $(el).attr("id"),
      height: $(el).height()
    };
  });

  console.log(heightMap.get());
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <div  style="width: 20px; height: 30px;" id="obj-1"></div>
  <div  style="width: 30px; height: 60px;" id="obj-2"></div>
  <div  style="width: 40px; height: 120px;" id="obj-3"></div>
  <div  style="width: 50px; height: 240px;" id="obj-4"></div>
</div>

As the return value is a jQuery object, which contains an array, it's very common to call .get() on the result to work with a basic array.

See more: https://api.jquery.com/map/

CodePudding user response：

You must push the values inside the each loop.

The original code only added a single height descriptor object: The one based on the values from the last iteration.

Moreover ...

heightMap should be an array
heightMap and $heightMap are differwnt entities !
The function setHeightMap must actually be called.

Corrected version:

    var heightMap = [{name:'x',value:'y'}];
    function setHeightMap() {
        $( ".hidden" ).each(function() {
           $setName = $( this ).attr('id');
           $setValue = $( this ).height();

           // Must be called inside the loop !
           heightMap.push({'name':$setName, 'value':$setValue});
        });
    }
    setHeightMap();

    console.log(heightMap);