Како приказати В3Ц спецификације података користећи свој Веб АПИ

Награда Емми® В3Ц је међународна организација за стандарде за Ворлд Виде Веб. Ствара нове веб стандарде и константно их ревидира како би били конзистентни и релевантни широм свијета.

Прегледници и веб-локације постали су стандардизирани у већој мјери с временом, што веб-локацијама омогућује да се приказују и раде једнолично у свим различитим прегледницима. Један од најкориснијих ресурса који су јавно доступни је документација В3Ц спецификације на в3ц.орг.

Недавно је В3Ц учинио своје податке доступним путем Веб АПИ-ја, чија је страница пројекта у Гитхубу. Увод овог АПИ-ја са његове странице пројекта је следећи:

“Као одговор на захтев програмера у нашој заједници који желе да комуницирају са подацима В3Ц-а, В3Ц Системс Теам је развио Веб АПИ. Кроз њега стављамо на располагање податке о спецификацијама, групама, организацијама и корисницима.”

У данашњем посту ћемо видети како дохватити податке спецификације преко В3Ц АПИ-ја. Наћи ћете различите захтеве које можете да постављате да бисте преузели податке о спецификацији, а други у хттпс://апи.в3.орг/доц, а такође има и сандбок за сваки захтев за тестирање АПИ-ја, али ће вам требати АПИ кључ.

Хајде да прво погледамо како добити АПИ кључ.

1. Пријавите се на свој В3Ц налог или га направите.
2. Онда иди Управљање АПИ кључевима на страници профила.
3. Кликните Нови АПИ кључ и дајте му име за генерисање кључа.
4. Онда, ако желите, можете да га копирате у пасус апи кеи на почетку веб странице хттпс://апи.в3.орг/доц за тестирање АПИ-ја у сандбоку.

За овај пост ћемо погледати захтев који користи схортнамес да бисте приказали УРЛ спецификације, опис и статус документа. Захтев изгледа овако:

хттпс://апи.в3.орг/Специфицатионс/схортнаме?апикеи=апикеи&_формат=јсон 

На пример, захтев за ХТМЛ5 спецификацију ће бити овакав;

хттпс://апи.в3.орг/Специфицатионс/хтмл5?апикеи=апикеи&_формат=јсон 

Сада ћемо се фокусирати на ХТМЛ који ћемо користити да прикажемо податке преузете кроз АПИ. За ово сам одлучио да користим ХТМЛ шаблон. ХТМЛ предлошци се користе за држање ХТМЛ кода који се рашчлањује, али се не приказује док се не додају на страницу помоћу ЈаваСцрипта.

 
В3Ц СПЕЦС
 
  

Шаблон је спреман. Сада, на ЈаваСцрипт који ће направити ХТТП захтев и приказати ЈСОН податке у ХТМЛ-у. Ево скупа глобалних променљивих које ћемо почети са:

вар схортнамес = ['хтмл5', 'селектор4', 'статус батерије', 'фуллсцреен'], кмлхттп = нови КСМЛХттпРекуест (), в3цСпецсЕле = доцумент.куериСелецтор ('# в3цСпецс'), темплатеЕле = доцумент.куериСелецтор ('Предложак '); 

схортнамес је низ од схортнамес спецификација које желимо да прикажемо на нашој веб страници; ако желите да пронађете кратко име Спецификације погледајте његов В3Ц УРЛ и моћи ћете да га видите на крају.

Међутим, није загарантовано да ћете моћи да добијете све Спецификације попут ове; не постоји коначан списак схортнамес и спецификације које су доступне преко АПИ-ја.

Лооп кроз схортнамес и поставите ХТТП захтев за сваки од њих и преузмите одговор.

за (вар и = 0; и 
Тхе респонсеТект је ЈСОН стринг и мора се анализирати да би се добио ЈСОН објект. дисплаиСпец је функција која ће користити ЈСОН податке и приказати их у ХТМЛ-у.
 
У наставку се налази пример текста ЈСОН одговора за ХТМЛ5 спецификацију и након кода за дисплаиСпец. 
 
 
фунцтион дисплаиСпец (јсон) иф ('садржај' у темплатеЕле) / * добијам садржај шаблона * / темплатеЕлеЦонтент = темплатеЕле.цонтент; / * додаје спец. наслов х2 заглављу * / в3цСпецХеадер = темплатеЕлеЦонтент.куериСелецтор ('. в3цСпецХеадер'); в3цСпецХеадер.тектЦонтент = јсон.титле; / * додајте спец. УРЛ на линк * / в3цСпецЛинк = темплатеЕлеЦонтент.куериСелецтор ('. в3цСпецЛинк'); в3цСпецЛинк.тектЦонтент = јсон.схортлинк; в3цСпецЛинк.хреф = јсон.схортлинк; / * додај спец десцриптион * / в3цСпецДетаил = темплатеЕлеЦонтент.куериСелецтор ('.в3цДесцриптион'); в3цСпецДетаил.иннерХТМЛ = јсон.десцриптион; / * додавање статуса спецификације и бојење на основу његове вредности * / В3цСпецЛатестВерСтатус = темплатеЕлеЦонтент.куериСелецтор ('марк'); вар статус = јсон._линкс ["латест-версион"]. В3цСпецЛатестВерСтатус.тектЦонтент = статус; свитцх (статус) цасе 'Препорука': В3цСпецЛатестВерСтатус.цлассНаме = "препорука"; пауза; цасе 'Воркинг Драфт': В3цСпецЛатестВерСтатус.цлассНаме = 'нацрт'; пауза; цасе 'Ретиред': В3цСпецЛатестВерСтатус.цлассНаме = 'повучен'; пауза; цасе 'Цандидате Рецоммендатион': В3цСпецЛатестВерСтатус.цлассНаме = 'кандидат за препоруку'; пауза;  / * додајте копију садржаја Предлога у главни див * / в3цСпецсЕле.аппендЦхилд (доцумент.импортНоде (темплатеЕлеЦонтент, труе));  елсе / * додајте ЈС код за креирање елемената појединачно * / 
 
ако ('садржај' у темплатеЕле) је да проверите да ли ХТМЛ шаблон подржава претраживач, ако није, креирајте све ХТМЛ елементе у самом ЈС-у. А када постоји подршка, попуните ХТМЛ елементе који се налазе у садржају шаблона одговарајућим подацима из ЈСОН-а и на крају, додајте копију садржаја шаблона на главни # в3цСпецс див.
 
То је то. Са мало ЦСС стилова, излаз изгледа овако: