如何从JavaScript对象数组取随机项并整洁渲染为HTML

问题原因 #

直接将对象数组赋值给DOM元素的innerHTML属性时，JavaScript会自动调用每个对象的默认toString()方法，返回值为固定的[object Object]，就是你看到的异常输出。
另外你现有的随机选取函数存在两处可优化的问题：

• 生成随机索引的逻辑Math.floor(Math.random() * length) + 1会导致索引越界：数组索引从0开始，最大有效值为length-1，加1后可能出现等于length的无效值，取到undefined项
• 重复抽取递归调用时未添加return语句，部分场景下会返回undefined

修复后完整代码 #

1. 修正随机选取函数

function getRandomObjects(array,selected,needed){
    /*
     *@param array array 待抽取的源数组
     *@param selected array 已抽取的结果数组
     *@param needed int 需要抽取的总数量
     */
    var length = array.length;
    // 修正索引越界问题
    var num = Math.floor(Math.random() * length);
    var exists=false;
    $.each(selected,function(i,obj){
        if(obj.index==num)exists=true;
    })
    // 递归调用新增return
    if(exists) return getRandomObjects(array,selected,needed);
    else selected.push(array[num]);
    if(selected.length!=needed) return getRandomObjects(array,selected,needed);
    else return selected;
}

2. 页面渲染代码

你可以根据自己的需求调整HTML结构和样式，以下是示例代码：

var testData = [
  {
    "_id": "57e5d1a90c4206b128cd8654",
    "index": 0,
    "guid": "1f3269fc-0822-4c5a-9c52-8055155b407e",
    "isActive": true,
    "balance": "$3,026.95",
    "picture": "http://placehold.it/32x32"
  },
  {
    "_id": "57e5d1a9a986ccb2f41cf7b9",
    "index": 1,
    "guid": "a6b726b6-6466-4e48-8697-1c6bd7b1c79e",
    "isActive": true,
    "balance": "$2,642.74",
    "picture": "http://placehold.it/32x32"
  },
  {
    "_id": "57e5d1a9f98f8b2f6880de32",
    "index": 2,
    "guid": "e7d736cc-19e0-4bcb-8d0a-4d17442d8cee",
    "isActive": true,
    "balance": "$3,341.64",
    "picture": "http://placehold.it/32x32"
  },
  {
    "_id": "57e5d1a9e40ded5b017e45cd",
    "index": 3,
    "guid": "64230ca8-05c0-4c39-a931-794172475a32",
    "isActive": true,
    "balance": "$2,196.13",
    "picture": "http://placehold.it/32x32"
  },
  {
    "_id": "57e5d1a90cc30be769a06d7c",
    "index": 4,
    "guid": "d6618b78-753a-4ad0-bc14-3687d0b99196",
    "isActive": true,
    "balance": "$1,611.62",
    "picture": "http://placehold.it/32x32"
  },
  {
    "_id": "57e5d1a92481a43f50607415",
    "index": 5,
    "guid": "35ec8186-9494-4f89-ab89-bed7f39872c3",
    "isActive": true,
    "balance": "$3,148.87",
    "picture": "http://placehold.it/32x32"
  },
  {
    "_id": "57e5d1a9164f17c558ba7ce1",
    "index": 6,
    "guid": "244970a0-1ce2-405a-8d69-c7903f9bf5eb",
    "isActive": false,
    "balance": "$3,758.13",
    "picture": "http://placehold.it/32x32"
  },
  {
    "_id": "57e5d1a95afde31c5cf592a8",
    "index": 7,
    "guid": "aa30c82d-dd2b-420c-8b30-7d66cec8d10b",
    "isActive": true,
    "balance": "$1,311.40",
    "picture": "http://placehold.it/32x32"
  }
]

var randomObjects=getRandomObjects(testData,[],4);
// 拼接展示用的HTML字符串
var renderHtml = '';
randomObjects.forEach(function(item) {
  renderHtml += `
  <div style="border: 1px solid #e5e7eb; border-radius: 6px; padding: 12px; margin-bottom: 12px;">
    <div style="display: flex; gap: 12px; align-items: flex-start;">
      <img src="${item.picture}" alt="用户头像">
      <div>
        <p>用户索引：${item.index}</p>
        <p>用户ID：${item._id}</p>
        <p>GUID：${item.guid}</p>
        <p>激活状态：${item.isActive ? '已激活' : '未激活'}</p>
        <p>账户余额：${item.balance}</p>
      </div>
    </div>
  </div>
  `;
})
// 插入到页面节点
document.getElementById("test").innerHTML = renderHtml;

内容的提问来源于stack exchange，提问作者Bryce Steuer