Начало работы с стилизацией результатов поиска JSON из DocumentCloud

Question

Я ищу, чтобы создать систему, которая стилизует результаты поиска из DocumentCloud (и позволяет мне ссылаться на данный документ).

Я знаю, что могу запросить DocumentCloud и вернуть результаты JSON, используя строку поиска, подобную этой:

https://www.documentcloud.org/api/search.json?q=obama

Я не знаю как:

1. Возьмите результаты поиска и разместите их на своей странице.
2. Стиль данных, как только у меня есть на моей странице

Я просто хотел бы узнать, с чего начать, у меня есть опыт работы с HTML и CSS, но я никогда раньше не работал с JSON.

Здесь больше информации, но я просто не знаю, с чего начать: https://www.documentcloud.org/help/api

Answer 1

Похоже, вы не очень знакомы с JavaScript, правильно? JSON означает JavaScript Ojbect Notation, так что для работы с ним вам придется немного погрузиться. Я настоятельно рекомендую изучить использование фреймворка / библиотеки JavaScript, а именно jQuery, для обработки тяжелой работы. (Существуют и другие достойные библиотеки, но jQuery на сегодняшний день является наиболее популярным и очень дружественным, используя CSS-подобные селекторы для манипулирования объектной моделью документа).

посмотрите это руководство по jQuery: как работает jQuery

Вот пример использования jsonp jQuery для получения удаленных результатов и их использования на странице: http://www.ibm.com/developerworks/library/wa-aj-jsonp1/

Вы можете получить код в файле javascript или тег скрипта (по ссылке на библиотеку jQuery), который выглядит следующим образом:

$(document).ready(function () {

    $.getJSON('https://www.documentcloud.org/api/search.json?q=obama&callback=?', null, function (results) {
            // this would append whatever the json returns for 'total' 
            // inside an element on your page with an id of 'resultsCount':
            $('#restulsCount').append(data.total); 
          });   

});

В результате дополнительный текст и разметка могут быть добавлены к элементам, которые у вас уже есть на вашей странице, в любой нужной форме / позиции, и к ним будут применяться обычные правила CSS из любого блока стиля или файла CSS, связанного с вашей страницей.

Удачи.