Заполнить поля данными

234

06 октября 2017, 19:22

Доброго времени суток, подскажите пожалуйста, работаю с массивом data.vk.apps_connect в котором объекты с данными. В зависимости от кол-ва объектов создаю для каждого отдельный блок с полями, которые заполняются данными из этого массива. Проблема в том что сейчас я просто перезаписываю во все блоки одни и те же данные из последнего объекта. Как правильно обойти все блоки и в каждый записывать данные из нового объекта? Так я обхожу исходный массив

for(let i = 0; i <= data.vk.apps_connect.length - 1; i++){
    appId = data.vk.apps_connect[i].app_id;
    access_token = data.vk.apps_connect[i].access_token;
    service_key = data.vk.apps_connect[i].service_key;
    secure_key = data.vk.apps_connect[i].secure_key;
    app_access_token = data.vk.apps_connect[i].access_token;
    //Для каждого объекта создаётся блок с классом .panel.panel-default
    //в котором инпуты для данных
    socGroups = $('.soc-app.vk .panel.panel-default');
    //в этом месте я записыю данные в инпуты
    socGroups.find('.app_id').html(appId);
    socGroups.find('input[name="app_id"]').val(appId);
    socGroups.find('input[name="app_access_token"]').val(app_access_token);
    socGroups.find('input[name="secure_key"]').val(secure_key);
    socGroups.find('input[name="service_key"]').val(service_key);
}

P.S. данные достаются нормально, проблема с обходом блоков и перезаписью содержимого тем что было в последнем объекте. Заранее спасибо

Answer 1

Как-то так получилось сделать, но это при условии что хоть 1н блок <div class="clear panel panel-default active"> у нас есть с самого начала, для первой итерации цикла заполняем его, для последующих, клонируем первый блок, вставляем в контейнер .app и заполняем его данные текущими данными :

$(document).ready(function() { 
  var appDiv = $('.app'); 
  var panel = $('.panel.panel-default'); 
 
  for (var i = 0; i < data.vk.apps_connect.length; i++) { 
    var tmpContainer; 
    if (i == 0) tmpContainer = panel; 
    else { 
      tmpContainer = panel.clone(true); 
      appDiv.append(tmpContainer); 
    } 
 
    var appId = data.vk.apps_connect[i].app_id; 
    var access_token = data.vk.apps_connect[i].access_token; 
    var service_key = data.vk.apps_connect[i].service_key; 
    var secure_key = data.vk.apps_connect[i].secure_key; 
    var app_access_token = data.vk.apps_connect[i].access_token; 
 
    tmpContainer.find('.app_id').html(appId); 
    tmpContainer.find('input[name="app_id"]').val(appId); 
    tmpContainer.find('input[name="app_access_token"]').val(app_access_token); 
    tmpContainer.find('input[name="secure_key"]').val(secure_key); 
    tmpContainer.find('input[name="service_key"]').val(service_key); 
  } 
}); 
 
var data = { 
  vk: { 
    apps_connect: [{ 
        app_id: 1, 
        access_token: 'adasda', 
        service_key: '1233', 
        secure_key: 'sk' 
      }, 
      { 
        app_id: 2, 
        access_token: 'qqq', 
        service_key: 'we33', 
        secure_key: 'asdsddddd' 
      }, 
      { 
        app_id: 3, 
        access_token: 'www', 
        service_key: '333', 
        secure_key: '3333' 
      }, 
      { 
        app_id: 4, 
        access_token: '4444', 
        service_key: '4444', 
        secure_key: '4444' 
      }, 
      { 
        app_id: 5, 
        access_token: '555', 
        service_key: '5555', 
        secure_key: '5555' 
      } 
    ] 
  } 
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> 
<div class="app"> 
  <div class="clear panel panel-default active"> 
    <div class="panel-heading"> 
      <p> 
        <span>ID приложения: <span class="app_id">-</span></span> 
      </p> 
    </div> 
    <div class="panel-body"> 
      <div class="col-sm-12"> 
        <h5>ID приложения</h5> 
        <div class="inp-control"> 
          <input placeholder="ID приложения" type="text" name="app_id" data-id="app_id" class="form-control"> 
        </div> 
      </div> 
      <div class="col-sm-12"> 
        <h5>Защищённый ключ</h5> 
        <div class="inp-control"> 
          <input placeholder="Защищённый ключ" type="text" name="secure_key" data-id="secure_key" class="form-control"> 
        </div> 
        <h5>Сервисный ключ доступа</h5> 
        <div class="inp-control"> 
          <input type="text" placeholder="Сервисный ключ доступа" name="service_key" data-id="service_key" class="form-control"> 
        </div> 
        <h5 class="key"><span>Ключ доступа</span></h5><a target="_blank" href="#" class="keyForAcess">нажмите для получения ключа доступа</a> 
        <div class="inp-control"> 
          <input placeholder="Ключ доступа" type="text" name="app_access_token" data-id="app_access_token" class="form-control"> 
          <input type="hidden" name="app_userEmail"> 
          <input type="hidden" name="app_userId"> 
        </div> 
        <div class="col-sm-12"> 
          <button type="button" name="saveInpApp" class="btn btn-success mt1">Сохранить</button> 
        </div> 
      </div> 
    </div> 
  </div> 
</div>