时间戳

首页 > 解决方案 > 如何从对象中获取随机值并干净地显示为 HTML

javascript - 如何从对象中获取随机值并干净地显示为 HTML

问题描述

我的问题与这个问题有关。 我有一个 javascript 数组，我从中选择了四个随机项：

function getRandomObjects(array,selected,needed){
    /*
     *@param array array The array to pull from
     *@param selected array The array of results pulled so far
     *@param needed int The number of results we want
     */
    var length = array.length;
    var num = Math.floor(Math.random() * length) + 1; // get random number in bounds of array
    var exists=false; // make sure we didnt already pick this object
    $.each(selected,function(i,obj){
        if(obj.index==num)exists=true;
    })
    if(exists) getRandomObjects(array,selected,needed); // get a new one if this was a duplicate
    else selected.push(array[num]);
    if(selected.length!=needed) return getRandomObjects(array,selected,needed); // get another object if we need more
    else return selected; // return the final result set
}




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

console.log(randomObjects);

但我不想将原始代码显示到控制台。我想将每个项目的值显示为干净的 HTML。我想我可以通过对上述代码的最后一行进行修改来做到这一点，如下所示：

<p id="test></p>

然后：

document.getElementById("test").innerHTML = randomObjects;

但这不起作用，我没有在 HTML 中获取我的项目，而是得到了这个：

[object Object],[object Object],[object Object],[object Object]

请帮忙，谢谢。

标签： javascripthtmljquerydom

解决方案

你不能在DOM中渲染对象，即数组，你需要先把它变成一个字符串。

document.getElementById("test").innerHTML = JSON.stringify(randomObjects);

推荐阅读