Как зациклить / отобразить всех авторов из json

Question

Сейчас я показываю только одного автора для каждого объекта из-за авторов [0]. Я не могу пройти через каждого человека. Но хотелось бы отобразить неограниченное количество авторов. Любые идеи будут очень полезны.

$(document).ready(function() {
  const url = "https://data.azgs.arizona.edu/api/v1/metadata";

  $('.destinations-form').on('submit', function(e) {
    e.preventDefault();
    let searchstring = $('input[type="text"]').val();
    let requestUrl = url + `?text=${searchstring}&title=${searchstring}`;

    $.ajax({
      type: 'GET',
      url: requestUrl,
      success: function(res) {
        let repo = res.data.map(item =>
          `<div class="result-entry">
            <p>Title: ${item.metadata.title}</p>
            <p>Authors: ${item.metadata.authors[0].person}</p>					
            <p>Series: ${item.metadata.series}</p>
            <p><a href="${item.links[0].href}"><button>Download</button></a>
          </div>`);

        $("#results").append(repo)
      }
    });
  });
});

#results {
  margin-top: 1em;
}

.result-entry {
  margin-bottom: 2em;
}

.result-entry p {
  margin: 0.25em;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="destinations-form" role="search">
  <div class="input-line">
    <input id="searchForm" type="text" class="form-input check-value" placeholder="Search Documents" />
    <button type="submit" class="form-submit btn btn-special">Search</button>
  </div>
</form>
<section>
  <div class="container">
    <div class="row">
      <div class="col-sm-12 col-xs-24">
        <div class="boat-box">
          <div id="results" action="search.html"></div>
        </div>
      </div>
    </div>
  </div>
</section>

Answer 1

Вам потребуется сопоставить авторов по имени и присоединиться к ним.

const formatAuthors = (authors) => {
  return authors.map(author => author.person).join(', ') || '<em>None</em>';
};

Пример

Редактировать: Я добавил прослушиватель щелчков для записей, чтобы предупредить их идентификатор коллекции. Я добавил идентификатор для каждого элемента, используя атрибут данных.

const formatAuthors = (authors) => {
  return authors.map(author => author.person).join(', ') || 'Anonymous';
};

$(() => {
  const url = "https://data.azgs.arizona.edu/api/v1/metadata";

  $('.destinations-form').on('submit', function(e) {
    e.preventDefault();
    let searchstring = $('input[type="text"]').val();
    let requestUrl = url + `?text=${searchstring}&title=${searchstring}`;

    $.ajax({
      type: 'GET',
      url: requestUrl,
      success: function(res) {
        let repo = res.data.map(item =>
          `<div class="res-entry" data-collection-id="${item.collection_id}">
            <div class="res-entry-title">${item.metadata.title}</div>
            <div class="res-entry-author">${formatAuthors(item.metadata.authors)}</div>			
            <div class="res-entry-series">${item.metadata.series}</div>
            <div class="res-entry-download">
              <a href="${item.links[0].href}"><button>Download</button>
            </div>
          </div>`);

        $("#results").empty().append(repo); // Empty previous...
      }
    });
  });
  
  $('.container').on('click', '.res-entry', e => {
    // Make a follow-on query with this ID...
    let collectionId = e.currentTarget.getAttribute('data-collection-id');
    alert(`Collection ID = ${collectionId}`);
  });
});

#results {
  margin-top: 1em;
}

.res-entry {
  border: thin solid grey;
  margin: 0.667em;
  padding: 0.5em;
}

.res-entry .res-entry-title {
  font-size: 1em;
  font-weight: bold;
  margin-bottom: 0.5em;
}

.res-entry .res-entry-author {
  font-size: 0.8em;
  font-style: italic;
  margin-bottom: 0.25em;
}

.res-entry .res-entry-author:before {
  content: 'By: ';
}

.res-entry .res-entry-series {
  font-size: 0.9em;
}

.res-entry .res-entry-download {
  margin-top: 0.5em;
}

.res-entry .res-entry-download a {
  display: block;
  text-align: right; /* If you want it on the right */
}

.res-entry .res-entry-download a button {
  border: thin solid grey;
  background: #FFF;
}

.res-entry .res-entry-download a button:hover {
  border: thin solid grey;
  background: #EE7;
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="destinations-form" role="search">
  <div class="input-line">
    <input id="searchForm" type="text" class="form-input check-value" placeholder="Search Documents" />
    <button type="submit" class="form-submit btn btn-special">Search</button>
  </div>
</form>
<section>
  <div class="container">
    <div class="row">
      <div class="col-sm-12 col-xs-24">
        <div class="boat-box">
          <div id="results" action="search.html"></div>
        </div>
      </div>
    </div>
  </div>
</section>

Answer 2

У вас есть массив [] объектов {}.

Поэтому сначала вы должны сопоставить массив объектов с массивом строк, используя .map, а затем объединить все строки с помощью '.join (",") ', например.

Я бы порекомендовал сначала сохранить результат где-нибудь в переменной и затем написать html, чтобы отделить логи c от пользовательского интерфейса.

$(document).ready(function() {
  const url = "https://data.azgs.arizona.edu/api/v1/metadata";

  $('.destinations-form').on('submit', function(e) {
    e.preventDefault();
    let searchstring = $('input[type="text"]').val();
    let requestUrl = url + `?text=${searchstring}&title=${searchstring}`;

    $.ajax({
      type: 'GET',
      url: requestUrl,
      success: function(res) {

        let repo = res.data.map(item =>
          `<div><br>
            ${'<p> Title: ' + item.metadata.title + '</p>'}
            ${'<p> Authors: ' + 
                item.metadata.authors.map(author => author.person).join(", ") +
              '</p>'}
            ${'<p> Series: ' + item.metadata.series + '</p>'}
            ${'<p> <a href = "'+ item.links[0].href + '"><button>Download</button></a>'}
          </div><br />`
        );

        $("#results").append(repo)

      }
    });
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="destinations-form" role="search">
  <div class="input-line">
    <input id="searchForm" type="text" class="form-input check-value" placeholder="Search Documents" />
    <button type="submit" class="form-submit btn btn-special">Search</button>
  </div>
</form>
<section>
  <div class="container">
    <div class="row">
      <div class="col-sm-12 col-xs-24">
        <div class="boat-box">
          <div id="results" action="search.html"></div>
        </div>
      </div>
    </div>
  </div>
</section>

Answer 3

$(document).ready(function() {
  const url = "https://data.azgs.arizona.edu/api/v1/metadata";

  $(".destinations-form").on("submit", function(e) {
    e.preventDefault();
    let searchstring = $('input[type="text"]').val();
    let requestUrl = url + `?text=${searchstring}&title=${searchstring}`;

    $.ajax({
      type: "GET",
      url: requestUrl,
      success: function(res) {
        let repo = res.data.map(item => {
          let authors = item.metadata.authors
            .map(author => author.person)
            .join(", ");
          return `<div><br>                         
              ${"<p> Title: " + item.metadata.title + "</p>"}
              ${"<p> Authors: " + authors + "</p>"}                 
              ${"<p> Series: " + item.metadata.series + "</p>"}
              ${'<p> <a href = "' +
                item.links[0].href +
                '"><button>Download</button></a>'}
            </div><br />`;
        });

        $("#results").append(repo);
      }
    });
  });
});

Answer 4

Я почти уверен, что синтаксис неправильный, так как я пишу это из моей головы, но вы поймете идею. Тот же принцип применяется, если вы хотите от l oop до item.links

$(document).ready(function() {
  const url = "https://data.azgs.arizona.edu/api/v1/metadata";

  $('.destinations-form').on('submit', function(e) {
    e.preventDefault();
    let searchstring = $('input[type="text"]').val();
    let requestUrl = url + `?text=${searchstring}&title=${searchstring}`;

    $.ajax({
      type: 'GET',
      url: requestUrl,
      success: function(res) {
        let repo = res.data.map(item =>
          `<div><br>                            
            ${'<p> Title: ' + item.metadata.title + '</p>'}
            ${'<p> Authors: </p>'}  
            item.metadata.authors.map(author) => { //here you map all authors
               ${'<p>  ' + author.person + '</p>'}
            })          
            ${'<p> Series: ' + item.metadata.series + '</p>'}
            ${'<p> <a href = "'+ item.links[0].href + '"><button>Download</button></a>'}
          </div><br />`);
        $("#results").append(repo)
      }
    });
  });
});

Answer 5

item.metadata.author.map(author => author.person)

Вы также можете поместить своих авторов в неупорядоченный список, например, так:

const authorsListItems = item.metadata.author.map(a => {
 return $('<li>').text(a);
});

const authorsList = $('<ul>').append(authorsListItems);

И просто добавьте это authorsList к своему абзацу с авторами.

Answer 6

Вы можете использовать функцию карты вместо item.metadata.authors [0] .person, который вы можете сделать item.metadata.authors.map (author => {author.person})