JavaScript ANGULAR ng-repeat nutzen

[Thes87]

Hallo,

ich brauche einen kurzen Rat.

Ich möchte die unten stehende API auslesen und dafür im View "ng-repeat" nutzen. Wie komme ich an die Attribute heran, die unter rsp > recipes > recipe --> name

Alle Objekte bzw. Attribute unter Recipe befinden sich in einem Array.

{
"rsp": {
"@attributes": {
"status": "ok"
},
"recipes": {
"@attributes": {
"count": "65"
},
"recipe": [
{
"@attributes": {
"id": "91",
"member": "",
"glass": "7",
"cocktail": "61",
"name": "Andrea (alkoholfrei) nach Brandl",
"price": "2",
"rating": "0",
"instruction": "Alle Zutaten mit Eiswürfeln in einem Shaker kräftig schütteln und anschließend durch ein Barsieb in ein mit Eiswürfeln gefülltes Longdrinkglas geben. Als Dekoration eignet sich eine Orangenscheibe mit einer Cocktailkirsche.",
"description": "Andrea ist ein alkoholfreier, fruchtig, süßer Cocktail.",
"source": "Cocktails. Über 1000 Drinks mit und ohne Alkohol, Franz Brandl, 2007, südwest Verlag",
"workMin": "2",
"difficulty": "beginner",
"isOriginal": "1",
"isAlcoholic": "1",
"alcoholLevel": "0",
"caloriesKcal": "116",
"volumeCl": "27"
},
"glass": {
"@attributes": {
"id": "7",
"name": "Longdrinkglas",
"description": "",
"volumeMl": "250"
},
"photo": {
"@attributes": {
"id": "38",
"name": "Longdrink Glas",
"description": "",
"url": "http://www.cocktailberater.de/img/glasses/longdrink.png",
"originalFileName": "longdrink_big.png",
"photoCategory": "2"
}
}
},
"components": {
"component": [
{
"@attributes": {
"recipe": "91",
"ingredient": "4",
"amount": "2",
"unit": "cl",
"name": "Zitronensaft"
}
},
{
"@attributes": {
"recipe": "91",
"ingredient": "7",
"amount": "2",
"unit": "cl",
"name": "Mandelsirup"
}
},
{
"@attributes": {
"recipe": "91",
"ingredient": "14",
"amount": "14",
"unit": "cl",
"name": "Orangensaft"
}
},
{
"@attributes": {
"recipe": "91",
"ingredient": "59",
"amount": "2",
"unit": "cl",
"name": "Blue Curacao Sirup"
}
},
{
"@attributes": {
"recipe": "91",
"ingredient": "113",
"amount": "4",
"unit": "Stück",
"name": "Eiswürfel"
}
}
]
},
"categories": {
"recipeCategory": [
{
"@attributes": {
"id": "1",
"name": "erfrischend",
"insertDate": "0000-00-00 00:00:00",
"updateDate": "0000-00-00 00:00:00"
}
},
{
"@attributes": {
"id": "2",
"name": "fruchtig",
"insertDate": "0000-00-00 00:00:00",
"updateDate": "0000-00-00 00:00:00"
}
},
{
"@attributes": {
"id": "6",
"name": "süß",
"insertDate": "0000-00-00 00:00:00",
"updateDate": "0000-00-00 00:00:00"
}
}
]
},
"photos": "",
"videos": {
"video": {
"@attributes": {
"id": "54",
"name": "",
"description": "",
"url": "",
"insertDate": "2012-12-31 14:02:47",
"updateDate": "2012-12-31 14:02:47"
}
}
},
"tags": {
"@attributes": {
"anzahl": "3"
},
"tag": [
{
"@attributes": {
"id": "346",
"name": "alkoholfrei",
"insertDate": "2012-12-31 14:02:47",
"updateDate": "2012-12-31 14:02:47",
"recipe": "91",
"member": ""
}
},
{
"@attributes": {
"id": "347",
"name": "fruchtig",
"insertDate": "2012-12-31 14:02:47",
"updateDate": "2012-12-31 14:02:47",
"recipe": "91",
"member": ""
}
},
{
"@attributes": {
"id": "348",
"name": "süß",
"insertDate": "2012-12-31 14:02:47",
"updateDate": "2012-12-31 14:02:47",
"recipe": "91",
"member": ""
}
}
]
}
},
{
"@attributes": {
"id": "37",
"member": "1",
"glass": "7",
"cocktail": "40",
"name": "Aperol Sour",
"price": "2",
"rating": "3.4",
"instruction": "Zutaten mit Eiswürfeln shaken und in ein Longdrinkglas abseihen.",
"description": "",
"source": "",
"workMin": "2",
"difficulty": "beginner",
"isOriginal": "0",
"isAlcoholic": "1",
"alcoholLevel": "6.7",
"caloriesKcal": "157",
"volumeCl": "16"
},
"glass": {
"@attributes": {
"id": "7",
"name": "Longdrinkglas",
"description": "",
"volumeMl": "250"
},
"photo": {
"@attributes": {
"id": "38",
"name": "Longdrink Glas",
"description": "",
"url": "http://www.cocktailberater.de/img/glasses/longdrink.png",
"originalFileName": "longdrink_big.png",
"photoCategory": "2"
}
}
},
"components": {
"component": [
{
"@attributes": {
"recipe": "37",
"ingredient": "4",
"amount": "2",
"unit": "cl",
"name": "Zitronensaft"
}
},
{
"@attributes": {
"recipe": "37",
"ingredient": "14",
"amount": "2",
"unit": "cl",
"name": "Orangensaft"
}
},
{
"@attributes": {
"recipe": "37",
"ingredient": "33",
"amount": "1",
"unit": "cl",
"name": "Rohrzuckersirup"
}
},
{
"@attributes": {
"recipe": "37",
"ingredient": "39",
"amount": "4",
"unit": "cl",
"name": "Aperol"
}
},
{
"@attributes": {
"recipe": "37",
"ingredient": "113",
"amount": "4",
"unit": "Stück",
"name": "Eiswürfel"
}
}

}
}
]
}
}
]
}
}
}

 

[PhysoX512]

Hi,

erst mal würde ich solche Fragen in einem Forum immer mit einem Minimalbeispiel posten,
dann muss nicht jeder 800 Zeilen Quellcode durchforsten.

Aber um deine Frage zu beantworten:
Erst musst dein JSON-Object in einer Scope-Variable hinterlegen.
Also im Controller mittels
$scope.recipeList = "deine API"
Anschließend kannst du in der View mit
<div ng-repeat="recipe in recipeList.rsp.recipes">{{recipe.name}}</div>
darauf zugreifen.

 

[Thes87]

Hallo,

danke für die Antwort, aber ich konnte es lösen. Ich musste ['@attributes'] anfügen, um überhaupt auf das Array zugreifen zu können. Hab ich durch wildes Herumprobieren herausbekommen.