我的問題與這個問題有關。 我有一個 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]
請幫助，謝謝。
uj5u.com熱心網友回復：
你不能在DOM中渲染物件，即陣列，你需要先把它變成一個字串。
document.getElementById("test").innerHTML = JSON.stringify(randomObjects);
uj5u.com熱心網友回復：
是的，您可以使用pre標記在瀏覽器 HTML 中顯示更好的輸出。
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(JSON.stringify(randomObjects));
$(document).ready(function(){$("#test").html(JSON.stringify(randomObjects, undefined, 1))})<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<pre id="test"></pre>uj5u.com熱心網友回復：
嘗試使用您自己的代碼撰寫此代碼。
var lengthOfArray = array.length;
var randomNum = Math.floor(Math.random() * lengthOfArray);
var keys = Object.keys(array[randomNum]); // Get the objects in the ARRAY
return array[randomNum][keys[(keys.length * Math.random()) << 0]]; // Get the random item in the object轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/365080.html
標籤：javascript html 查询 dom