Изменение HTML с помощью Ajax и JSON

Question

Так что я пытаюсь сделать случайно выбранный фрагмент текста из JSON (ну, на самом деле это JSONP из-за того же самого происхождения), файл появляется в веб-приложении.

сгенерировать случайное число, например, так:

function randomNumberCreator(numberOfOptions){ 
    var randomNumber = Math.floor(Math.random()*numberOfOptions); 
    return randomNumber; 
}; 

Мой JSON код выглядит следующим образом (это образец - это продолжается):

otmjsonp({ 

    "option2" : "this text", 

    "option3" : "that text", 

    "option4" : "some other text", 

    }); 

И надеялся, чтобы иметь возможность просто сделать что-то вроде этого:

$(".choice1").html(JSON.option+randomNumberCreator(4)); 

Но это, кажется, не работает, так что я должен был придумать сложную работу (это действительно смешно, я знаю):

function updateTree(){ 

$.ajax({ 

    url:"http://www.WEBSITE.com/json/newotmtree.php", 
    type: "GET", 
    dataType: "jsonp", 
    jsonpCallback: "otmjsonp", 
    async: false, 
    success: function(JSON){ 

    $(".initialChoices a").each(function(){ 
    $(this).show(); 
    }); 

    function rollDice(){ 
    diceRoll = randomNumberCreator(6); 


    switch(diceRoll){ 
      case 1: 
      $(".choice1").html(JSON.option1) 
      $(".choice2").html(JSON.option2) 
      $(".choice3").html(JSON.option3) 
      break; 

      case 2: 
      $(".choice1").html(JSON.option1) 
      $(".choice2").html(JSON.option5) 
      $(".choice3").html(JSON.option6) 
      break; 

      case 3: 
      $(".choice1").html(JSON.option1) 
      $(".choice2").html(JSON.option8) 
      $(".choice3").html(JSON.option9) 
      break; 

      case 4: 
      $(".choice1").html(JSON.option1) 
      $(".choice2").html(JSON.option11) 
      $(".choice3").html(JSON.option1) 
      break; 

      case 5: 
      $(".choice1").html(JSON.option1) 
      $(".choice2").html(JSON.option3) 
      $(".choice3").html(JSON.option4) 
      break; 

      case 6: 
      $(".choice1").html(JSON.option1) 
      $(".choice2").html(JSON.option4) 
      $(".choice3").html(JSON.option9) 
      break; 

      default: 
      alert("switch fail"); 

    } 
    }; 

    rollDice(); 


    var option1 = JSON.option1; 
    var option2 = JSON.option2; 
    var option3 = JSON.option3; 
    var option4 = JSON.option4; 
    var option5 = JSON.option5; 
    var option6 = JSON.option6; 
    var option7 = JSON.option7; 
    var option8 = JSON.option8; 
    var option9 = JSON.option9; 
    var option10 = JSON.option10; 
    var option11 = JSON.option11; 
    }, 
    error:function(){ 
    alert("error"); 
    } 

}); };

Для полноты, вот HTML:

<ul class="initialChoices"> 
<li><p><a class = "choice1" href="#">AJAX FAIL</a></p></li> 
<li><p><a class = "choice2" class="button" href="#">AJAX FAIL</a></p></li>       
<li><p><a class = "choice3" class="button" href="#">AJAX FAIL</a></p></li>      
</ul> 

Есть ли способ для меня, чтобы мой ответ JSONP действительно случайным образом (как то, что я надеялся сделать) - или я застрял с этим уродливым раствором ?

Спасибо!

Answer 1

Для случайных величин, вы увидите, что гораздо проще использовать массив. Поскольку вы не используете имена свойств из вашего объекта JSON, вы можете заполнить массив только с помощью значений. Выбор случайного значения из массива так же просто, как a[Math.floor(Math.random() * a.length)]:

$.ajax({ 

    url:"http://www.WEBSITE.com/json/newotmtree.php", 
    type: "GET", 
    dataType: "jsonp", 
    jsonpCallback: "otmjsonp", 
    async: false, 
    success: function(JSON){ 

     var a=[],i; 
     for(i in JSON)a.push(JSON[i]); 

     $(".initialChoices a").each(function(){ 
     $(this).html(a[Math.floor(Math.random() * a.length)]); 
     $(this).show(); 
     }); 

    }, 
    error:function(){ 
    alert("error"); 
    } 
}); 

Answer 2

Правильный путь

$(".choice1").html(JSON["option"+randomNumberCreator(4)]); 

Answer 3

что-то вроде

$(".choice1").html(JSON["option" + randomNumberCreator(4)]); 

может работать