javascript中对象的动态值答案

【问题标题】：Dynamic values into objects in javascriptjavascript中对象的动态值
【发布时间】：2015-11-25 12:50:49
【问题描述】：

我有下面的代码有更多的值，只显示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
    }
};

任何帮助将不胜感激

谢谢

【问题讨论】：

developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…

标签： javascript jquery arrays html object

【解决方案1】：

是的。您将需要一个循环（或等效项）。这是一个简单的工作方法。

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>

【讨论】：

【解决方案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
  }
}

DEMO

【讨论】：

请注意，jQuery .data() 方法最好根据 JSON 规范解析值。您的代码输出与JSON.parse/$.parseJSON 方法的输出不同。例如;布尔值是字符串，但 .data() 方法返回真正的布尔值。
刚刚解决了这个问题。感谢您的提醒。

【解决方案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
  },
  {
    ...
  }
]

【讨论】：

【解决方案4】：

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

【讨论】：