2015-05-02 5 views
1

Я пытаюсь получить изображение из статьи в Википедии. У меня есть заголовок статьи, но мне кажется, что мне нужно знать страницу, чтобы получить доступ к миниатюре. Как получить страницу из названия?Получить статью Википедии с заголовка

Мой JavaScript код:

$.getJSON("http://en.wikipedia.org/w/api.php?action=query&titles=" + article + "&prop=pageimages&format=json&pithumbsize=350", function (data) { 
    imageURL = data.query.pages[/* pageid */].thumbnail.source; 
}); 

Вот что я синтаксический анализ (пример для статьи = "Автомобиль"):

{"query":{"pages":{"13673345":{"pageid":13673345,"ns":0,"title":"Car","thumbnail":{"source":"http://upload.wikimedia.org/wikipedia/commons/thumb/1/1e/Benz-velo.jpg/100px-Benz-velo.jpg","width":100,"height":80},"pageimage":"Benz-velo.jpg"}}}} 

^Похоже, я в первую очередь необходимо знать, что это 13673345 индекс.

+0

не изображение прямо там? удалить «большой палец» и часть после истинного имени файла, и это ваш образ: https://upload.wikimedia.org/wikipedia/commons/1/1e/Benz-velo.jpg –

+0

Но как я могу получить исходный код без этого : 'data.query.pages [/ * pageid * /]. thumbnail.source'? – Benck

+0

Просто перечислите объект, пока не найдете запись с ожидаемым заголовком (на самом деле там должен быть только один) – Bergi

ответ

2

ОП спрашивает, как «получить доступ к миниатюре», то есть URL-адрес в возвращаемых данных. Он не спрашивал, как получить доступ к полному изображению за миниатюрой ... что-то другое.

Проблема с OP заключается в том, что данные привязаны к идентификатору страницы. Фактически, запрос может вернуть более одной статьи, и в этом случае будет несколько идентификаторов страниц и миниатюр.

Следующий запрос возвращает данные, используемые в фрагменте кода:

http://en.wikipedia.org/w/api.php?action=query&titles=Stack_Overflow&prop=pageimages&format=json&pithumbsize=350

И OP может извлечь идентификаторы страниц, используя этот код:

var pageid = []; 
for(var id in data.query.pages) { 
    pageid.push(id); 
} 

Выполните фрагмент кода ниже теста ,

<html> 
 
<body> 
 
    
 
<img id="thumbnail"/> 
 
    
 
<script type="text/javascript"> 
 
    
 
var data = { 
 
     "query": 
 
     { 
 
     "normalized": [ 
 
     { 
 
      "from": "Stack_Overflow", 
 
      "to": "Stack Overflow" 
 
     }], 
 
     "pages": 
 
     { 
 
      "21721040": 
 
      { 
 
      "pageid": 21721040, 
 
      "ns": 0, 
 
      "title": "Stack Overflow", 
 
      "thumbnail": 
 
      { 
 
       "source": "http://upload.wikimedia.org/wikipedia/commons/thumb/6/6a/Stack_Overflow_homepage.png/350px-Stack_Overflow_homepage.png", 
 
       "width": 350, 
 
       "height": 185 
 
      }, 
 
      "pageimage": "Stack_Overflow_homepage.png" 
 
      } 
 
     } 
 
     } 
 
    }; 
 
\t 
 

 
    
 
    // get the page IDs 
 
\t var pageid = []; 
 
\t for(var id in data.query.pages) { 
 
\t \t pageid.push(id); 
 
\t } 
 
\t 
 
    // display the thumbnail using a page ID 
 
    document.getElementById('thumbnail').src = data.query.pages[ pageid[0] ].thumbnail.source; 
 
    
 
    </script> 
 
    
 
    </body> 
 
    </html>

+0

for-in считается довольно опасным шаблоном (потому что вы не гарантировали «безопасные» имена свойств). Вместо этого ES5 имеет 'Object.keys()', чтобы безопасно получить набор имен свойств для любого объекта. –

0

Просто построить свой объект JSON с JSON.parse так у вас есть объект, который выглядит как:

var response = { 
    query: { 
    pages: { 
     "13673345":{ 
     pageid: 13673345, 
     ns: 0, 
     title: "Car", 
     thumbnail: { 
      source: "http://upload.wikimedia.org/wikipedia/commons/thumb/1/1e/Benz-velo.jpg/100px-Benz-velo.jpg", 
      width: 100, 
      height: 80 
     }, 
     pageimage: "Benz-velo.jpg" 
     } 
    } 
    } 
}; 

И тогда вы можете ясно видеть вам не нужно PageId в малейшей степени, вам просто нужно обработать правильный объект "pages".

В этом случае есть только один, но даже если бы несколько, просто пробежать Object.keys для response.query.pages объекта:

var pages = response.query.pages; 
var propertyNames = Object.keys(pages); 
propertyNames.forEach(function(propertyName) { 
    var page = pages[propertyName]; 
    var thumbnail = page.thumbnail.src; 
    var imgURL = thumbnail.replace("/thumb/",'').replace(/\.(jpg|png).*/,".$1"); 
    doSomethingWith(imgURL); 
}); 

(обратите внимание на расширение файла регулярное выражение, которое мы делаем, потому что, кто говорит, что все изображения jpg? Лучше выбрать jpg и png, так как это два преобладающих формата изображения в Интернете)

+0

Я получаю TypeError для строки imgURL: '[Error] TypeError: undefined не является объектом (оценка« thumbnail » .replace ') '. В чем проблема? – Benck

+1

это будет иметь смысл. Не просто скопируйте вставку, чтобы убедиться, что у меня нет опечаток. Вместо того, чтобы говорить, что есть ошибка, вы должны были сказать: «Эй, JSON использует« источник », а не' src'. SO отлично подходит для получения ответов, но всегда следите за тем, чтобы люди, предлагающие код, не печатали ошибки;) –

+0

@Benck. В приведенном выше коде возникает небольшая ошибка, вызывающая ошибку.Изменить "page.thumbnail.src;" на "page.thumbnail.source;" и он будет работать. Помимо этого, Майк К обеспечивает надежный ответ на ваш вопрос. – Roberto

Смежные вопросы