My question is related to this question. I have a javascript array and I select four random items from it:
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);
But I do not want to show the raw code to the console. I want to show each item with its values as clean HTML. I thought I could do this by making a variation to the last line of the above code like so:
<p id="test></p>
Then:
document.getElementById("test").innerHTML = randomObjects;
But that doesn't work,I don't get my items in HTML rather I get this:
[object Object],[object Object],[object Object],[object Object]
Help please and thank you.
CodePudding user response：
You can't render objects, i.e., arrays, in the DOM, you need to turn it into a string first.
document.getElementById("test").innerHTML = JSON.stringify(randomObjects);
CodePudding user response：
Yes, you can use pre tag to show better output in browser 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>CodePudding user response：
Try to this code with your own code.
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