Отображать случайные значения из данных JSON

Question

Я пытаюсь, чтобы новое изображение появлялось каждый раз, когда наведен тег a. У меня работает запрос getJSON, но я не могу случайно рандомизировать результат функции.

У меня есть данные JSON:

[
 {"url":"http:\/\/image1.jpg"},
 {"url":"http:\/\/image2.jpg"},
 {"url":"http:\/\/image3.jpg"},
 {"url":"http:\/\/image4.jpg"}
]

Мой запрос getJSON выглядит следующим образом:

  $('.imagehover').on(
    'mouseenter',
    function() {
      $.getJSON('images.json', function(result) {
        $.each(result, function(i, field){
          var urlPorperty = Object.keys(jsonData.url);
          var index = Math.floor(Math.random() * urlPorperty.length);
          var imageUrl = urlPorperty[index];
          $("#imagetestresult").html("<img src=" + field.url + ">");
        });
      });
    }
  );

HTML здесь:

<a href="#" class="imagehover">Images
<div id="imagetestresult"></div></a>

Любой совет будет высоко ценится:)

Answer 1

Ответ Мистер.Brickowski является идеальным.Я просто хотел бы добавить что-то еще.Не выполняйте вызов ajax каждый раз, когда происходит событие ввода мыши.Это доставит вам много хлопот позже.Вместо этого сначала выполните этот вызов ajax, а затем сохраните эти данные в некоторых переменных, таких как urlProperty и MouseEnter, и сделайте остаток случайного выбора.

Answer 2

1. Аргумент обратного вызова уже является объектом javascript, вам не нужно его анализировать.
2. jQuery.html () выводит только строку html непосредственно в содержимое выбранного элемента. Если вы хотите отобразить URL как видимое изображение, вы можете показать его, используя свойство css background-image

чтобы сделать это, на вас обратный вызов успеха

function (jsonData) {
    // obtain all the property as they are image url
    var urlPorperty = Object.keys(jsonData.data);
    // random pick an index
    var index = Math.floor(Math.random() * urlPorperty.length);
    // get the url base on the index
    var imageUrl = urlPorperty[index];
    // assign the image to #imagetestresult background image
    $('#imagetestresult').css('background-image', `url(${imageUrl})`);

}

---

Обновление 1

Вы можете упростить URL JSON в том же массиве уровней

{
    "url": [
        "http:\/\/image1.jpg",
        "http:\/\/image2.jpg",
        "http:\/\/image3.jpg",
        "http:\/\/image4.jpg"
    ]
}

, как указывает Шива Пандей, запуск аякса по событию мыши может быть нецелесообразным. Поскольку ajax является асинхронным, для http требуется время, и взаимодействие с пользователем может быть не очень гладким. Так или иначе.

$('.imagehover').on('mouseenter', function() {
    $.getJSON('images.json', function(result) {
        // random pick an index
        var index = Math.floor(result.url.length * Math.random());

        // replace the content with a <img>
        $("#imagetestresult").html($('<img>', {
            src : result.url[index]
        }));
    });
});