動態值到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

看來你想通過閱讀a元素的data-*屬性創建一個對象。如果是這樣的話一個選擇是：

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