CODEWITHSUNDEEP
javascriptjqueryarrayshtmlobject
dikei
dikei

Reputation: 439

Dynamic values into objects in javascript

I have the following code with more values, showing only 3 to give you an idea

var people = {
    'Jon':{
        age:65,
        height:185,
        marriage:true
    },
    'Mary':{
        age:18,
        height:170,
        marriage:false
    },
    'Carol':{
        age:45,
        height:165,
        marriage:true
    }
};

Because now I get all the values dynamically from the server, I would like to replicate the object to get the dynamic values from the <a> tag instead listing all of them above.

<a data-name='${person.name}' data-age="${person.age}" data-height="${person.height}" data-marriage="${person.isMarried}" href='/#'>

<script>
    var personName = $('a').data('name');
    var personAge = $('a').data('age');
    var personHeight = $('a').data('height');
    var isMarried = $('a').data('marriage');
</script>

I am trying something like this, but it doesn't seem to work, do i need to create a loop, not really sure

var people = {
    personName:{
        age:personAge,
        height:personHeight,
        marriage:isMarried
    }
};

Any help will be appreciated

Thanks

Upvotes: 0

Views: 147

Answers (4)

Andy
Andy

Reputation: 63587

If you didn't want to use jQuery, here's a simple vanilla way of doing it, making sure that the data types are what you require in your output.

var anchors = [].slice.call(document.getElementsByTagName('a'));

var people = {};
anchors.forEach(function (el) {
    people[el.getAttribute('data-name')] = {
        age: +el.getAttribute('data-age'),
        height: +el.getAttribute('data-height'),
        marriage: el.getAttribute('data-marriage') === 'false' ? false : true
    };
});

people output

{
  "Jon": {
    "age": 65,
    "height": 185,
    "marriage": false
  },
  "Mary": {
    "age": 18,
    "height": 170,
    "marriage": false
  },
  "Carol": {
    "age": 40,
    "height": 165,
    "marriage": true
  }
}

DEMO

Upvotes: 2

Quentin Roy
Quentin Roy

Reputation: 7887

Yes. You will need a loop (or equivalent). Here is a simple working approach.

var people = {};

$('a').each(function(){
  var a = $(this);
  people[a.data('name')] = {
    age: a.data('age'),
    height: a.data('height'),
    marriage: a.data('marriage')
  }
});
            
document.body.innerHTML += JSON.stringify(people, null, 2);
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<a data-name='Jon' data-age="65" data-height="185" data-marriage="true" href='/#'></a>
<a data-name='Mary' data-age="age" data-height="170" data-marriage="false" href='/#'></a>
<a data-name='Carol' data-age="45" data-height="165" data-marriage="true" href='/#'></a>

Upvotes: 2

Ram
Ram

Reputation: 144739

It seems you want to create an object by reading the data-* attributes of the a elements. If this is the case one option is:

var people = {};
$('a').each(function() {
    var data = $(this).data(), name = data.name;
    delete data.name;
    people[name] = data;
});

If you want to create an array of objects you can use the $.prototype.map method:

var people = $('a').map(function() { return $(this).data() }).get();
// [{
//    "name": "${person.name}",
//    "age": "${person.age}",
//    "height": "${person.height}",
//    "marriage": "${person.isMarried}"
// }]

Upvotes: 0

Arnaud Gueras
Arnaud Gueras

Reputation: 2062

You need to create a loop, but it's better if the server that returns this kind of object return an array.

This code will do what you want.

var peopleArray=[];

for (var i in people) {
  if(people.hasOwnProperty(i) {
    var currentPeople = people[i];
    currentPeople.name = i;
    peopleArray.push(currentPeople);
  })
}

This code create an array of people like this : 

[
  {
        name:'Jon',
        age:65,
        height:185,
        marriage:true
  },
  {
    ...
  }
]

Upvotes: 0

Related Questions