2016-11-05 7 views
-1

У меня есть html-файл с <script type="application/json"></script> внутри него. Мне нужно изменить объект json в этом скрипте перед загрузкой файла html. Как мне это сделать? Объект JSON выглядит что-то похожее на это:Как я могу изменить скрипт application/json в html-файле до его выполнения?

<script type="application/json"> 
     {  
      "questionOptions": { 
       "ques_1": {"type" : "YesNoQuestion","questionText": "messages.questions.1"}, 
       "ques_2": {"type" : "YesNoQuestion","questionText": "messages.questions.2"}, 
       "ques_3": {"type" : "YesNoQuestion","questionText": "messages.questions.3"}, 
       "ques_4": {"type" : "YesNoQuestion","questionText": "messages.questions.4"}, 
       "ques_5": {"type" : "YesNoQuestion","questionText": "messages.questions.5"} 
      }, 
      "questions": [ 
       "ques_1", 
       "ques_2", 
       "ques_3", 
       "ques_4", 
       "ques_5" 
      ], 
      "persist": false, 
      "intl": { 
       "locales": "en-US", 
       "messages": { 
        "questions": { 
         "1": "<img src='../images/img1.jpg'>", 
         "2": "<img src='../images/img2.jpg'>", 
         "3": "<img src='../images/img3.jpg'>", 
         "4": "<img src='../images/img4.jpg'>", 
         "5": "<img src='../images/img5.jpg'>" 
        }, 
        "yes": "Similar", 
        "no": "Old", 
        "dragAndDrop": "<br><span class='preq'>Is the object old or similar?</span><br>Starting dragging the button down to see the picture. Drag and drop to your answer.", 
        "continue": "Click Next to continue", 
        "next": "Next", 
        "back": "Back", 
        "finish": "Finish", 
        "thankYou": "Thank you for completing this form." 
       } 
      } 
     } 
    </script> 

Мне нужно рандомизации questionOptions, вопросы и Intl [сообщения] [вопросы], но рандомизации их точно так же, как и все они совпадают по индексу в перечисленном массива друг к другу.

Помощь очень ценится.

Редактировать: Добавлены соответствующие кавычки.

+0

Первого, что вам нужно сделать, это исправить JSON, это недействительно. Затем вам нужно написать код самостоятельно, Stack Overflow не является службой написания кода. Я добавлю ответ, который поможет вам начать работу. – Tibrogargan

+0

Как недействителен JSON? – ParkerWilliams

+0

Скопируйте и вставьте его в онлайн-валидатор JSON, он покажет вам проблемы. Для начала вам не хватает конечной цитаты для 'type =" application/json "' – Tibrogargan

ответ

1

Несколько мыслей здесь:

  1. Там на самом деле не способ рандомизации вещи перед тем HTML-файл загружается, если у вас нет контроля над тем, что генерирует JSON, в первую очередь, о котором я Угадывание жестко, как показано.

  2. questionOptions и messages - хеши. Порядок их ключей не имеет значения, поэтому я не вижу смысла в рандомизации того, как ключи вставлены и выложены.

  3. Наконец, questions массив - это, пожалуй, единственное, что вы хотите рандомизации

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

Array.prototype.shuffle = function() { 
    var j, x, i; 
    for (i = this.length; i; i--) { 
     j = Math.floor(Math.random() * i); 
     x = this[i - 1]; 
     this[i - 1] = this[j]; 
     this[j] = x; 
    } 
    return this; 
} 

И тогда вы можете вызвать его на любом массиве вы хотите рандомизации, например:

qdata.questions.shuffle(); //assuming you store that JSON in a variable called qdata 
+0

Вы можете легко рандомизировать данные перед загрузкой HTML, просто поставив свой тег '

-1

Небольшого пример того, как превратить блок JSON сценария в реальные данные и изменять исходный JSON до загрузки документа:

<script type="application/json">{"foo":"bar"} 
 
</script> 
 
<script> 
 
function randomizeData(data) { return { foo: "something else" }; } 
 
var data; 
 
(function() { 
 
    var scripts = document.getElementsByTagName("script"); 
 
    for(var i = 0; i < scripts.length; i++) { 
 
    if (scripts[i].type === "application/json") { 
 
     data = JSON.parse(scripts[i].innerText); 
 
     // manipulate/randomize your data here 
 
     data = randomizeData(data); 
 
     // change the JSON source to whatever you like 
 
     scripts[i].innerText = JSON.stringify(data); 
 
     break; 
 
    } 
 
    } 
 
})(); 
 

 
document.write("The value of foo: "+data.foo); 
 
</script> 
 
<body> 
 
</body>