使用JavaScript从YQL JSON获取特定数据

时间:2015-09-03 06:50:44

标签: javascript json angularjs cordova yql

我目前正在与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",

我完全不知道该怎么做。 如果您有任何建议,请告诉我。

2 个答案:

答案 0 :(得分:0)

如果将返回的JSON数据粘贴到a JSON linter中,您可以看到它是有效的JSON。没什么奇怪的。

请记住,for是一个数组,因此如果您在JavaScript文件中,则应使用angular专用语句循环(如果您处于角度视图中)或经典1. freeze panes horizontally at some specified row 2. split panes vertically at some specified column 3. and when I split panes vertically, want to actually split the data and not have copies on the same workbook created on left and right side of split line. 。< / p>

答案 1 :(得分:0)

您可以简单地遍历数据,检查过敏原标签,然后添加到数组中。我在这里做了一个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;