Как отобразить данные c из JSON, используя JQuery?

Question

Наша компания хочет разместить объявления о вакансиях, которые мы рекламируем, на большом веб-сайте, где можно найти работу Они дают нам JSON для отображения вакансий нашей компании на нашем собственном веб-сайте.

Я хочу показать некоторые ключевые данные в обзоре, и если вы нажмете ссылку, вы будете перенаправлены на страницу, где показаны подробные данные.

JSON выглядит так:

[
{
"Position": "Developer",
"Date": "now",
"Description": "Lorem ipsum dolor sit amet"
}
{
"Position": "Secretary",
"Date": "next month",
"Description": "Lorem ipsum dolor sit amet"
}
{
"Title": "Postman",
"Date": "now",
"Description": "Lorem ipsum dolor sit amet"
}
]

Мой HTML файл для страницы обзора выглядит так:

<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
$.getJSON("test.json", function(json, status) {
    if (status === "error") {
        $("#textNoData").html("Error: " + xhr.status + ": " + xhr.statusText);
        return;
    }
    var tr;
    for (var i = 0; i < json.length; i++) {
        tr = $('<tr/>');
        tr.append("<h5>" + json[i].Title + "</h5>");
        tr.append("<strong>Date:</strong> " + json[i].Date + "<p>&nbsp;</p>");
        $('table').append(tr);
    }
});
</script>
 <div id="div-for-json"></div>
 <table>
     <tr>
     </tr>
 </table>

Как вы видно, на странице обзора должны отображаться заголовок и дата. Если вы щелкнете по Заголовку (где-то рядом с «h5» должно быть «a href =»), вы должны будете перенаправить на страницу, где отображаются Заголовок, Дата и Описание указанного c предложения о работе.

Я знаю, что если я установлю json [0] .Description, мне будут показаны первые данные для Description. Но как я могу установить гиперссылку и код, чтобы на странице сведений отображались данные для задания 1, если я нажимаю на задание 1, данные для задания 2, если я нажимаю на задание 2 ...? В противном случае мне пришлось бы создавать HTML файлов для примерно 200 заданий (json [0], json [1]…), и это не может быть так, как JSON предназначено.

У меня нет Идея как это решить ...

Answer 1

Это скорее совет, чем реальный ответ на оригинальный вопрос.

В зависимости от того, как построен ваш веб-сайт, вы должны выбрать поведение, подобное SPA (одностраничное приложение), для вашего подробного просматривать, а не другую полную веб-страницу.

Это предотвратит загрузку полной страницы для отображения только нескольких данных. Таким образом, нажатие на строку таблицы вызовет slideToggle() (jquery встроенную функцию ), которая будет отображать дополнительный контент. Как то так:

const json = [{
    "Title": "Developer",
    "Date": "now",
    "Description": "Lorem ipsum dolor sit amet"
  },
  {
    "Title": "Secretary",
    "Date": "next month",
    "Description": "Lorem ipsum dolor sit amet"
  },
  {
    "Title": "Postman",
    "Date": "now",
    "Description": "Lorem ipsum dolor sit amet"
  }
];

var tr;
for (var i = 0; i < json.length; i++) {
  tr = $('<tr/>');
  td = $('<td/>');
  td.append("<h5>" + json[i].Title + "</h5>");
  td.append("<p><strong>Date:</strong> " + json[i].Date + "&nbsp;</p>");
  td.append("<div style='display:none'><strong>Description:</strong>" + json[i].Description + "</div>");
  $(tr).append(td);
  $('#table').append(tr);
}
$("tr").on("click", function() {
  $(this).find("div").slideToggle();
});

#table {
  width: 100%;
}

#table tr {
  background: #ccc;
  cursor: pointer;
  padding: 10px;
}

#table tr td {
  padding: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<table id="table"></table>

Кстати, будьте осторожны, ваш json не отформатирован должным образом: пропущены запятые между каждым объектом и title / позиция смешанная.

Answer 2

Прежде всего, ваши JSON просто дают вам достаточно (может и не быть) информации для создания списка, например карточек, для отображения их на странице обзора. Если вы go переходите на другую страницу, например страницу с подробностями, вам нужно больше информации для отображения. И вы не создаете ~ 200 HTML страницу, только 1 шаблон, но разные детали.