Динамические значения в объекты в JavaScript

Question

У меня есть следующий код с большим количеством значений, показывая только 3, чтобы дать вам представление о том

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

Потому что теперь я получаю все значения динамически с сервера, я хотел бы повторить объект, чтобы получить динамические значения из тега <a>, вместо этого перечисляя все из них выше.

<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> 

Я пытаюсь что-то вроде этого, но это не похоже на работу, мне нужно создать цикл, на самом деле не уверен

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

Любая помощь будет оценена

Спасибо

Answer 1

Вам нужно создать цикл, но лучше, если сервер, возвращающий этот тип объекта, возвращает массив.

Этот код будет делать то, что вы хотите.

var peopleArray=[]; 

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

Этот код создает массив таких людей, как это:

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

Answer 2

Кажется, что вы хотите создать объект, читая data-* атрибуты a элементов. Если это так один вариант:

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

Если вы хотите создать массив объектов, которые вы можете использовать метод $.prototype.map:

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

Answer 3

Да. Вам понадобится цикл (или эквивалент). Вот простой рабочий подход.

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>

Answer 4

Если вы не хотите использовать JQuery, вот простой ванили способ сделать это, убедившись, что типы данных, что вам требуется в вашем выводе.

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 выход

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

DEMO