How to display value from object in a random only once

Question

What I am trying to do, is to display inside a container the value of different item without repetition in a random order. The problem i have is that i am not able to keep the (value/property) of an item together. For example the name : cat is with the duck image and dog article.

I would like to have everything related together.

If someone would have a easier way to do this with jquery I will take it

thank you stack overflow community

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;

    })

    ;
};


// document.querySelector('.history_image_1').src = "https://upload.wikimedia.org/wikipedia/commons/f/f9/Phoenicopterus_ruber_in_S%C3%A3o_Paulo_Zoo.jpg";

.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>