CODEWITHSUNDEEP
javascriptjquery
Kurkula
Kurkula

Reputation: 6762

Jquery adding items to Object failing

var selectedCountries = {};

var id = 1;
var profile = {};

$(".countriesSelection").find('span').each(function() {
  var countryName = $(this).text();
  var profile1 = {};
  profile1.id = id;
  profile1.countryName = countryName;

  $.extend(profile, profile1);
});

$.extend(selectedCountries, profile);

console.log(selectedCountries);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="countriesSelection">
  <span>India</span>
  <span>USA</span>
  <span>China</span>
  <span>Japan</span>
</div>

I am trying to loop through spans in a div and add the values of spans to a object with one id. I am trying the below, but it adds only one item, how can I add every country and id to object?

my Fiddle

Upvotes: 2

Views: 69

Answers (5)

Narendra Jadhav
Narendra Jadhav

Reputation: 10262

You could use the jQuery map method to return an array to get the required result with combinations of ES6.

The map() method creates a new array with the results of calling a provided function on every element in the calling array.

DEMO

const id = 1;

let profile = $.map($(".countriesSelection span"), item => {
  return {id,countryName:$(item).text()};
})

console.log(profile);
.as-console-wrapper { max-height: 100% !important; top: 0; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="countriesSelection">
  <span>India</span>
  <span>USA</span>
  <span>China</span>
  <span>Japan</span>
</div>

Upvotes: 1

Shridhar Sharma
Shridhar Sharma

Reputation: 2385

You should use array instead of object for variable selectedCountries

Run the following snippet

var selectedCountries = [];

var id = 1;

$(".countriesSelection").find('span').each(function() {
  var countryName = $(this).text();
  var profile1 = {};
  profile1.id = id;
  profile1.countryName = countryName;

  selectedCountries.push(profile1)
});

console.log(selectedCountries);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="countriesSelection">
  <span>India</span>
  <span>USA</span>
  <span>China</span>
  <span>Japan</span>
</div>

Upvotes: 4

PHP Worm...
PHP Worm...

Reputation: 4224

You need to use An array of objects for this. Simply use this code.

https://jsfiddle.net/xh8L2594/21/

var selectedCountries = []
var id = 1;
$(".countriesSelection").find('span').each(function() {
  var countryName = $(this).text();
  selectedCountries.push({
  id:id, // update id accordingly
  country:countryName
  }) 
});

console.log(selectedCountries);

Upvotes: 1

CertainPerformance
CertainPerformance

Reputation: 371198

With $.extend, you're overwriting any previous properties assigned. If the first iteration turns profile into { id: 1, countryName: 'India' }, the second iteration will overwrite those properties to { id: 2, countryName: 'USA' }.

You should probably use an array instead of an object, and then push to the array - and avoid jQuery entirely, there's no need for it.

const selectedCountries = [...document.querySelectorAll('.countriesSelection > span')]
  .map((span, i) => ({ id: i + 1, countryName: span.textContent }));
console.log(selectedCountries);
<div class="countriesSelection">

<span>India</span>
<span>USA</span>
<span>China</span>
<span>Japan</span>

</div>

Upvotes: 2

R.K.Saini
R.K.Saini

Reputation: 2708

You need to store it in array using array.push() instead of $.extend. Using extend replacing property of old object. That's why you getting last value only.

Try this:

 

var id = 1;
var profile = [];

$(".countriesSelection").find('span').each(function() {
  var countryName = $(this).text();
  var profile1 = {};
  profile1.id = id;
  profile1.countryName = countryName;

  profile.push(profile1);
});



console.log(profile);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="countriesSelection">
  <span>India</span>
  <span>USA</span>
  <span>China</span>
  <span>Japan</span>
</div>

Upvotes: 2

Related Questions