Добавить данные JSON к последней строке смежного div (без Grid и Flexbox) - PullRequest
Новая
       17

Добавить данные JSON к последней строке смежного div (без Grid и Flexbox)

0 голосов
/ 11 марта 2019

У меня есть четыре divs, и я хочу сделать так, чтобы каждый элемент JSON добавлялся к следующему div справа от него, а не сразу под предыдущим элементом.

Вот изображение , которое лучше объясняет, чего я пытаюсь достичь.

Я рассматриваю возможность использования таблицы и строк для создания желаемого эффекта, но если есть более простой способ сделать это, пожалуйста, дайте мне знать. Есть мысли по этому поводу?

Когда я просматривал SO и Google для информации, я мог найти только сообщения о добавлении данных в div ... что отчасти правильно, но не совсем то, что я собираюсь. Если уже есть ТАКОЕ сообщение о том, что я пытаюсь сделать, тогда не стесняйтесь присылать ссылку в мою сторону. 

var testjson = {
  "d": {
    "results": [{
      "Title": "Training 1",
      "Category": "Enter Choice #1",
      "Topic": "Enter Choice #1",
      "Description": "My Test description",
      "TopTrainingCourse": true,
      "ID": 1,
      "Modified": "2019-03-05T20:13:46Z",
      "Created": "2019-03-05T20:13:36Z"
    }, {
      "Title": "Donec id dictum sem",
      "Category": "Enter Choice #1",
      "Topic": "Enter Choice #1",
      "Description": "Donec id dictum sem",
      "TopTrainingCourse": true,
      "ID": 10,
      "Modified": "2019-03-06T21:08:25Z",
      "Created": "2019-03-06T21:08:25Z"
    },
      "Title": "Mauris sagittis ligula",
      "Category": "Enter Choice #2",
      "Topic": "Enter Choice #2",
      "Description": "Mauris sagittis ligula",
      "TopTrainingCourse": true,
      "ID": 11,
      "Modified": "2019-03-06T21:08:35Z",
      "Created": "2019-03-06T21:08:35Z"
    }]
  }
}

function loadTopCourses() {
  let isTop = testjson.d.results
    .filter(x => x.TopTrainingCourse === true)
    .map(x => {
      return {
        "Category": x.Category,
        "Title": x.Title
      }
    })

  let showTopCats = isTop;
  for (var i = 0; i < showTopCats.length; i++) {
    $(".top-training-tb").append("<tr>" + showTopCats[i].Category + "</tr>")
  };

} // ------------------ loadTopCourses

loadTopCourses();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="top-training">
  <h2>Top Training Courses</h2>
  <div class="row">
    <table class="top-training-tb"></table>
  </div>
</div>
...