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

是。你需要一个循环（或等价物）。这是一个简单的工作方法。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

如果你不想使用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
  }
}

http://wiki.treck.com/Appendix_C:_Strong_End_System_Model_/_Weak_End_System_Model

Answer 3

您需要创建一个循环，但如果返回此类对象的服务器返回一个数组，则会更好。

此代码可以满足您的需求。

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 4

您似乎想要通过阅读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}"
// }]

动态值到javascript中的对象

4 个答案: