Programmatically push values into an empty object

  • A+
Category:Languages

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()                     }); });  

 


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.com/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>

Comment

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: