JQUERY - Get Value and display in Array value (as expected below)

Question

Used below code of HTML/JS to meet my requirement. Individually I am able to get the values as expected.

But, I need to insert extracted values in array format as expected below. I am not able to do this with this JS code approach.

var getOfferCode;
var getRoomCode;
var getTitle;
var combinedArr = [];

$('.wrapper-container').each(function() {
    getOfferCode = $(this).find('.list-item').attr('data-offer-code');
    getRoomCode = $(this).find('.list-item').attr('data-room-code');
    getTitle = $(this).find('.list-item h2').html();
    combinedArr.push();
});
console.log(combinedArr)

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

<div class="wrapper-container">
    <div class="list-item" data-offer-code="sss" data-room-code="Twin">
        <h2>Title 1</h2>
    </div>
    <div class="list-item" data-offer-code="fff" data-room-code="Max">
        <h2>Title 2</h2>
    </div>
    <div class="list-item" data-offer-code="ddd" data-room-code="Min">
        <h2>Title 2</h2>
    </div>
</div>

Expected format:

roomArray: {
  [
    {
        offerCode: "sss",
        roomCode: "Twin",
        title: "Title 1"
    },
    {
        offerCode: "fff",
        roomCode: "Max",
        title: "Title 2"
    },
    {
        offerCode: "ddd",
        roomCode: "Min",
        title: "Title 3"
    }
  ]
}

What is a .push() call without any arguments supposed to do (combinedArr.push())? — Andreas
– Andreas, Commented Feb 4, 2021 at 7:18

mplungjan · Accepted Answer · 2021-02-04 08:01:53Z

The .push method needs parameters - the object you want to push

for example

combinedArr.push({getOfferCode,getRoomCode,getTitle});

Additionally your each is only getting the FIRST entry because you only have ONE wrapper. You ned to loop over .list-item.

A map of the list items is more elegant

const roomArray = $('.wrapper-container div.list-item').map(function() {
  const offerCode = $(this).attr('data-offer-code');
  const roomCode = $(this).attr('data-room-code');
  const title = $(this).find('h2').html();
  return { offerCode, roomCode, title }
}).get();
console.log(roomArray)

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

<div class="wrapper-container">
  <div class="list-item" data-offer-code="sss" data-room-code="Twin">
    <h2>Title 1</h2>
  </div>
  <div class="list-item" data-offer-code="fff" data-room-code="Max">
    <h2>Title 2</h2>
  </div>
  <div class="list-item" data-offer-code="ddd" data-room-code="Min">
    <h2>Title 3</h2>
  </div>
</div>

Here is your code fixed

var getOfferCode;
var getRoomCode;
var getTitle;
var combinedArr = [];

$('.wrapper-container .list-item').each(function() {
    getOfferCode = $(this).attr('data-offer-code');
    getRoomCode = $(this).attr('data-room-code');
    getTitle = $(this).find('h2').html();
    combinedArr.push({getOfferCode,getRoomCode,getTitle});
});
console.log(combinedArr)

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

<div class="wrapper-container">
    <div class="list-item" data-offer-code="sss" data-room-code="Twin">
        <h2>Title 1</h2>
    </div>
    <div class="list-item" data-offer-code="fff" data-room-code="Max">
        <h2>Title 2</h2>
    </div>
    <div class="list-item" data-offer-code="ddd" data-room-code="Min">
        <h2>Title 2</h2>
    </div>
</div>

Aalexander · Accepted Answer · 2021-02-04 08:11:05Z

0

You can loop over the div's inside your wrapper element and get the attributes values with attr().

Then build a object with these values and push it inside your combinedArr array.

var getOfferCode;
var getRoomCode;
var getTitle;
var combinedArr = [];

$('.wrapper-container > div').each(function() {

  getOfferCode = $(this).attr("data-offer-code");
  getRoomCode = $(this).attr("data-room-code");
  getTitle = $(this).children('h2').html();
  
  const obj = {
    offerCode: getOfferCode,
    roomCode: getRoomCode,
    title: getTitle,
  }

  combinedArr.push(obj);
});

console.log(combinedArr);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper-container">
  <div class="list-item" data-offer-code="sss" data-room-code="Twin">
    <h2>Title 1</h2>
  </div>
  <div class="list-item" data-offer-code="fff" data-room-code="Max">
    <h2>Title 2</h2>
  </div>
  <div class="list-item" data-offer-code="ddd" data-room-code="Min">
    <h2>Title 2</h2>
  </div>
</div>

edited Feb 4, 2021 at 8:11

answered Feb 4, 2021 at 7:29

Aalexander

4,9843 gold badges13 silver badges37 bronze badges

5 Comments

mplungjan Over a year ago

Still it is identical to my much earlier answer expect you create an object before pushing it

Aalexander Over a year ago

Hmmm, idk but maybe because you try to force things and criticize every other answer instead of just let it happen.

mplungjan Over a year ago

Because I invested time in this and gave the best answer. After my critiques, you all either improved your answer or deleted it. So I do not call that force

Aalexander Over a year ago

That is SO. You have so much REP more you should know this. I often have a better answer in my opinion but it will not get accepted, that's it. But there is no reason to fight for the accept like you do.

mplungjan Over a year ago

I normally just let it go. But I not only fixed OP's question to be a minimal reproducible example but also answered first with a better answer. That is more annoying that if they were all the same from the start

Daniel Vazquez · Accepted Answer · 2021-02-04 07:24:32Z

0

Push the object; you can get rid of the var's. Also, I think you need an arrow function to access the "this" from the outer scope.

$('.wrapper-container').each(() -> {
    combinedArr.push({
        offerCode: $(this).find('.list-item').attr('data-offer-code'),
        roomCode: $(this).find('.list-item').attr('data-room-code'),
        title: $(this).find('.list-item h2').html()
    });
});

answered Feb 4, 2021 at 7:24

Daniel Vazquez

315 bronze badges

1 Comment

mplungjan Over a year ago

This will not work any better since OP is only looping once. See my answer for a correct implementation

fiveobjects · Accepted Answer · 2021-02-04 07:45:57Z

0

In each iteration push all 3 values (offerCode, roomCode, and title) to the array as an object.

var combinedArr = [];

$(document).ready(function() {
  $('.wrapper-container').find('.list-item').each(function() {
    combinedArr.push({
      offerCode: $(this).attr('data-offer-code'),
      roomCode: $(this).attr('data-room-code'),
      title: $(this).find('h2').html()
    });
  });
  console.log(combinedArr);

  // Another way with map function
  let result = $('.wrapper-container').find('.list-item').map(function () {
      return {
         offerCode: $(this).attr('data-offer-code'),
         roomCode: $(this).attr('data-room-code'),
         title: $(this).find('h2').html()
      }
  });
  console.log(result.get());
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper-container">
  <div class="list-item" data-offer-code="sss" data-room-code="Twin">
    <h2>Title 1</h2>
  </div>
  <div class="list-item" data-offer-code="fff" data-room-code="Max">
    <h2>Title 2</h2>
  </div>
  <div class="list-item" data-offer-code="ddd" data-room-code="Min">
    <h2>Title 2</h2>
  </div>
</div>

edited Feb 4, 2021 at 7:45

answered Feb 4, 2021 at 7:33

fiveobjects

4,5871 gold badge22 silver badges18 bronze badges

1 Comment

fiveobjects Over a year ago

I really did not see your answer at all :) Looks the same except for some syntax difference. I wanted to show using both each (and explicit array formation) and map.

Collectives™ on Stack Overflow

JQUERY - Get Value and display in Array value (as expected below)

4 Answers 4

Comments

5 Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

5 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related