How to display item from an object in a random order and keep their respective property
1
What i am trying to achieve is to get 3 items out of X number in the history_case object.
I would like to have all property of those items display inside my html code at random.
Exemple : I would like to display the item (FISH), with the tile, url and image that refer to it.
An item cannot appear twice.
P.s. I am new to javascript
P.p.s English is not my first language
var history_case = {
"francais": [
{
"title": "CAT",
"url": "https://en.wikipedia.org/wiki/Cat",
"image": "https://upload.wikimedia.org/wikipedia/commons/thumb/0/0b/Cat_poster_1.jpg/260px-Cat_poster_1.jpg"
},
{
"title": "DOG",
"url": "https://en.wikipedia.org/wiki/Dog",
"image": " https://upload.wikimedia.org/wikipedia/commons/thumb/d/d9/Collage_of_Nine_Dogs.jpg/260px-Collage_of_Nine_Dogs.jpg"
},
{
"title": "DUCK",
"url": "https://en.wikipedia.org/wiki/Duck",
"image": "https://upload.wikimedia.org/wikipedia/commons/thumb/b/bf/Bucephala-albeola-010.jpg/220px-Bucephala-albeola-010.jpg"
},
{
"title": "FISH",
"url": "https://en.wikipedia.org/wiki/Fish",
"image": "https://upload.wikimedia.org/wikipedia/commons/thumb/2/23/Georgia_Aquarium_-_Giant_Grouper_edit.jpg/220px-Georgia_Aquarium_-_Giant_Grouper_edit.jpg"
},
]
};
randomTitles(); // this now calls a single function that will create the three titles and put them into the html
function randomTitles() {
var arr = history_case.francais;
var arrLength = arr.length;
var titlesArray = ;
// the following creates the array of unique titles - it will only push a title to the array if it isnt already in the array - preventing duplicates
while (titlesArray.length < 3) {
var randomItem = arr[Math.floor(Math.random() * arrLength)];
var title = randomItem.title;
if (titlesArray.indexOf(title) == -1) {
titlesArray.push(title)
}
}
// the following sets the titles from the titlesArray into the html.
titlesArray.forEach(function (title, index) {
document.querySelector('.history_title_' + (index + 1)).innerHTML = title;
})
;
};
randomUrl(); // this now calls a single function that will create the three titles and put them into the html
function randomUrl() {
var arr = history_case.francais;
var arrLength = arr.length;
var urlArray = ;
while (urlArray.length < 3) {
var randomItem = arr[Math.floor(Math.random() * arrLength)];
var url = randomItem.url;
if (urlArray.indexOf(url) == -1) {
urlArray.push(url)
}
}
urlArray.forEach(function (url, index) {
document.querySelector('.history_url_' + (index + 1)).href = url;
})
;
};
randomImage(); // this now calls a single function that will create the three titles and put them into the html
function randomImage() {
var arr = history_case.francais;
var arrLength = arr.length;
var imageArray = ;
// the following creates the array of unique titles - it will only push a title to the array if it isnt already in the array - preventing duplicates
while (imageArray.length < 3) {
var randomItem = arr[Math.floor(Math.random() * arrLength)];
var image = randomItem.image;
if (imageArray.indexOf(image) == -1) {
imageArray.push(image)
}
}
// the following sets the titles from the titlesArray into the html.
imageArray.forEach(function (image, index) {
document.querySelector('.history_image_' + (index + 1)).src = image;
})
;
};.container{
display:flex;
width: 900px;
text-align:center;
}
div{
width: 33%;
border: 1px solid red;
}
img{width:200px;}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="container">
<div>
<h2 class="history_title_1"></h2>
<a class="history_url_1" href="">
<img class="history_image_1" src="">
</a>
</div>
<div>
<h2 class="history_title_2"></h2>
<a class="history_url_2" href="">
<img class="history_image_2" src="">
</a>
</div>
<div>
<h2 class="history_title_3"></h2>
<a class="history_url_3" href="">
<img class="history_image_3" src="">
</a>
</div>
</div> <!-- end of container-->
<script src="history_case_url.js"></script>
</body>
</html>javascript html
asked Nov 12 '18 at 20:02
MaxMax
136
add a comment |
1
What i am trying to achieve is to get 3 items out of X number in the history_case object.
I would like to have all property of those items display inside my html code at random.
Exemple : I would like to display the item (FISH), with the tile, url and image that refer to it.
An item cannot appear twice.
P.s. I am new to javascript
P.p.s English is not my first language
var history_case = {
"francais": [
{
"title": "CAT",
"url": "https://en.wikipedia.org/wiki/Cat",
"image": "https://upload.wikimedia.org/wikipedia/commons/thumb/0/0b/Cat_poster_1.jpg/260px-Cat_poster_1.jpg"
},
{
"title": "DOG",
"url": "https://en.wikipedia.org/wiki/Dog",
"image": " https://upload.wikimedia.org/wikipedia/commons/thumb/d/d9/Collage_of_Nine_Dogs.jpg/260px-Collage_of_Nine_Dogs.jpg"
},
{
"title": "DUCK",
"url": "https://en.wikipedia.org/wiki/Duck",
"image": "https://upload.wikimedia.org/wikipedia/commons/thumb/b/bf/Bucephala-albeola-010.jpg/220px-Bucephala-albeola-010.jpg"
},
{
"title": "FISH",
"url": "https://en.wikipedia.org/wiki/Fish",
"image": "https://upload.wikimedia.org/wikipedia/commons/thumb/2/23/Georgia_Aquarium_-_Giant_Grouper_edit.jpg/220px-Georgia_Aquarium_-_Giant_Grouper_edit.jpg"
},
]
};
randomTitles(); // this now calls a single function that will create the three titles and put them into the html
function randomTitles() {
var arr = history_case.francais;
var arrLength = arr.length;
var titlesArray = ;
// the following creates the array of unique titles - it will only push a title to the array if it isnt already in the array - preventing duplicates
while (titlesArray.length < 3) {
var randomItem = arr[Math.floor(Math.random() * arrLength)];
var title = randomItem.title;
if (titlesArray.indexOf(title) == -1) {
titlesArray.push(title)
}
}
// the following sets the titles from the titlesArray into the html.
titlesArray.forEach(function (title, index) {
document.querySelector('.history_title_' + (index + 1)).innerHTML = title;
})
;
};
randomUrl(); // this now calls a single function that will create the three titles and put them into the html
function randomUrl() {
var arr = history_case.francais;
var arrLength = arr.length;
var urlArray = ;
while (urlArray.length < 3) {
var randomItem = arr[Math.floor(Math.random() * arrLength)];
var url = randomItem.url;
if (urlArray.indexOf(url) == -1) {
urlArray.push(url)
}
}
urlArray.forEach(function (url, index) {
document.querySelector('.history_url_' + (index + 1)).href = url;
})
;
};
randomImage(); // this now calls a single function that will create the three titles and put them into the html
function randomImage() {
var arr = history_case.francais;
var arrLength = arr.length;
var imageArray = ;
// the following creates the array of unique titles - it will only push a title to the array if it isnt already in the array - preventing duplicates
while (imageArray.length < 3) {
var randomItem = arr[Math.floor(Math.random() * arrLength)];
var image = randomItem.image;
if (imageArray.indexOf(image) == -1) {
imageArray.push(image)
}
}
// the following sets the titles from the titlesArray into the html.
imageArray.forEach(function (image, index) {
document.querySelector('.history_image_' + (index + 1)).src = image;
})
;
};.container{
display:flex;
width: 900px;
text-align:center;
}
div{
width: 33%;
border: 1px solid red;
}
img{width:200px;}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="container">
<div>
<h2 class="history_title_1"></h2>
<a class="history_url_1" href="">
<img class="history_image_1" src="">
</a>
</div>
<div>
<h2 class="history_title_2"></h2>
<a class="history_url_2" href="">
<img class="history_image_2" src="">
</a>
</div>
<div>
<h2 class="history_title_3"></h2>
<a class="history_url_3" href="">
<img class="history_image_3" src="">
</a>
</div>
</div> <!-- end of container-->
<script src="history_case_url.js"></script>
</body>
</html>javascript html
asked Nov 12 '18 at 20:02
MaxMax
136
add a comment |
1
1
1
What i am trying to achieve is to get 3 items out of X number in the history_case object.
I would like to have all property of those items display inside my html code at random.
Exemple : I would like to display the item (FISH), with the tile, url and image that refer to it.
An item cannot appear twice.
P.s. I am new to javascript
P.p.s English is not my first language
var history_case = {
"francais": [
{
"title": "CAT",
"url": "https://en.wikipedia.org/wiki/Cat",
"image": "https://upload.wikimedia.org/wikipedia/commons/thumb/0/0b/Cat_poster_1.jpg/260px-Cat_poster_1.jpg"
},
{
"title": "DOG",
"url": "https://en.wikipedia.org/wiki/Dog",
"image": " https://upload.wikimedia.org/wikipedia/commons/thumb/d/d9/Collage_of_Nine_Dogs.jpg/260px-Collage_of_Nine_Dogs.jpg"
},
{
"title": "DUCK",
"url": "https://en.wikipedia.org/wiki/Duck",
"image": "https://upload.wikimedia.org/wikipedia/commons/thumb/b/bf/Bucephala-albeola-010.jpg/220px-Bucephala-albeola-010.jpg"
},
{
"title": "FISH",
"url": "https://en.wikipedia.org/wiki/Fish",
"image": "https://upload.wikimedia.org/wikipedia/commons/thumb/2/23/Georgia_Aquarium_-_Giant_Grouper_edit.jpg/220px-Georgia_Aquarium_-_Giant_Grouper_edit.jpg"
},
]
};
randomTitles(); // this now calls a single function that will create the three titles and put them into the html
function randomTitles() {
var arr = history_case.francais;
var arrLength = arr.length;
var titlesArray = ;
// the following creates the array of unique titles - it will only push a title to the array if it isnt already in the array - preventing duplicates
while (titlesArray.length < 3) {
var randomItem = arr[Math.floor(Math.random() * arrLength)];
var title = randomItem.title;
if (titlesArray.indexOf(title) == -1) {
titlesArray.push(title)
}
}
// the following sets the titles from the titlesArray into the html.
titlesArray.forEach(function (title, index) {
document.querySelector('.history_title_' + (index + 1)).innerHTML = title;
})
;
};
randomUrl(); // this now calls a single function that will create the three titles and put them into the html
function randomUrl() {
var arr = history_case.francais;
var arrLength = arr.length;
var urlArray = ;
while (urlArray.length < 3) {
var randomItem = arr[Math.floor(Math.random() * arrLength)];
var url = randomItem.url;
if (urlArray.indexOf(url) == -1) {
urlArray.push(url)
}
}
urlArray.forEach(function (url, index) {
document.querySelector('.history_url_' + (index + 1)).href = url;
})
;
};
randomImage(); // this now calls a single function that will create the three titles and put them into the html
function randomImage() {
var arr = history_case.francais;
var arrLength = arr.length;
var imageArray = ;
// the following creates the array of unique titles - it will only push a title to the array if it isnt already in the array - preventing duplicates
while (imageArray.length < 3) {
var randomItem = arr[Math.floor(Math.random() * arrLength)];
var image = randomItem.image;
if (imageArray.indexOf(image) == -1) {
imageArray.push(image)
}
}
// the following sets the titles from the titlesArray into the html.
imageArray.forEach(function (image, index) {
document.querySelector('.history_image_' + (index + 1)).src = image;
})
;
};.container{
display:flex;
width: 900px;
text-align:center;
}
div{
width: 33%;
border: 1px solid red;
}
img{width:200px;}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="container">
<div>
<h2 class="history_title_1"></h2>
<a class="history_url_1" href="">
<img class="history_image_1" src="">
</a>
</div>
<div>
<h2 class="history_title_2"></h2>
<a class="history_url_2" href="">
<img class="history_image_2" src="">
</a>
</div>
<div>
<h2 class="history_title_3"></h2>
<a class="history_url_3" href="">
<img class="history_image_3" src="">
</a>
</div>
</div> <!-- end of container-->
<script src="history_case_url.js"></script>
</body>
</html>javascript html
asked Nov 12 '18 at 20:02
MaxMax
136
What i am trying to achieve is to get 3 items out of X number in the history_case object.
I would like to have all property of those items display inside my html code at random.
Exemple : I would like to display the item (FISH), with the tile, url and image that refer to it.
An item cannot appear twice.
P.s. I am new to javascript
P.p.s English is not my first language
var history_case = {
"francais": [
{
"title": "CAT",
"url": "https://en.wikipedia.org/wiki/Cat",
"image": "https://upload.wikimedia.org/wikipedia/commons/thumb/0/0b/Cat_poster_1.jpg/260px-Cat_poster_1.jpg"
},
{
"title": "DOG",
"url": "https://en.wikipedia.org/wiki/Dog",
"image": " https://upload.wikimedia.org/wikipedia/commons/thumb/d/d9/Collage_of_Nine_Dogs.jpg/260px-Collage_of_Nine_Dogs.jpg"
},
{
"title": "DUCK",
"url": "https://en.wikipedia.org/wiki/Duck",
"image": "https://upload.wikimedia.org/wikipedia/commons/thumb/b/bf/Bucephala-albeola-010.jpg/220px-Bucephala-albeola-010.jpg"
},
{
"title": "FISH",
"url": "https://en.wikipedia.org/wiki/Fish",
"image": "https://upload.wikimedia.org/wikipedia/commons/thumb/2/23/Georgia_Aquarium_-_Giant_Grouper_edit.jpg/220px-Georgia_Aquarium_-_Giant_Grouper_edit.jpg"
},
]
};
randomTitles(); // this now calls a single function that will create the three titles and put them into the html
function randomTitles() {
var arr = history_case.francais;
var arrLength = arr.length;
var titlesArray = ;
// the following creates the array of unique titles - it will only push a title to the array if it isnt already in the array - preventing duplicates
while (titlesArray.length < 3) {
var randomItem = arr[Math.floor(Math.random() * arrLength)];
var title = randomItem.title;
if (titlesArray.indexOf(title) == -1) {
titlesArray.push(title)
}
}
// the following sets the titles from the titlesArray into the html.
titlesArray.forEach(function (title, index) {
document.querySelector('.history_title_' + (index + 1)).innerHTML = title;
})
;
};
randomUrl(); // this now calls a single function that will create the three titles and put them into the html
function randomUrl() {
var arr = history_case.francais;
var arrLength = arr.length;
var urlArray = ;
while (urlArray.length < 3) {
var randomItem = arr[Math.floor(Math.random() * arrLength)];
var url = randomItem.url;
if (urlArray.indexOf(url) == -1) {
urlArray.push(url)
}
}
urlArray.forEach(function (url, index) {
document.querySelector('.history_url_' + (index + 1)).href = url;
})
;
};
randomImage(); // this now calls a single function that will create the three titles and put them into the html
function randomImage() {
var arr = history_case.francais;
var arrLength = arr.length;
var imageArray = ;
// the following creates the array of unique titles - it will only push a title to the array if it isnt already in the array - preventing duplicates
while (imageArray.length < 3) {
var randomItem = arr[Math.floor(Math.random() * arrLength)];
var image = randomItem.image;
if (imageArray.indexOf(image) == -1) {
imageArray.push(image)
}
}
// the following sets the titles from the titlesArray into the html.
imageArray.forEach(function (image, index) {
document.querySelector('.history_image_' + (index + 1)).src = image;
})
;
};.container{
display:flex;
width: 900px;
text-align:center;
}
div{
width: 33%;
border: 1px solid red;
}
img{width:200px;}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="container">
<div>
<h2 class="history_title_1"></h2>
<a class="history_url_1" href="">
<img class="history_image_1" src="">
</a>
</div>
<div>
<h2 class="history_title_2"></h2>
<a class="history_url_2" href="">
<img class="history_image_2" src="">
</a>
</div>
<div>
<h2 class="history_title_3"></h2>
<a class="history_url_3" href="">
<img class="history_image_3" src="">
</a>
</div>
</div> <!-- end of container-->
<script src="history_case_url.js"></script>
</body>
</html>var history_case = {
"francais": [
{
"title": "CAT",
"url": "https://en.wikipedia.org/wiki/Cat",
"image": "https://upload.wikimedia.org/wikipedia/commons/thumb/0/0b/Cat_poster_1.jpg/260px-Cat_poster_1.jpg"
},
{
"title": "DOG",
"url": "https://en.wikipedia.org/wiki/Dog",
"image": " https://upload.wikimedia.org/wikipedia/commons/thumb/d/d9/Collage_of_Nine_Dogs.jpg/260px-Collage_of_Nine_Dogs.jpg"
},
{
"title": "DUCK",
"url": "https://en.wikipedia.org/wiki/Duck",
"image": "https://upload.wikimedia.org/wikipedia/commons/thumb/b/bf/Bucephala-albeola-010.jpg/220px-Bucephala-albeola-010.jpg"
},
{
"title": "FISH",
"url": "https://en.wikipedia.org/wiki/Fish",
"image": "https://upload.wikimedia.org/wikipedia/commons/thumb/2/23/Georgia_Aquarium_-_Giant_Grouper_edit.jpg/220px-Georgia_Aquarium_-_Giant_Grouper_edit.jpg"
},
]
};
randomTitles(); // this now calls a single function that will create the three titles and put them into the html
function randomTitles() {
var arr = history_case.francais;
var arrLength = arr.length;
var titlesArray = ;
// the following creates the array of unique titles - it will only push a title to the array if it isnt already in the array - preventing duplicates
while (titlesArray.length < 3) {
var randomItem = arr[Math.floor(Math.random() * arrLength)];
var title = randomItem.title;
if (titlesArray.indexOf(title) == -1) {
titlesArray.push(title)
}
}
// the following sets the titles from the titlesArray into the html.
titlesArray.forEach(function (title, index) {
document.querySelector('.history_title_' + (index + 1)).innerHTML = title;
})
;
};
randomUrl(); // this now calls a single function that will create the three titles and put them into the html
function randomUrl() {
var arr = history_case.francais;
var arrLength = arr.length;
var urlArray = ;
while (urlArray.length < 3) {
var randomItem = arr[Math.floor(Math.random() * arrLength)];
var url = randomItem.url;
if (urlArray.indexOf(url) == -1) {
urlArray.push(url)
}
}
urlArray.forEach(function (url, index) {
document.querySelector('.history_url_' + (index + 1)).href = url;
})
;
};
randomImage(); // this now calls a single function that will create the three titles and put them into the html
function randomImage() {
var arr = history_case.francais;
var arrLength = arr.length;
var imageArray = ;
// the following creates the array of unique titles - it will only push a title to the array if it isnt already in the array - preventing duplicates
while (imageArray.length < 3) {
var randomItem = arr[Math.floor(Math.random() * arrLength)];
var image = randomItem.image;
if (imageArray.indexOf(image) == -1) {
imageArray.push(image)
}
}
// the following sets the titles from the titlesArray into the html.
imageArray.forEach(function (image, index) {
document.querySelector('.history_image_' + (index + 1)).src = image;
})
;
};.container{
display:flex;
width: 900px;
text-align:center;
}
div{
width: 33%;
border: 1px solid red;
}
img{width:200px;}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="container">
<div>
<h2 class="history_title_1"></h2>
<a class="history_url_1" href="">
<img class="history_image_1" src="">
</a>
</div>
<div>
<h2 class="history_title_2"></h2>
<a class="history_url_2" href="">
<img class="history_image_2" src="">
</a>
</div>
<div>
<h2 class="history_title_3"></h2>
<a class="history_url_3" href="">
<img class="history_image_3" src="">
</a>
</div>
</div> <!-- end of container-->
<script src="history_case_url.js"></script>
</body>
</html>var history_case = {
"francais": [
{
"title": "CAT",
"url": "https://en.wikipedia.org/wiki/Cat",
"image": "https://upload.wikimedia.org/wikipedia/commons/thumb/0/0b/Cat_poster_1.jpg/260px-Cat_poster_1.jpg"
},
{
"title": "DOG",
"url": "https://en.wikipedia.org/wiki/Dog",
"image": " https://upload.wikimedia.org/wikipedia/commons/thumb/d/d9/Collage_of_Nine_Dogs.jpg/260px-Collage_of_Nine_Dogs.jpg"
},
{
"title": "DUCK",
"url": "https://en.wikipedia.org/wiki/Duck",
"image": "https://upload.wikimedia.org/wikipedia/commons/thumb/b/bf/Bucephala-albeola-010.jpg/220px-Bucephala-albeola-010.jpg"
},
{
"title": "FISH",
"url": "https://en.wikipedia.org/wiki/Fish",
"image": "https://upload.wikimedia.org/wikipedia/commons/thumb/2/23/Georgia_Aquarium_-_Giant_Grouper_edit.jpg/220px-Georgia_Aquarium_-_Giant_Grouper_edit.jpg"
},
]
};
randomTitles(); // this now calls a single function that will create the three titles and put them into the html
function randomTitles() {
var arr = history_case.francais;
var arrLength = arr.length;
var titlesArray = ;
// the following creates the array of unique titles - it will only push a title to the array if it isnt already in the array - preventing duplicates
while (titlesArray.length < 3) {
var randomItem = arr[Math.floor(Math.random() * arrLength)];
var title = randomItem.title;
if (titlesArray.indexOf(title) == -1) {
titlesArray.push(title)
}
}
// the following sets the titles from the titlesArray into the html.
titlesArray.forEach(function (title, index) {
document.querySelector('.history_title_' + (index + 1)).innerHTML = title;
})
;
};
randomUrl(); // this now calls a single function that will create the three titles and put them into the html
function randomUrl() {
var arr = history_case.francais;
var arrLength = arr.length;
var urlArray = ;
while (urlArray.length < 3) {
var randomItem = arr[Math.floor(Math.random() * arrLength)];
var url = randomItem.url;
if (urlArray.indexOf(url) == -1) {
urlArray.push(url)
}
}
urlArray.forEach(function (url, index) {
document.querySelector('.history_url_' + (index + 1)).href = url;
})
;
};
randomImage(); // this now calls a single function that will create the three titles and put them into the html
function randomImage() {
var arr = history_case.francais;
var arrLength = arr.length;
var imageArray = ;
// the following creates the array of unique titles - it will only push a title to the array if it isnt already in the array - preventing duplicates
while (imageArray.length < 3) {
var randomItem = arr[Math.floor(Math.random() * arrLength)];
var image = randomItem.image;
if (imageArray.indexOf(image) == -1) {
imageArray.push(image)
}
}
// the following sets the titles from the titlesArray into the html.
imageArray.forEach(function (image, index) {
document.querySelector('.history_image_' + (index + 1)).src = image;
})
;
};.container{
display:flex;
width: 900px;
text-align:center;
}
div{
width: 33%;
border: 1px solid red;
}
img{width:200px;}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="container">
<div>
<h2 class="history_title_1"></h2>
<a class="history_url_1" href="">
<img class="history_image_1" src="">
</a>
</div>
<div>
<h2 class="history_title_2"></h2>
<a class="history_url_2" href="">
<img class="history_image_2" src="">
</a>
</div>
<div>
<h2 class="history_title_3"></h2>
<a class="history_url_3" href="">
<img class="history_image_3" src="">
</a>
</div>
</div> <!-- end of container-->
<script src="history_case_url.js"></script>
</body>
</html>javascript html
javascript html
asked Nov 12 '18 at 20:02
MaxMax
136
asked Nov 12 '18 at 20:02
MaxMax
136
edited Nov 12 '18 at 22:02
Max
asked Nov 12 '18 at 20:02
MaxMax
136
asked Nov 12 '18 at 20:02
MaxMax
136
asked Nov 12 '18 at 20:02
MaxMax
136
136
add a comment |
add a comment |
3 Answers
3
active
oldest
votes
1
The cause of the issue is that you are only calling the random selection once and so each time you use the value - you are using the same value.
By putting the random item generator into a function and calling that - you will get a different random item each time the function is called.
EDIT - I have altered my answer to provide a mechanism to only have unique titles being passed into the html. Essentially - creating an array of three unique titles and then passing those titles to the html.
You should probably put some smarts in there to remove an item if its already been selected - to prevent the random selection of the same item, but the following should give you a start.
var history_case = {
"francais": [
{
"title": "titre 1",
"url": " https://unsplash.com/t/wallpapers",
"image": "https://unsplash.com/photos/xW7Cdhoe9uA"
},
{
"title": "titre 2",
"url": "https://unsplash.com/t/architecture",
"image": "https://unsplash.com/photos/MYQT7kTCBwI"
},
{
"title": "titre 3",
"url": "https://unsplash.com/t/business-work",
"image": "https://unsplash.com/photos/8qEuawM_txg"
},
{
"title": "titre 4",
"url": "https://unsplash.com/t/food-drink",
"image": "https://unsplash.com/photos/mO1LXRLeLFs"
},
]
};
randomTitles(); // this now calls a single function that will create the three titles and put them into the html
function randomTitles(){
var arr = history_case.francais;
var arrLength = arr.length;
var titlesArray = ;
// the following creates the array of unique titles - it will only push a title to the array if it isnt already in the array - preventing duplicates
while(titlesArray.length < 3) {
var randomItem = arr[Math.floor(Math.random() * arrLength)];
var title = randomItem.title;
if(titlesArray.indexOf(title) == -1) {
titlesArray.push(title)
}
}
// the following sets the titles from the titlesArray into the html.
titlesArray.forEach(function(title,index) {
document.querySelector('.history_title_' + (index+1)).innerHTML = title;
})
;
};<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="container">
<div >
<h2 class="history_title_1"></h2>
<a href=""></a>
<img src="" >
</div>
<div >
<h2 class="history_title_2"></h2>
<a href=""></a>
<img src="" >
</div>
<div>
<h2 class="history_title_3"></h2>
<a href=""></a>
<img src="" >
</div>
</div> <!-- end of container-->
<script src="history_case_url.js"></script>
</body>
</html>answered Nov 12 '18 at 20:07
gavgrifgavgrif
8,3482717
add a comment |
0
Just add a function to get the random title and call it three times.
var history_case = {
"francais": [
{
"title": "titre 1",
"url": " https://unsplash.com/t/wallpapers",
"image": "https://unsplash.com/photos/xW7Cdhoe9uA"
},
{
"title": "titre 2",
"url": "https://unsplash.com/t/architecture",
"image": "https://unsplash.com/photos/MYQT7kTCBwI"
},
{
"title": "titre 3",
"url": "https://unsplash.com/t/business-work",
"image": "https://unsplash.com/photos/8qEuawM_txg"
},
{
"title": "titre 4",
"url": "https://unsplash.com/t/food-drink",
"image": "https://unsplash.com/photos/mO1LXRLeLFs"
},
]
};
function getRandomTitle() {
return history_case.francais[Math.floor(Math.random() * history_case.francais.length)].title;
}
var title1 = document.querySelector('.history_title_1');
var title2 = document.querySelector('.history_title_2');
var title3 = document.querySelector('.history_title_3');
title1.prepend(getRandomTitle());
title2.prepend(getRandomTitle());
title3.prepend(getRandomTitle());<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="container">
<div >
<h2 class="history_title_1"></h2>
<a href=""></a>
<img src="" >
</div>
<div >
<h2 class="history_title_2"></h2>
<a href=""></a>
<img src="" >
</div>
<div>
<h2 class="history_title_3"></h2>
<a href=""></a>
<img src="" >
</div>
</div> <!-- end of container-->
<script src="history_case_url.js"></script>
</body>
</html>Note that you could get repeated titles with this method.
answered Nov 12 '18 at 20:08
Ariel AlvaradoAriel Alvarado
682311
add a comment |
0
Change random into a function, which other answers have pointed out, but what they failed to do was to destroy duplicate choices. To do this we use a Set object which will not allow duplicates, and make random choices until we get three different return values. Then we simply store the returned values and use them to populate the page!
var random = () => history_case.francais[Math.floor(Math.random() *
history_case.francais.length)],
randomChoices = () => {
let chosen = new Set();
while (chosen.size < 3) {
chosen.add(random());
}
return [...chosen];
}
var history_case = {
"francais": [
{
"title": "titre 1",
"url": " https://unsplash.com/t/wallpapers",
"image": "https://unsplash.com/photos/xW7Cdhoe9uA"
},
{
"title": "titre 2",
"url": "https://unsplash.com/t/architecture",
"image": "https://unsplash.com/photos/MYQT7kTCBwI"
},
{
"title": "titre 3",
"url": "https://unsplash.com/t/business-work",
"image": "https://unsplash.com/photos/8qEuawM_txg"
},
{
"title": "titre 4",
"url": "https://unsplash.com/t/food-drink",
"image": "https://unsplash.com/photos/mO1LXRLeLFs"
},
]
};
var random = () => history_case.francais[Math.floor(Math.random() * history_case.francais.length)],
randomChoices = () => {
let chosen = new Set();
while (chosen.size < 3) {
chosen.add(random());
}
return [...chosen];
}
var random_array = randomChoices();
var title1 = document.querySelector('.history_title_1');
var title2 = document.querySelector('.history_title_2');
var title3 = document.querySelector('.history_title_3');
title1.prepend(random_array[0].title);
title2.prepend(random_array[1].title);
title3.prepend(random_array[2].title);<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="container">
<div>
<h2 class="history_title_1"></h2>
<a href=""></a>
<img src="">
</div>
<div>
<h2 class="history_title_2"></h2>
<a href=""></a>
<img src="">
</div>
<div>
<h2 class="history_title_3"></h2>
<a href=""></a>
<img src="">
</div>
</div>
<!-- end of container-->
<script src="history_case_url.js"></script>
</body>
</html>answered Nov 12 '18 at 20:26
zfrischzfrisch
4,49811024
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53269282%2fhow-to-display-item-from-an-object-in-a-random-order-and-keep-their-respective-p%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
active
oldest
votes
1
The cause of the issue is that you are only calling the random selection once and so each time you use the value - you are using the same value.
By putting the random item generator into a function and calling that - you will get a different random item each time the function is called.
EDIT - I have altered my answer to provide a mechanism to only have unique titles being passed into the html. Essentially - creating an array of three unique titles and then passing those titles to the html.
You should probably put some smarts in there to remove an item if its already been selected - to prevent the random selection of the same item, but the following should give you a start.
var history_case = {
"francais": [
{
"title": "titre 1",
"url": " https://unsplash.com/t/wallpapers",
"image": "https://unsplash.com/photos/xW7Cdhoe9uA"
},
{
"title": "titre 2",
"url": "https://unsplash.com/t/architecture",
"image": "https://unsplash.com/photos/MYQT7kTCBwI"
},
{
"title": "titre 3",
"url": "https://unsplash.com/t/business-work",
"image": "https://unsplash.com/photos/8qEuawM_txg"
},
{
"title": "titre 4",
"url": "https://unsplash.com/t/food-drink",
"image": "https://unsplash.com/photos/mO1LXRLeLFs"
},
]
};
randomTitles(); // this now calls a single function that will create the three titles and put them into the html
function randomTitles(){
var arr = history_case.francais;
var arrLength = arr.length;
var titlesArray = ;
// the following creates the array of unique titles - it will only push a title to the array if it isnt already in the array - preventing duplicates
while(titlesArray.length < 3) {
var randomItem = arr[Math.floor(Math.random() * arrLength)];
var title = randomItem.title;
if(titlesArray.indexOf(title) == -1) {
titlesArray.push(title)
}
}
// the following sets the titles from the titlesArray into the html.
titlesArray.forEach(function(title,index) {
document.querySelector('.history_title_' + (index+1)).innerHTML = title;
})
;
};<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="container">
<div >
<h2 class="history_title_1"></h2>
<a href=""></a>
<img src="" >
</div>
<div >
<h2 class="history_title_2"></h2>
<a href=""></a>
<img src="" >
</div>
<div>
<h2 class="history_title_3"></h2>
<a href=""></a>
<img src="" >
</div>
</div> <!-- end of container-->
<script src="history_case_url.js"></script>
</body>
</html>answered Nov 12 '18 at 20:07
gavgrifgavgrif
8,3482717
add a comment |
1
The cause of the issue is that you are only calling the random selection once and so each time you use the value - you are using the same value.
By putting the random item generator into a function and calling that - you will get a different random item each time the function is called.
EDIT - I have altered my answer to provide a mechanism to only have unique titles being passed into the html. Essentially - creating an array of three unique titles and then passing those titles to the html.
You should probably put some smarts in there to remove an item if its already been selected - to prevent the random selection of the same item, but the following should give you a start.
var history_case = {
"francais": [
{
"title": "titre 1",
"url": " https://unsplash.com/t/wallpapers",
"image": "https://unsplash.com/photos/xW7Cdhoe9uA"
},
{
"title": "titre 2",
"url": "https://unsplash.com/t/architecture",
"image": "https://unsplash.com/photos/MYQT7kTCBwI"
},
{
"title": "titre 3",
"url": "https://unsplash.com/t/business-work",
"image": "https://unsplash.com/photos/8qEuawM_txg"
},
{
"title": "titre 4",
"url": "https://unsplash.com/t/food-drink",
"image": "https://unsplash.com/photos/mO1LXRLeLFs"
},
]
};
randomTitles(); // this now calls a single function that will create the three titles and put them into the html
function randomTitles(){
var arr = history_case.francais;
var arrLength = arr.length;
var titlesArray = ;
// the following creates the array of unique titles - it will only push a title to the array if it isnt already in the array - preventing duplicates
while(titlesArray.length < 3) {
var randomItem = arr[Math.floor(Math.random() * arrLength)];
var title = randomItem.title;
if(titlesArray.indexOf(title) == -1) {
titlesArray.push(title)
}
}
// the following sets the titles from the titlesArray into the html.
titlesArray.forEach(function(title,index) {
document.querySelector('.history_title_' + (index+1)).innerHTML = title;
})
;
};<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="container">
<div >
<h2 class="history_title_1"></h2>
<a href=""></a>
<img src="" >
</div>
<div >
<h2 class="history_title_2"></h2>
<a href=""></a>
<img src="" >
</div>
<div>
<h2 class="history_title_3"></h2>
<a href=""></a>
<img src="" >
</div>
</div> <!-- end of container-->
<script src="history_case_url.js"></script>
</body>
</html>answered Nov 12 '18 at 20:07
gavgrifgavgrif
8,3482717
add a comment |
1
1
1
The cause of the issue is that you are only calling the random selection once and so each time you use the value - you are using the same value.
By putting the random item generator into a function and calling that - you will get a different random item each time the function is called.
EDIT - I have altered my answer to provide a mechanism to only have unique titles being passed into the html. Essentially - creating an array of three unique titles and then passing those titles to the html.
You should probably put some smarts in there to remove an item if its already been selected - to prevent the random selection of the same item, but the following should give you a start.
var history_case = {
"francais": [
{
"title": "titre 1",
"url": " https://unsplash.com/t/wallpapers",
"image": "https://unsplash.com/photos/xW7Cdhoe9uA"
},
{
"title": "titre 2",
"url": "https://unsplash.com/t/architecture",
"image": "https://unsplash.com/photos/MYQT7kTCBwI"
},
{
"title": "titre 3",
"url": "https://unsplash.com/t/business-work",
"image": "https://unsplash.com/photos/8qEuawM_txg"
},
{
"title": "titre 4",
"url": "https://unsplash.com/t/food-drink",
"image": "https://unsplash.com/photos/mO1LXRLeLFs"
},
]
};
randomTitles(); // this now calls a single function that will create the three titles and put them into the html
function randomTitles(){
var arr = history_case.francais;
var arrLength = arr.length;
var titlesArray = ;
// the following creates the array of unique titles - it will only push a title to the array if it isnt already in the array - preventing duplicates
while(titlesArray.length < 3) {
var randomItem = arr[Math.floor(Math.random() * arrLength)];
var title = randomItem.title;
if(titlesArray.indexOf(title) == -1) {
titlesArray.push(title)
}
}
// the following sets the titles from the titlesArray into the html.
titlesArray.forEach(function(title,index) {
document.querySelector('.history_title_' + (index+1)).innerHTML = title;
})
;
};<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="container">
<div >
<h2 class="history_title_1"></h2>
<a href=""></a>
<img src="" >
</div>
<div >
<h2 class="history_title_2"></h2>
<a href=""></a>
<img src="" >
</div>
<div>
<h2 class="history_title_3"></h2>
<a href=""></a>
<img src="" >
</div>
</div> <!-- end of container-->
<script src="history_case_url.js"></script>
</body>
</html>answered Nov 12 '18 at 20:07
gavgrifgavgrif
8,3482717
The cause of the issue is that you are only calling the random selection once and so each time you use the value - you are using the same value.
By putting the random item generator into a function and calling that - you will get a different random item each time the function is called.
EDIT - I have altered my answer to provide a mechanism to only have unique titles being passed into the html. Essentially - creating an array of three unique titles and then passing those titles to the html.
You should probably put some smarts in there to remove an item if its already been selected - to prevent the random selection of the same item, but the following should give you a start.
var history_case = {
"francais": [
{
"title": "titre 1",
"url": " https://unsplash.com/t/wallpapers",
"image": "https://unsplash.com/photos/xW7Cdhoe9uA"
},
{
"title": "titre 2",
"url": "https://unsplash.com/t/architecture",
"image": "https://unsplash.com/photos/MYQT7kTCBwI"
},
{
"title": "titre 3",
"url": "https://unsplash.com/t/business-work",
"image": "https://unsplash.com/photos/8qEuawM_txg"
},
{
"title": "titre 4",
"url": "https://unsplash.com/t/food-drink",
"image": "https://unsplash.com/photos/mO1LXRLeLFs"
},
]
};
randomTitles(); // this now calls a single function that will create the three titles and put them into the html
function randomTitles(){
var arr = history_case.francais;
var arrLength = arr.length;
var titlesArray = ;
// the following creates the array of unique titles - it will only push a title to the array if it isnt already in the array - preventing duplicates
while(titlesArray.length < 3) {
var randomItem = arr[Math.floor(Math.random() * arrLength)];
var title = randomItem.title;
if(titlesArray.indexOf(title) == -1) {
titlesArray.push(title)
}
}
// the following sets the titles from the titlesArray into the html.
titlesArray.forEach(function(title,index) {
document.querySelector('.history_title_' + (index+1)).innerHTML = title;
})
;
};<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="container">
<div >
<h2 class="history_title_1"></h2>
<a href=""></a>
<img src="" >
</div>
<div >
<h2 class="history_title_2"></h2>
<a href=""></a>
<img src="" >
</div>
<div>
<h2 class="history_title_3"></h2>
<a href=""></a>
<img src="" >
</div>
</div> <!-- end of container-->
<script src="history_case_url.js"></script>
</body>
</html>var history_case = {
"francais": [
{
"title": "titre 1",
"url": " https://unsplash.com/t/wallpapers",
"image": "https://unsplash.com/photos/xW7Cdhoe9uA"
},
{
"title": "titre 2",
"url": "https://unsplash.com/t/architecture",
"image": "https://unsplash.com/photos/MYQT7kTCBwI"
},
{
"title": "titre 3",
"url": "https://unsplash.com/t/business-work",
"image": "https://unsplash.com/photos/8qEuawM_txg"
},
{
"title": "titre 4",
"url": "https://unsplash.com/t/food-drink",
"image": "https://unsplash.com/photos/mO1LXRLeLFs"
},
]
};
randomTitles(); // this now calls a single function that will create the three titles and put them into the html
function randomTitles(){
var arr = history_case.francais;
var arrLength = arr.length;
var titlesArray = ;
// the following creates the array of unique titles - it will only push a title to the array if it isnt already in the array - preventing duplicates
while(titlesArray.length < 3) {
var randomItem = arr[Math.floor(Math.random() * arrLength)];
var title = randomItem.title;
if(titlesArray.indexOf(title) == -1) {
titlesArray.push(title)
}
}
// the following sets the titles from the titlesArray into the html.
titlesArray.forEach(function(title,index) {
document.querySelector('.history_title_' + (index+1)).innerHTML = title;
})
;
};<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="container">
<div >
<h2 class="history_title_1"></h2>
<a href=""></a>
<img src="" >
</div>
<div >
<h2 class="history_title_2"></h2>
<a href=""></a>
<img src="" >
</div>
<div>
<h2 class="history_title_3"></h2>
<a href=""></a>
<img src="" >
</div>
</div> <!-- end of container-->
<script src="history_case_url.js"></script>
</body>
</html>var history_case = {
"francais": [
{
"title": "titre 1",
"url": " https://unsplash.com/t/wallpapers",
"image": "https://unsplash.com/photos/xW7Cdhoe9uA"
},
{
"title": "titre 2",
"url": "https://unsplash.com/t/architecture",
"image": "https://unsplash.com/photos/MYQT7kTCBwI"
},
{
"title": "titre 3",
"url": "https://unsplash.com/t/business-work",
"image": "https://unsplash.com/photos/8qEuawM_txg"
},
{
"title": "titre 4",
"url": "https://unsplash.com/t/food-drink",
"image": "https://unsplash.com/photos/mO1LXRLeLFs"
},
]
};
randomTitles(); // this now calls a single function that will create the three titles and put them into the html
function randomTitles(){
var arr = history_case.francais;
var arrLength = arr.length;
var titlesArray = ;
// the following creates the array of unique titles - it will only push a title to the array if it isnt already in the array - preventing duplicates
while(titlesArray.length < 3) {
var randomItem = arr[Math.floor(Math.random() * arrLength)];
var title = randomItem.title;
if(titlesArray.indexOf(title) == -1) {
titlesArray.push(title)
}
}
// the following sets the titles from the titlesArray into the html.
titlesArray.forEach(function(title,index) {
document.querySelector('.history_title_' + (index+1)).innerHTML = title;
})
;
};<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="container">
<div >
<h2 class="history_title_1"></h2>
<a href=""></a>
<img src="" >
</div>
<div >
<h2 class="history_title_2"></h2>
<a href=""></a>
<img src="" >
</div>
<div>
<h2 class="history_title_3"></h2>
<a href=""></a>
<img src="" >
</div>
</div> <!-- end of container-->
<script src="history_case_url.js"></script>
</body>
</html>answered Nov 12 '18 at 20:07
gavgrifgavgrif
8,3482717
edited Nov 12 '18 at 20:39
answered Nov 12 '18 at 20:07
gavgrifgavgrif
8,3482717
answered Nov 12 '18 at 20:07
gavgrifgavgrif
8,3482717
answered Nov 12 '18 at 20:07
gavgrifgavgrif
8,3482717
8,3482717
add a comment |
add a comment |
0
Just add a function to get the random title and call it three times.
var history_case = {
"francais": [
{
"title": "titre 1",
"url": " https://unsplash.com/t/wallpapers",
"image": "https://unsplash.com/photos/xW7Cdhoe9uA"
},
{
"title": "titre 2",
"url": "https://unsplash.com/t/architecture",
"image": "https://unsplash.com/photos/MYQT7kTCBwI"
},
{
"title": "titre 3",
"url": "https://unsplash.com/t/business-work",
"image": "https://unsplash.com/photos/8qEuawM_txg"
},
{
"title": "titre 4",
"url": "https://unsplash.com/t/food-drink",
"image": "https://unsplash.com/photos/mO1LXRLeLFs"
},
]
};
function getRandomTitle() {
return history_case.francais[Math.floor(Math.random() * history_case.francais.length)].title;
}
var title1 = document.querySelector('.history_title_1');
var title2 = document.querySelector('.history_title_2');
var title3 = document.querySelector('.history_title_3');
title1.prepend(getRandomTitle());
title2.prepend(getRandomTitle());
title3.prepend(getRandomTitle());<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="container">
<div >
<h2 class="history_title_1"></h2>
<a href=""></a>
<img src="" >
</div>
<div >
<h2 class="history_title_2"></h2>
<a href=""></a>
<img src="" >
</div>
<div>
<h2 class="history_title_3"></h2>
<a href=""></a>
<img src="" >
</div>
</div> <!-- end of container-->
<script src="history_case_url.js"></script>
</body>
</html>Note that you could get repeated titles with this method.
answered Nov 12 '18 at 20:08
Ariel AlvaradoAriel Alvarado
682311
add a comment |
0
Just add a function to get the random title and call it three times.
var history_case = {
"francais": [
{
"title": "titre 1",
"url": " https://unsplash.com/t/wallpapers",
"image": "https://unsplash.com/photos/xW7Cdhoe9uA"
},
{
"title": "titre 2",
"url": "https://unsplash.com/t/architecture",
"image": "https://unsplash.com/photos/MYQT7kTCBwI"
},
{
"title": "titre 3",
"url": "https://unsplash.com/t/business-work",
"image": "https://unsplash.com/photos/8qEuawM_txg"
},
{
"title": "titre 4",
"url": "https://unsplash.com/t/food-drink",
"image": "https://unsplash.com/photos/mO1LXRLeLFs"
},
]
};
function getRandomTitle() {
return history_case.francais[Math.floor(Math.random() * history_case.francais.length)].title;
}
var title1 = document.querySelector('.history_title_1');
var title2 = document.querySelector('.history_title_2');
var title3 = document.querySelector('.history_title_3');
title1.prepend(getRandomTitle());
title2.prepend(getRandomTitle());
title3.prepend(getRandomTitle());<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="container">
<div >
<h2 class="history_title_1"></h2>
<a href=""></a>
<img src="" >
</div>
<div >
<h2 class="history_title_2"></h2>
<a href=""></a>
<img src="" >
</div>
<div>
<h2 class="history_title_3"></h2>
<a href=""></a>
<img src="" >
</div>
</div> <!-- end of container-->
<script src="history_case_url.js"></script>
</body>
</html>Note that you could get repeated titles with this method.
answered Nov 12 '18 at 20:08
Ariel AlvaradoAriel Alvarado
682311
add a comment |
0
0
0
Just add a function to get the random title and call it three times.
var history_case = {
"francais": [
{
"title": "titre 1",
"url": " https://unsplash.com/t/wallpapers",
"image": "https://unsplash.com/photos/xW7Cdhoe9uA"
},
{
"title": "titre 2",
"url": "https://unsplash.com/t/architecture",
"image": "https://unsplash.com/photos/MYQT7kTCBwI"
},
{
"title": "titre 3",
"url": "https://unsplash.com/t/business-work",
"image": "https://unsplash.com/photos/8qEuawM_txg"
},
{
"title": "titre 4",
"url": "https://unsplash.com/t/food-drink",
"image": "https://unsplash.com/photos/mO1LXRLeLFs"
},
]
};
function getRandomTitle() {
return history_case.francais[Math.floor(Math.random() * history_case.francais.length)].title;
}
var title1 = document.querySelector('.history_title_1');
var title2 = document.querySelector('.history_title_2');
var title3 = document.querySelector('.history_title_3');
title1.prepend(getRandomTitle());
title2.prepend(getRandomTitle());
title3.prepend(getRandomTitle());<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="container">
<div >
<h2 class="history_title_1"></h2>
<a href=""></a>
<img src="" >
</div>
<div >
<h2 class="history_title_2"></h2>
<a href=""></a>
<img src="" >
</div>
<div>
<h2 class="history_title_3"></h2>
<a href=""></a>
<img src="" >
</div>
</div> <!-- end of container-->
<script src="history_case_url.js"></script>
</body>
</html>Note that you could get repeated titles with this method.
answered Nov 12 '18 at 20:08
Ariel AlvaradoAriel Alvarado
682311
Just add a function to get the random title and call it three times.
var history_case = {
"francais": [
{
"title": "titre 1",
"url": " https://unsplash.com/t/wallpapers",
"image": "https://unsplash.com/photos/xW7Cdhoe9uA"
},
{
"title": "titre 2",
"url": "https://unsplash.com/t/architecture",
"image": "https://unsplash.com/photos/MYQT7kTCBwI"
},
{
"title": "titre 3",
"url": "https://unsplash.com/t/business-work",
"image": "https://unsplash.com/photos/8qEuawM_txg"
},
{
"title": "titre 4",
"url": "https://unsplash.com/t/food-drink",
"image": "https://unsplash.com/photos/mO1LXRLeLFs"
},
]
};
function getRandomTitle() {
return history_case.francais[Math.floor(Math.random() * history_case.francais.length)].title;
}
var title1 = document.querySelector('.history_title_1');
var title2 = document.querySelector('.history_title_2');
var title3 = document.querySelector('.history_title_3');
title1.prepend(getRandomTitle());
title2.prepend(getRandomTitle());
title3.prepend(getRandomTitle());<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="container">
<div >
<h2 class="history_title_1"></h2>
<a href=""></a>
<img src="" >
</div>
<div >
<h2 class="history_title_2"></h2>
<a href=""></a>
<img src="" >
</div>
<div>
<h2 class="history_title_3"></h2>
<a href=""></a>
<img src="" >
</div>
</div> <!-- end of container-->
<script src="history_case_url.js"></script>
</body>
</html>Note that you could get repeated titles with this method.
var history_case = {
"francais": [
{
"title": "titre 1",
"url": " https://unsplash.com/t/wallpapers",
"image": "https://unsplash.com/photos/xW7Cdhoe9uA"
},
{
"title": "titre 2",
"url": "https://unsplash.com/t/architecture",
"image": "https://unsplash.com/photos/MYQT7kTCBwI"
},
{
"title": "titre 3",
"url": "https://unsplash.com/t/business-work",
"image": "https://unsplash.com/photos/8qEuawM_txg"
},
{
"title": "titre 4",
"url": "https://unsplash.com/t/food-drink",
"image": "https://unsplash.com/photos/mO1LXRLeLFs"
},
]
};
function getRandomTitle() {
return history_case.francais[Math.floor(Math.random() * history_case.francais.length)].title;
}
var title1 = document.querySelector('.history_title_1');
var title2 = document.querySelector('.history_title_2');
var title3 = document.querySelector('.history_title_3');
title1.prepend(getRandomTitle());
title2.prepend(getRandomTitle());
title3.prepend(getRandomTitle());<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="container">
<div >
<h2 class="history_title_1"></h2>
<a href=""></a>
<img src="" >
</div>
<div >
<h2 class="history_title_2"></h2>
<a href=""></a>
<img src="" >
</div>
<div>
<h2 class="history_title_3"></h2>
<a href=""></a>
<img src="" >
</div>
</div> <!-- end of container-->
<script src="history_case_url.js"></script>
</body>
</html>var history_case = {
"francais": [
{
"title": "titre 1",
"url": " https://unsplash.com/t/wallpapers",
"image": "https://unsplash.com/photos/xW7Cdhoe9uA"
},
{
"title": "titre 2",
"url": "https://unsplash.com/t/architecture",
"image": "https://unsplash.com/photos/MYQT7kTCBwI"
},
{
"title": "titre 3",
"url": "https://unsplash.com/t/business-work",
"image": "https://unsplash.com/photos/8qEuawM_txg"
},
{
"title": "titre 4",
"url": "https://unsplash.com/t/food-drink",
"image": "https://unsplash.com/photos/mO1LXRLeLFs"
},
]
};
function getRandomTitle() {
return history_case.francais[Math.floor(Math.random() * history_case.francais.length)].title;
}
var title1 = document.querySelector('.history_title_1');
var title2 = document.querySelector('.history_title_2');
var title3 = document.querySelector('.history_title_3');
title1.prepend(getRandomTitle());
title2.prepend(getRandomTitle());
title3.prepend(getRandomTitle());<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="container">
<div >
<h2 class="history_title_1"></h2>
<a href=""></a>
<img src="" >
</div>
<div >
<h2 class="history_title_2"></h2>
<a href=""></a>
<img src="" >
</div>
<div>
<h2 class="history_title_3"></h2>
<a href=""></a>
<img src="" >
</div>
</div> <!-- end of container-->
<script src="history_case_url.js"></script>
</body>
</html>answered Nov 12 '18 at 20:08
Ariel AlvaradoAriel Alvarado
682311
answered Nov 12 '18 at 20:08
Ariel AlvaradoAriel Alvarado
682311
answered Nov 12 '18 at 20:08
Ariel AlvaradoAriel Alvarado
682311
answered Nov 12 '18 at 20:08
Ariel AlvaradoAriel Alvarado
682311
682311
add a comment |
add a comment |
0
Change random into a function, which other answers have pointed out, but what they failed to do was to destroy duplicate choices. To do this we use a Set object which will not allow duplicates, and make random choices until we get three different return values. Then we simply store the returned values and use them to populate the page!
var random = () => history_case.francais[Math.floor(Math.random() *
history_case.francais.length)],
randomChoices = () => {
let chosen = new Set();
while (chosen.size < 3) {
chosen.add(random());
}
return [...chosen];
}
var history_case = {
"francais": [
{
"title": "titre 1",
"url": " https://unsplash.com/t/wallpapers",
"image": "https://unsplash.com/photos/xW7Cdhoe9uA"
},
{
"title": "titre 2",
"url": "https://unsplash.com/t/architecture",
"image": "https://unsplash.com/photos/MYQT7kTCBwI"
},
{
"title": "titre 3",
"url": "https://unsplash.com/t/business-work",
"image": "https://unsplash.com/photos/8qEuawM_txg"
},
{
"title": "titre 4",
"url": "https://unsplash.com/t/food-drink",
"image": "https://unsplash.com/photos/mO1LXRLeLFs"
},
]
};
var random = () => history_case.francais[Math.floor(Math.random() * history_case.francais.length)],
randomChoices = () => {
let chosen = new Set();
while (chosen.size < 3) {
chosen.add(random());
}
return [...chosen];
}
var random_array = randomChoices();
var title1 = document.querySelector('.history_title_1');
var title2 = document.querySelector('.history_title_2');
var title3 = document.querySelector('.history_title_3');
title1.prepend(random_array[0].title);
title2.prepend(random_array[1].title);
title3.prepend(random_array[2].title);<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="container">
<div>
<h2 class="history_title_1"></h2>
<a href=""></a>
<img src="">
</div>
<div>
<h2 class="history_title_2"></h2>
<a href=""></a>
<img src="">
</div>
<div>
<h2 class="history_title_3"></h2>
<a href=""></a>
<img src="">
</div>
</div>
<!-- end of container-->
<script src="history_case_url.js"></script>
</body>
</html>answered Nov 12 '18 at 20:26
zfrischzfrisch
4,49811024
add a comment |
0
Change random into a function, which other answers have pointed out, but what they failed to do was to destroy duplicate choices. To do this we use a Set object which will not allow duplicates, and make random choices until we get three different return values. Then we simply store the returned values and use them to populate the page!
var random = () => history_case.francais[Math.floor(Math.random() *
history_case.francais.length)],
randomChoices = () => {
let chosen = new Set();
while (chosen.size < 3) {
chosen.add(random());
}
return [...chosen];
}
var history_case = {
"francais": [
{
"title": "titre 1",
"url": " https://unsplash.com/t/wallpapers",
"image": "https://unsplash.com/photos/xW7Cdhoe9uA"
},
{
"title": "titre 2",
"url": "https://unsplash.com/t/architecture",
"image": "https://unsplash.com/photos/MYQT7kTCBwI"
},
{
"title": "titre 3",
"url": "https://unsplash.com/t/business-work",
"image": "https://unsplash.com/photos/8qEuawM_txg"
},
{
"title": "titre 4",
"url": "https://unsplash.com/t/food-drink",
"image": "https://unsplash.com/photos/mO1LXRLeLFs"
},
]
};
var random = () => history_case.francais[Math.floor(Math.random() * history_case.francais.length)],
randomChoices = () => {
let chosen = new Set();
while (chosen.size < 3) {
chosen.add(random());
}
return [...chosen];
}
var random_array = randomChoices();
var title1 = document.querySelector('.history_title_1');
var title2 = document.querySelector('.history_title_2');
var title3 = document.querySelector('.history_title_3');
title1.prepend(random_array[0].title);
title2.prepend(random_array[1].title);
title3.prepend(random_array[2].title);<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="container">
<div>
<h2 class="history_title_1"></h2>
<a href=""></a>
<img src="">
</div>
<div>
<h2 class="history_title_2"></h2>
<a href=""></a>
<img src="">
</div>
<div>
<h2 class="history_title_3"></h2>
<a href=""></a>
<img src="">
</div>
</div>
<!-- end of container-->
<script src="history_case_url.js"></script>
</body>
</html>answered Nov 12 '18 at 20:26
zfrischzfrisch
4,49811024
add a comment |
0
0
0
Change random into a function, which other answers have pointed out, but what they failed to do was to destroy duplicate choices. To do this we use a Set object which will not allow duplicates, and make random choices until we get three different return values. Then we simply store the returned values and use them to populate the page!
var random = () => history_case.francais[Math.floor(Math.random() *
history_case.francais.length)],
randomChoices = () => {
let chosen = new Set();
while (chosen.size < 3) {
chosen.add(random());
}
return [...chosen];
}
var history_case = {
"francais": [
{
"title": "titre 1",
"url": " https://unsplash.com/t/wallpapers",
"image": "https://unsplash.com/photos/xW7Cdhoe9uA"
},
{
"title": "titre 2",
"url": "https://unsplash.com/t/architecture",
"image": "https://unsplash.com/photos/MYQT7kTCBwI"
},
{
"title": "titre 3",
"url": "https://unsplash.com/t/business-work",
"image": "https://unsplash.com/photos/8qEuawM_txg"
},
{
"title": "titre 4",
"url": "https://unsplash.com/t/food-drink",
"image": "https://unsplash.com/photos/mO1LXRLeLFs"
},
]
};
var random = () => history_case.francais[Math.floor(Math.random() * history_case.francais.length)],
randomChoices = () => {
let chosen = new Set();
while (chosen.size < 3) {
chosen.add(random());
}
return [...chosen];
}
var random_array = randomChoices();
var title1 = document.querySelector('.history_title_1');
var title2 = document.querySelector('.history_title_2');
var title3 = document.querySelector('.history_title_3');
title1.prepend(random_array[0].title);
title2.prepend(random_array[1].title);
title3.prepend(random_array[2].title);<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="container">
<div>
<h2 class="history_title_1"></h2>
<a href=""></a>
<img src="">
</div>
<div>
<h2 class="history_title_2"></h2>
<a href=""></a>
<img src="">
</div>
<div>
<h2 class="history_title_3"></h2>
<a href=""></a>
<img src="">
</div>
</div>
<!-- end of container-->
<script src="history_case_url.js"></script>
</body>
</html>answered Nov 12 '18 at 20:26
zfrischzfrisch
4,49811024
Change random into a function, which other answers have pointed out, but what they failed to do was to destroy duplicate choices. To do this we use a Set object which will not allow duplicates, and make random choices until we get three different return values. Then we simply store the returned values and use them to populate the page!
var random = () => history_case.francais[Math.floor(Math.random() *
history_case.francais.length)],
randomChoices = () => {
let chosen = new Set();
while (chosen.size < 3) {
chosen.add(random());
}
return [...chosen];
}
var history_case = {
"francais": [
{
"title": "titre 1",
"url": " https://unsplash.com/t/wallpapers",
"image": "https://unsplash.com/photos/xW7Cdhoe9uA"
},
{
"title": "titre 2",
"url": "https://unsplash.com/t/architecture",
"image": "https://unsplash.com/photos/MYQT7kTCBwI"
},
{
"title": "titre 3",
"url": "https://unsplash.com/t/business-work",
"image": "https://unsplash.com/photos/8qEuawM_txg"
},
{
"title": "titre 4",
"url": "https://unsplash.com/t/food-drink",
"image": "https://unsplash.com/photos/mO1LXRLeLFs"
},
]
};
var random = () => history_case.francais[Math.floor(Math.random() * history_case.francais.length)],
randomChoices = () => {
let chosen = new Set();
while (chosen.size < 3) {
chosen.add(random());
}
return [...chosen];
}
var random_array = randomChoices();
var title1 = document.querySelector('.history_title_1');
var title2 = document.querySelector('.history_title_2');
var title3 = document.querySelector('.history_title_3');
title1.prepend(random_array[0].title);
title2.prepend(random_array[1].title);
title3.prepend(random_array[2].title);<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="container">
<div>
<h2 class="history_title_1"></h2>
<a href=""></a>
<img src="">
</div>
<div>
<h2 class="history_title_2"></h2>
<a href=""></a>
<img src="">
</div>
<div>
<h2 class="history_title_3"></h2>
<a href=""></a>
<img src="">
</div>
</div>
<!-- end of container-->
<script src="history_case_url.js"></script>
</body>
</html>var history_case = {
"francais": [
{
"title": "titre 1",
"url": " https://unsplash.com/t/wallpapers",
"image": "https://unsplash.com/photos/xW7Cdhoe9uA"
},
{
"title": "titre 2",
"url": "https://unsplash.com/t/architecture",
"image": "https://unsplash.com/photos/MYQT7kTCBwI"
},
{
"title": "titre 3",
"url": "https://unsplash.com/t/business-work",
"image": "https://unsplash.com/photos/8qEuawM_txg"
},
{
"title": "titre 4",
"url": "https://unsplash.com/t/food-drink",
"image": "https://unsplash.com/photos/mO1LXRLeLFs"
},
]
};
var random = () => history_case.francais[Math.floor(Math.random() * history_case.francais.length)],
randomChoices = () => {
let chosen = new Set();
while (chosen.size < 3) {
chosen.add(random());
}
return [...chosen];
}
var random_array = randomChoices();
var title1 = document.querySelector('.history_title_1');
var title2 = document.querySelector('.history_title_2');
var title3 = document.querySelector('.history_title_3');
title1.prepend(random_array[0].title);
title2.prepend(random_array[1].title);
title3.prepend(random_array[2].title);<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="container">
<div>
<h2 class="history_title_1"></h2>
<a href=""></a>
<img src="">
</div>
<div>
<h2 class="history_title_2"></h2>
<a href=""></a>
<img src="">
</div>
<div>
<h2 class="history_title_3"></h2>
<a href=""></a>
<img src="">
</div>
</div>
<!-- end of container-->
<script src="history_case_url.js"></script>
</body>
</html>var history_case = {
"francais": [
{
"title": "titre 1",
"url": " https://unsplash.com/t/wallpapers",
"image": "https://unsplash.com/photos/xW7Cdhoe9uA"
},
{
"title": "titre 2",
"url": "https://unsplash.com/t/architecture",
"image": "https://unsplash.com/photos/MYQT7kTCBwI"
},
{
"title": "titre 3",
"url": "https://unsplash.com/t/business-work",
"image": "https://unsplash.com/photos/8qEuawM_txg"
},
{
"title": "titre 4",
"url": "https://unsplash.com/t/food-drink",
"image": "https://unsplash.com/photos/mO1LXRLeLFs"
},
]
};
var random = () => history_case.francais[Math.floor(Math.random() * history_case.francais.length)],
randomChoices = () => {
let chosen = new Set();
while (chosen.size < 3) {
chosen.add(random());
}
return [...chosen];
}
var random_array = randomChoices();
var title1 = document.querySelector('.history_title_1');
var title2 = document.querySelector('.history_title_2');
var title3 = document.querySelector('.history_title_3');
title1.prepend(random_array[0].title);
title2.prepend(random_array[1].title);
title3.prepend(random_array[2].title);<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="container">
<div>
<h2 class="history_title_1"></h2>
<a href=""></a>
<img src="">
</div>
<div>
<h2 class="history_title_2"></h2>
<a href=""></a>
<img src="">
</div>
<div>
<h2 class="history_title_3"></h2>
<a href=""></a>
<img src="">
</div>
</div>
<!-- end of container-->
<script src="history_case_url.js"></script>
</body>
</html>answered Nov 12 '18 at 20:26
zfrischzfrisch
4,49811024
answered Nov 12 '18 at 20:26
zfrischzfrisch
4,49811024
answered Nov 12 '18 at 20:26
zfrischzfrisch
4,49811024
answered Nov 12 '18 at 20:26
zfrischzfrisch
4,49811024
4,49811024
add a comment |
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53269282%2fhow-to-display-item-from-an-object-in-a-random-order-and-keep-their-respective-p%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
