Is there a way to push values into an empty object? I have here is a list of countries displaying the country name and population. I want to insert those values into an object much like the example below.

<ul class="countries">
    <li  class="country">
        <span class="country-name">Philippines</span>
        <span class="country-population">200</span>
        <span class="description">Blablabla</span>
    </li>
    <li class="country">
        <span class="country-name">Brunei</span>
         <span class="country-population">200</span>
         <span class="description">Blablabla</span>
     </li>
     <li class="country">
         <span class="country-name">Malaysia</span>
         <span class="country-population">400</span>
         <span class="country-population">Blablabla</span>
     </li>

</ul>

---

var countries = [
    {name: "Philippines", population: 200, description: "Blablabla"},
    {name: "Brunei", population: 200, description: "Tatatata"},
    {name: "Malaysia", population:4100, description: 'Zzazazaza'}
]

---

0: {name: "Philippines", population: 200, description: "Blablabla"}
1: {name: "Brunei", population: 200, description: "Tatatata"}
2: {name: "Malaysia", population: 400, description: "Zzazazaza"}

I tried the script below but only inserts the name of the country. How can also insert the population and description values?

var countries_new = [];

$('.countries > .country > .country-name').each(function() {
    countries_new.push({
        name: $(this).text()                
    });
}); 

Is there a way to push values into an empty object? I have here is a list of countries displaying the country name and population. I want to insert those values into an object much like the example below.

<ul class="countries">
    <li  class="country">
        <span class="country-name">Philippines</span>
        <span class="country-population">200</span>
        <span class="description">Blablabla</span>
    </li>
    <li class="country">
        <span class="country-name">Brunei</span>
         <span class="country-population">200</span>
         <span class="description">Blablabla</span>
     </li>
     <li class="country">
         <span class="country-name">Malaysia</span>
         <span class="country-population">400</span>
         <span class="country-population">Blablabla</span>
     </li>

</ul>

---

var countries = [
    {name: "Philippines", population: 200, description: "Blablabla"},
    {name: "Brunei", population: 200, description: "Tatatata"},
    {name: "Malaysia", population:4100, description: 'Zzazazaza'}
]

---

0: {name: "Philippines", population: 200, description: "Blablabla"}
1: {name: "Brunei", population: 200, description: "Tatatata"}
2: {name: "Malaysia", population: 400, description: "Zzazazaza"}

I tried the script below but only inserts the name of the country. How can also insert the population and description values?

var countries_new = [];

$('.countries > .country > .country-name').each(function() {
    countries_new.push({
        name: $(this).text()                
    });
}); 

• javascript
• jquery

Share Improve this question Follow edited Nov 14, 2018 at 9:50 Eugene Mihaylin 1,87633 gold badges1919 silver badges3232 bronze badges asked Nov 14, 2018 at 7:37 clestcruzclestcruz 1,11133 gold badges3434 silver badges8080 bronze badges

Add a ment  | 

6 Answers 6

Sorted by: Reset to default 5

You can use find() to get the reference of each context inside the loop. Also notice that + which is prefixed to change that text to a number type. You can also use parseInt() there. Using trim() will be helpful to remove extra leading and trailing whitespaces in the objects.

var countries = [];
$('.countries .country').each(function(){
  var countryRef = $(this);
  countries.push({
    name: countryRef.find('.country-name').text().trim(),
    population: +(countryRef.find('.country-population').text().trim()),
    description: countryRef.find('.description').text().trim()
  });
});
console.log(countries);

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="countries">
  <li class="country">
    <span class="country-name">Philippines</span>
    <span class="country-population">200</span>
    <span class="description">Blablabla</span>
  </li>
  <li class="country">
    <span class="country-name">Brunei</span>
    <span class="country-population">200</span>
    <span class="description">Blablabla</span>
  </li>
  <li class="country">
    <span class="country-name">Malaysia</span>
    <span class="country-population">400</span>
    <span class="country-population">Blablabla</span>
  </li>

</ul>

Loop over the .country elements instead, then find the elements within each .country with the other information. As per mock array, population seems to be a number and text() returns string, use Number() to convert it.

var countries_new = [];

$('.countries > .country').each(function() {
    countries_new.push({
        name: $(this).find(".country-name").text(),
        population: Number($(this).find(".country-population").text()),
        description: $(this).find(".description").text()
    });
});

console.log(countries_new);

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="countries">
        <li  class="country">
            <span class="country-name">Philippines</span>
            <span class="country-population">200</span>
            <span class="description">Blablabla</span>
        </li>
        <li class="country">
            <span class="country-name">Brunei</span>
            <span class="country-population">200</span>
            <span class="description">Blablabla</span>
        </li>
        <li class="country">
            <span class="country-name">Malaysia</span>
            <span class="country-population">400</span>
            <span class="description">Blablabla</span>
        </li>

    </ul>

You don't need jQuery for this, just select all countries and from that element select the values you want:

console.log(
  [...document.querySelectorAll('.countries>.country')].map(
    (el) => ({
      name: el.querySelector('.country-name').innerText.trim(),
      population: el.querySelector('.country-population')
        .innerText.trim(),
      description: el.querySelector('.description')
        .innerText.trim(),
    }),
  ),
);

<ul class="countries">
    <li  class="country">
        <span class="country-name">Philippines</span>
        <span class="country-population">200</span>
        <span class="description">P Blablabla</span>
    </li>
    <li class="country">
        <span class="country-name">Brunei</span>
        <span class="country-population">200</span>
        <span class="description">B Blablabla</span>
    </li>
    <li class="country">
        <span class="country-name">Malaysia</span>
        <span class="country-population">400</span>
        <span class="description">M Blablabla</span>
    </li>

</ul>

Assuming all your span elements have CSS classes starting with country- this would be a generic approach:

const countries = document.querySelectorAll('.country');

const result = [];

for (const country of countries) {
  let resEl = {};
  [...country.querySelectorAll('span[class^="country-"]')].forEach((span) => resEl[span.className.split('-')[1]] = span.innerText)
  result.push(resEl);
}

console.log(result)

<ul class="countries">
  <li class="country">
    <span class="country-name">Philippines</span>
    <span class="country-population">200</span>
    <span class="country-description">Blablabla</span>
  </li>
  <li class="country">
    <span class="country-name">Brunei</span>
    <span class="country-population">200</span>
    <span class="country-description">Blablabla</span>
  </li>
  <li class="country">
    <span class="country-name">Malaysia</span>
    <span class="country-population">400</span>
    <span class="country-description">Blablabla</span>
  </li>
</ul>

You actually not push values into an empty object , you will rather like to create an object and push that object inside an array. So basically you can use array map method which will return an array.

With only javascript you can use document.querySelectorAll which will select all the elements with specified selector( class in this case) .[...] is using spread syntax to convert a live collection to array so that array methods can be use. Here map is an array method. Inside this method create an object and return that

let k = [...document.querySelectorAll('.country')].map(function(curr) {
  return {
    name: curr.querySelector('.country-name').textContent.trim(),
    population: curr.querySelector('.country-population').textContent.trim(),
    description: curr.querySelector('.description').textContent.trim()

  }
})

console.log(k)

<ul class="countries">
  <li class="country">
    <span class="country-name">Philippines</span>
    <span class="country-population">200</span>
    <span class="description">Blablabla</span>
  </li>
  <li class="country">
    <span class="country-name">Brunei</span>
    <span class="country-population">200</span>
    <span class="description">Blablabla</span>
  </li>
  <li class="country">
    <span class="country-name">Malaysia</span>
    <span class="country-population">400</span>
    <span class="description">Blablabla</span>
  </li>

</ul>

Another approach short but effective.

"use strict";
function _toConsumableArray(a) {
  if (Array.isArray(a)) {
    for (var b = 0, c = Array(a.length); b < a.length; b++) c[b] = a[b];
    return c;
  }
  return Array.from(a);
}
var results = []
  .concat(_toConsumableArray(document.querySelectorAll(".countries>.country")))
  .map(function(a) {
    return {
      name: a.querySelector(".country-name").innerText.trim(),
      population: a.querySelector(".country-population").innerText.trim(),
      description: a.querySelector(".description").innerText.trim()
    };
  });
console.log(results);