Настройка группы радиостанций от json

Question

У меня есть 2 группы радио в модальной форме. Мне сложно определить, как установить значение для каждой группы из строки json. Последние 2 значения в json-строке «роль» и «активирован». Активировать - 1 для Да или 0. Роль - это 1, 2 или 3 для администратора, персонала или пользователя. Я петлю через строку json и присваиваю значения именам полей, так как они все одинаковы в html.

Мой HTML является:

<div class="form-field bt-space10"> 
    <div class="clear"> 
    <h4 class="fl-space2 ln-22 size-120" style="color:#777777; font-size: 12px; font-weight: normal;">Authorization Role: </h4> 

    <div class="form-radio-item clear fl-space2"> 
     <input type="radio" rel="radiogroup" name="role" id="Admin" value="1" class="radio fl-space" /> <label for="Admin" class="fl">Admin</label> 
    </div> 

    <div class="form-radio-item clear fl-space2"> 
     <input type="radio" rel="radiogroup" name="role" id="Staff" value="2" class="radio fl-space" /> <label for="Staff" class="fl">Staff</label> 
    </div> 

    <div class="form-radio-item clear fl-space2"> 
     <input type="radio" rel="radiogroup" name="role" id="User" value="3" class="radio fl-space" /> <label for="User" class="fl">User</label> 
    </div> 
    </div> 
    <div class="clear"> 
    <h4 class="fl-space2 ln-22 size-120" style="color:#777777; font-size: 12px; font-weight: normal;">Account Activated: </h4> 

    <div class="form-radio-item clear fl-space2"> 
     <input type="radio" rel="radiogroup1" name="activated" id="Yes" class="radio fl-space" /> <label for="radio4" class="fl">Yes</label> 
    </div> 

    <div class="form-radio-item clear fl-space2"> 
     <input type="radio" rel="radiogroup1" name="activated" id="No" class="radio fl-space" /> <label for="radio5" class="fl">No</label> 
    </div> 
    </div> 

</div><!-- /.form-field--> 

Моя входящая строка JSON (если это необходимо, я мог бы изменить возвращение к "роли": "Администратор", и т.д .. и "активированном": "Да", и т.д. .):

{"op": "UPDATE", "id": "7","email": "joe@public.com","name": "Joe Public","address": "123 Any Street","city": "AnyTown","zipcode": "12345","state": "PA","contact_name": "","phone": "8885551212","fax": "","company_branch": "","company_name": "","activated": "1","role": "1" } 

код, я использую для заполнения других полей в форме:

function editUser(rowID, callback) { 
    var ret; 
    jQuery.fancybox({ 
     modal : true, 
     padding : 0, 
     cache : false, 
     overlayOpacity : 0.5, 
     href : "userEdit.html", 
     onComplete : function() { 
      InitProfileMenu() 
      var tsTimeStamp= new Date().getTime(); 
      $.getJSON("includes/GetUserDetails.php?tsTimeStamp&id=" + rowID,  
       function(data) { 
        $.each(data, function(i, item) { 
        $('#' + i).val(item); 
       }); 
      }) 
      jQuery("#editUser_cancel").click(function() { 
       ret = false; 
       jQuery.fancybox.close(); 
      }) 
      jQuery("#editUser_ok").click(function() { 
       jQuery.fancybox.close(); 
       ret = true; 
      }) 
     }, 

Я гугле это до смерти, и не найдя olution. У кого-нибудь есть идеи? или ресурс, на который они могут указать мне, что поможет понять это?

Спасибо! Dennis

Answer 1

Это трудно разрешить общим образом для всех значений в вашей строке JSON, потому что атрибуты html не похожи друг на друга. Я предлагаю два изменения:

1. Добавить атрибут значения для радио входов, названных «активированных»

2. Для каждого элемента данных JSON: проверить тип формы ввода, если радио, использовать имя и значение атрибут селекторов для проверки правильности.

   var myJsonData = { 
       "op": "UPDATE", 
       "id": "7", 
       "email": "joe@public.com", 
       "name": "Dennis Megarry", 
       "address": "123 Any Street", 
       "city": "AnyTown", 
       "zipcode": "12345", 
       "state": "PA", 
       "contact_name": "", 
       "phone": "8885551212", 
       "fax": "", 
       "company_branch": "", 
       "company_name": "", 
       "activated": "1", 
       "role": "1" 
   }; 
   
   function updateFormWithJson(dataObj) { 
       $.each(dataObj,function(i,item){ 
        if($('input[name="' + i + '"]:first').attr("type") == "radio"){ 
         $('input[name="' + i + '"][value="' + item + '"]').attr("checked","checked"); 
        } 
       }); 
   }; 
   
   $(document).ready(function() { 
       updateFormWithJson(myJsonData); 
   }); 
   
   <div class="form-field bt-space10"> 
       <div class="clear"> 
       <h4 class="fl-space2 ln-22 size-120" style="color:#777777; font-size: 12px; font-weight: normal;">Authorization Role: </h4> 
   
       <div class="form-radio-item clear fl-space2"> 
        <input type="radio" rel="radiogroup" name="role" id="Admin" value="1" class="radio fl-space" /> <label for="Admin" class="fl">Admin</label> 
       </div> 
   
       <div class="form-radio-item clear fl-space2"> 
        <input type="radio" rel="radiogroup" name="role" id="Staff" value="2" class="radio fl-space" /> <label for="Staff" class="fl">Staff</label> 
       </div> 
   
       <div class="form-radio-item clear fl-space2"> 
        <input type="radio" rel="radiogroup" name="role" id="User" value="3" class="radio fl-space" /> <label for="User" class="fl">User</label> 
       </div> 
       </div> 
       <div class="clear"> 
       <h4 class="fl-space2 ln-22 size-120" style="color:#777777; font-size: 12px; font-weight: normal;">Account Activated: </h4> 
   
       <div class="form-radio-item clear fl-space2"> 
        <input type="radio" rel="radiogroup1" name="activated" id="Yes" value="1" class="radio fl-space" /> <label for="radio4" class="fl">Yes</label> 
       </div> 
   
       <div class="form-radio-item clear fl-space2"> 
        <input type="radio" rel="radiogroup1" name="activated" id="No" value="0" class="radio fl-space" /> <label for="radio5" class="fl">No</label> 
       </div> 
   </div>