[英]Fetch specific data from YQL JSON using JavaScript
我目前正在與Ionic Cordova和AngularJS進行一個小項目。 在這個項目中,我想使用YQL從網站上獲取當前信息。 我的$ http.jsonp請求看起來像這樣:
*"https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20html%20where%20url%3D'http%3A%2F%2Fwww.imensa.de%2Fhildesheim%2Fmensa-uni%2Findex.html'%20and%20xpath%3D'%2F%2Fdiv%5B%40class%3D%22primary%20meal%22%5D'&format=json&callback=JSON_CALLBACK"*
轉換為以下YQL控制台查詢:
*select * from html where url='http://www.imensa.de/hildesheim/mensa-uni/index.html' and xpath='//div[@class="primary meal"]'*
我現在收到的JSON數據結構對我來說有點混亂,因為它看起來不像直接的JSON。
{
"query": {
"count": 8,
"created": "2015-09-03T06:27:03Z",
"lang": "en-US",
"results": {
"div": [
{
"class": "primary meal",
"id": "m2267999",
"div": {
"class": "description",
"p": "Gebackener Seelachs mit Remoulade"
},
"p": {
"class": "price",
"span": {
"title": "Preis für Studierende",
"content": "2,10 €"
}
},
"ul": {
"class": "attributes",
"li": [
"Fisch",
{
"class": "group",
"content": "Zusatz"
},
"Farbstoff",
"Süßungsmittel",
{
"class": "group",
"content": "Allergen"
},
"Ei",
"Gluten",
"Senf",
{
"class": "group",
"content": "Zuletzt"
},
"23.07.2015"
]
}
},
{
"class": "primary meal",
"id": "m3472645",
"div": {
"class": "description",
"p": "Kartoffel-Erbseneintopf in Sojarahm mit Koriander und Minze"
},
"p": {
"class": "price",
"span": {
"title": "Preis für Studierende",
"content": "2,00 €"
}
},
"ul": {
"class": "attributes",
"li": [
"Vegan",
{
"class": "group",
"content": "Zusatz"
},
"Antioxidationsmittel",
{
"class": "group",
"content": "Allergen"
},
"Gluten",
"Soja",
{
"class": "group",
"content": "Zuletzt"
},
"23.07.2015"
]
}
},
{
"class": "primary meal",
"id": "m1258254",
"div": {
"class": "description",
"p": "Hähnchen Piccata mit Tomatensauce"
},
"p": {
"class": "price",
"span": {
"title": "Preis für Studierende",
"content": "2,10 €"
}
},
"ul": {
"class": "attributes",
"li": [
"Geflügel",
{
"class": "group",
"content": "Zusatz"
},
"Farbstoff",
"Geschwefelt",
{
"class": "group",
"content": "Allergen"
},
"Ei",
"Gluten",
"Milch",
{
"class": "group",
"content": "Zuletzt"
},
"23.07.2015"
]
}
},
{
"class": "primary meal",
"id": "m6583065",
"div": {
"class": "description",
"p": "Kräuterkartoffeln"
},
"p": {
"class": "price",
"span": {
"title": "Preis für Studierende",
"content": "0,40 €"
}
},
"ul": {
"class": "attributes",
"li": [
"Vegan",
{
"class": "group",
"content": "Zuletzt"
},
"25.08.2015"
]
}
},
{
"class": "primary meal",
"id": "m3478290",
"div": {
"class": "description",
"p": "Penne Rigate"
},
"p": {
"class": "price",
"span": {
"title": "Preis für Studierende",
"content": "0,40 €"
}
},
"ul": {
"class": "attributes",
"li": [
"Vegan",
{
"class": "group",
"content": "Allergen"
},
"Gluten",
{
"class": "group",
"content": "Zuletzt"
},
"23.07.2015"
]
}
},
{
"class": "primary meal",
"id": "m4797363",
"div": {
"class": "description",
"p": "Pfannengemüse"
},
"p": {
"class": "price",
"span": {
"title": "Preis für Studierende",
"content": "0,50 €"
}
},
"ul": {
"class": "attributes",
"li": [
"Vegan",
{
"class": "group",
"content": "Zuletzt"
},
"23.07.2015"
]
}
},
{
"class": "primary meal",
"id": "m2931855",
"div": {
"class": "description",
"p": "Creme-Dessert Erdbeer"
},
"p": {
"class": "price",
"span": {
"title": "Preis für Studierende",
"content": "0,50 €"
}
},
"ul": {
"class": "attributes",
"li": [
{
"class": "group",
"content": "Allergen"
},
"Milch",
{
"class": "group",
"content": "Zuletzt"
},
"23.07.2015"
]
}
},
{
"class": "primary meal",
"id": "m943602",
"div": {
"class": "description",
"p": "Kirschquark"
},
"p": {
"class": "price",
"span": {
"title": "Preis für Studierende",
"content": "0,50 €"
}
},
"ul": {
"class": "attributes",
"li": [
"Vegetarisch",
{
"class": "group",
"content": "Allergen"
},
"Milch",
{
"class": "group",
"content": "Zuletzt"
},
"gestern"
]
}
}
]
}
}
}
我已經知道可以使用以下語句遍歷此對象:
{{ data.query.results.div.div.p }}
例如,獲取始終包含餐名的“主要餐” p標簽。 但是,信息並不總是相同的呢? 例如,當我想獲取一頓飯的所有過敏原時,我必須在獲取之后的所有數據
"content": "Allergen"
直到下一個
"class": "group",
而且我完全不知道該怎么做。 如果您有任何建議,請告訴我。
如果將返回的JSON數據粘貼到JSON linter中 ,則可以看到它是有效的JSON。 沒什么奇怪的
請記住, data.query.results.div
是一個數組,所以你應該使用專用的角度聲明循環(如果你是在一個角視圖)或經典for
,如果你是一個JavaScript文件。
您可以簡單地遍歷數據,檢查Allergen標簽,然后添加到數組中。 我在這里制作了一個JSFiddle: http : //jsfiddle.net/jeg9dna8/ 。 您可以將此策略擴展到其余數據。
var list = data.query.results.div[0].ul.li;
var isAllergen = false;
var allergens = [];
for(var i = 0; i < list.length; i++) {
var item = list[i];
if(item.class && item.class == 'group')
{
if(item.content && item.content == 'Allergen')
{
isAllergen = true;
}
else
{
isAllergen = false;
}
}
else
{
if(isAllergen)
{
allergens.push(item);
}
}
}
var result = '';
for(var i = 0; i < allergens.length; i++) {
result += allergens[i];
if(i < allergens.length - 1) result += ', ';
}
document.getElementById('allergens').innerHTML = result;
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.