使用JavaScript从YQL JSON中获取特定数据
Fetch specific data from YQL JSON using JavaScript
我目前正在用Ionic Cordova和AngularJS做一个小项目。在这个项目中,我想从使用YQL的网站获取当前信息。我的美元http。json请求看起来像这样:
*"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 }}
例如,获取"primary meal"p标签,该标签总是包含餐的标题。但如果信息不总是相同的呢?例如,当我想要得到一顿饭的所有过敏原时我需要得到
后面的所有数据"content": "Allergen"
直到下一个
"class": "group",
我完全不知道该怎么做。如果你有什么建议,请告诉我。
您可以简单地遍历数据,检查过敏原标签,并添加到数组中。我做了一个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;
如果将返回的JSON数据粘贴到JSON过滤器中,您可以看到它是有效的JSON。没有什么奇怪的。
请记住,data.query.results.div
是一个数组,所以你应该使用angular专用语句来循环(如果你在angular视图中),或者如果你在JavaScript文件中使用经典的for
。
相关文章:
- Ajax-如何获取数据
- 从键值结构中获取数据,并将其与AngularJS中ng重复的值进行比较
- 从数据库中获取数据并插入JavaScript变量
- 从单击的行上的列中获取数据
- Solr查询以按日期月份获取数据&年
- React路由器服务器端渲染和ajax获取数据
- 使用JavaScript在IE9中获取数据列表选项
- 从json子数组获取数据
- 使用angularjs中的rest调用通过id获取数据
- 正在从ruby应用程序中的数据库中获取数据
- 如何从servlet获取数据到ajax成功
- 从选择下拉菜单中获取数据
- 异步获取数据使用JavaScript同步获取数据
- 从服务器获取数据并在选择控件中使用ng选项无法显示选项
- 如何在Angular.js中循环动态添加Fields并获取数据并将其发送到服务器
- JavaScript-获取数据属性的值返回未定义的值
- 如何从文本区域获取数据并使用javascript进行解密
- 在put方法之前从作用域获取数据
- 事件循环的MEAN.JS setInterval进程(从另一个服务器获取数据)
- 使用ReactJS和Flux架构从服务器获取数据的正确方法是什么