0

(function() {
  var options = {
    "url": "http://localhost:3000/users",
    beforeSend: function() {
      console.log("Checking database!");
    },
    complete: function() {
      console.log("Data from database loaded!");

    },
    success: function(data) {
      if (data.length !== 0) {
        var parsedData = toJsObject(data);
        createTableSchema(parsedData);
      }
    },
    error: function() {
      var error_block = $("<div><h3 style='text-align: center'>Can't load data from database , can't connect to database!<h3/></div>");
      error_block.appendTo("#error").addClass("error");
    },
    async: true,
    method: 'GET'
  };
  $.ajax(options);
})();

function toJsObject(object) {
  return JSON.parse(JSON.stringify(object));
}

function createTableSchema(data) {
  var currentTable = $("#loginTable");
  var row = $("<tr></tr>").addClass("table-bordered");
  var td = $("<td></td>").addClass("text-center");

  for (var index in data) {
    var objLength = Object.keys(data[index]).length; //4
    var obj = data[index]; //get each object
    while (objLength > 0) {
      td.appendTo(row);
      objLength--;
    }
    row.appendTo(currentTable);
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="row">
    <table class="table table-responsive" id="loginTable">
      <tr class="table-bordered table-striped">
        <th class="text-center">NICKNAME</th>
        <th class="text-center">EMAIL</th>
        <th class="text-center">PASSWORD</th>
        <th>ID</th>
      </tr>
      <tr class="table-bordered">
        <td class="text-center">data</td>
        <td class="text-center">data</td>
        <td class="text-center">data</td>
        <td>data</td>
      </tr>
    </table>
  </div>
</div>
<div id="error"></div>

При проверки в браузере в Elements : Я получаю только одно присоединение , что не хватает в алгоритме в методе createTableSchema .. ?

введите сюда описание изображения

3
  • 1
    думаю тут проблема именно в том, что один раз создан объект и в него попытка записать постоянно.... а надо постоянно новые создавать.... то есть и $("<tr></tr>") и $("<td></td>") надо в циклы воткнуть 10 дек 2017 в 19:28
  • Вы мне пример кода можете дать как ответ ?
    – Mekudad
    10 дек 2017 в 19:32
  • Ну там в принципе ничего особенного. Я конечно написал. Но вроде и так ясно) 10 дек 2017 в 19:36

1 ответ 1

1

Думаю тут проблема именно в том, что один раз создан объект и в него попытка записать постоянно.... а надо постоянно новые создавать.... то есть и $("<tr></tr>") и $("<td></td>") надо поместить в соответствущие циклы

var currentTable = $("#loginTable");
 
    
for (var i = 0; i < 5; ++i) { // for (var index in data) {
    var row = $("<tr></tr>").addClass("table-bordered");
    var objLength = 4; // var objLength = Object.keys(data[index]).length; 
    //var obj = data[index]; //get each object
    while (objLength > 0) {
        var td = $("<td></td>").addClass("text-center");
        td.appendTo(row);
        objLength--;
    }
    
    row.appendTo(currentTable);
}
table tr td {
  border: 1px solid black;
  width: 20px;
  height: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-responsive" id="loginTable"></table>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.