Reputation: 439
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
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
}
}
Upvotes: 2
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
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
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