Dynamic values into objects in javascript

Question

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

developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… — Jared Smith
– Jared Smith, Commented Nov 25, 2015 at 12:55

Quentin Roy · Accepted Answer · 2015-11-25 13:29:57Z

2

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>

edited Nov 25, 2015 at 13:29

answered Nov 25, 2015 at 13:03

Quentin Roy

7,9172 gold badges34 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Andy · Accepted Answer · 2015-11-25 13:35:54Z

2

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

edited Nov 25, 2015 at 13:35

answered Nov 25, 2015 at 13:20

Andy

63.6k13 gold badges72 silver badges99 bronze badges

2 Comments

Ram Over a year ago

Note that jQuery .data() method does it's best to parse the values according to JSON spec. The output of your code is not the same as JSON.parse/$.parseJSON method's output. For example; the boolean values are strings but the .data() method returns true boolean values.

Andy Over a year ago

Just fixed that. Thanks for the heads up.

Arnaud Gueras · Accepted Answer · 2015-11-25 12:55:35Z

0

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
  },
  {
    ...
  }
]

answered Nov 25, 2015 at 12:55

Arnaud Gueras

2,06215 silver badges14 bronze badges

Comments

Ram · Accepted Answer · 2015-11-25 13:10:12Z

0

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}"
// }]

edited Nov 25, 2015 at 13:10

answered Nov 25, 2015 at 13:02

Ram

145k16 gold badges174 silver badges201 bronze badges

Collectives™ on Stack Overflow

Dynamic values into objects in javascript

4 Answers 4

Comments

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related