заполнение значений из json в html-строку (в элементы формы) и предоставление им доступа только для чтения

#javascript #jquery #html #json

#javascript #jquery #HTML #json

Вопрос:

У меня есть HTML-строка, подобная этой:

 <h5><span class="wp-step">Step 1 : </span> Service Info</h5><div class="wp-details"><h2>Procedure includes:</h2>
<p>
    <input type="checkbox" name="Procedure Includes" value="Microdermabrasion">Microdermabrasion<br>
    <input type="checkbox" name="Procedure Includes" value="Chemical Peels">Chemical Peels<br>
    <input type="checkbox" name="Procedure Includes" value="Botox">Botox<br>
    <input type="checkbox" name="Procedure Includes" value="Fillers">Fillers<br>
</p>


<h2>Customized For:</h2>
<p>
    <input type="checkbox" name="Customized For" value="For oily and combination skin">For oily and combination skin<br>
    <input type="checkbox" name="Customized For" value="For normal, dry skin">For normal, dry skin<br>
    <input type="checkbox" name="Customized For" value="For sensitive skin">For sensitive skin<br>
    <input type="checkbox" name="Customized For" value="For dull�visibly ageing skin">For dull�visibly ageing skin<br>
</p>



<h2>Duration of this procedure (including the preparation time)</h2>
    <input type="radio" name="Procedure Duration" value="0-30 mins">0-30 mins<br>
    <input type="radio" name="Procedure Duration" value="30-60 mins">30-60 mins<br>
    <input type="radio" name="Procedure Duration" value="60-90 mins">60-90 mins<br>
    <input type="radio" name="Procedure Duration" value="More than 90 mins">More than 90 mins<br>





<h2>What are the known possible side effects?</h2>
<p>
<textarea id="Side Effects" name="Side Effects" rows="10" cols="70"></textarea>
</p>


<h2>Any other details or restrictions to add?</h2>
<p>
<textarea id="More Details" name="More Details" rows="10" cols="70"></textarea>
</p>

Во-вторых, у меня есть json в формате:

     {Procedure Includes: "Microdermabrasion",
 Customized For: "For oily and combination skin",
 Procedure Duration: "0-30 mins",
 Side Effects: "test",
 More Details: "test"}

Теперь мне нужно преобразовать эту строку в HTML-строку только для чтения с соответствующими значениями. Должны быть установлены соответствующие флажки, а также переключатели и текстовые области и т.д.

Я пробовал несколько циклов, но все они становятся слишком сложными. Существует ли стандартный подход для обработки этого?

1. Это недопустимый JSON (ни объект)! Кстати, что вы пробовали?

2. Если вы думаете, что это не из-за «», то предположите, что они присутствуют. На самом деле так и есть. Я скопировал вставленные из консоли. Я попытался использовать метод find в jquery, чтобы извлечь все входные данные и установить там соответствующие значения. Застрял при повторном построении всей строки. Затем я попытался выполнить цикл по строке, но идентификация элементов формы стала очень громоздкой!

3. html-строка только для чтения?

4. все поля формы, такие как input, textarea и т.д. В строке, Должны стать доступными только для чтения

Ответ №1:

Проанализируйте JSON, а затем выполните цикл по объекту, затем выполните цикл по каждому полю, имеющему несколько входных данных, и проверьте соответствующие входные данные, а затем поместите данные в поля только с одним <input> или <textarea> .

 var json; //Get the JSON somehow...
var info = JSON.parse(json); //...and parse it.

var procedureForm; //Our form
document.addEventListener("DOMContentLoaded", function() { //When the window loads...
    //Set procedureForm

    for (var name in info) { //Loop through the object

        //If the field with this name is a bunch of inputs...
        if (procedureForm[name].hasOwnProperty("length")) {
                //Loop through it...
                //If the input value matches, check the input
            }
        }

        //Otherwise...
        else {
            //Just put the data into the input/textarea 
            procedureForm[name].value = info[name];
        }
    }
});

Вот в чем проблема:http://jsfiddle.net/NobleMushtak/P3v9Y/1