Object / array- how do i loop over the ion-list


#1

can you help me how do i loop it in the ion-list
i got lost. Please help. Thank you.


#2

Assuming that product_categories is a property of your page and that each category object has a name property, then you could do it this way:

<ion-list>
    <ion-item *ngFor="#item of product_categories">
        {{item.name}}
    </ion-item>
</ion-list>

#3

this is the xhr response.

{"product_categories":[{"id":12,"name":"Beer &amp; Stout","slug":"beerstout","parent":0,"description":"","display":"default","image":"","count":10},{"id":16,"name":"Bourbon","slug":"bourbon","parent":0,"description":"","display":"default","image":"","count":2},{"id":15,"name":"Brandy","slug":"brandy","parent":0,"description":"","display":"default","image":"","count":8},{"id":11,"name":"Gin","slug":"go"} ]}
  loadData(call, method, extra_params){
      var req = generateQuery(method, call, configwoo, extra_params);
      return this.http.get(req)
          .map(res => res.json());
  }

how do i loop it in the ion-list.


#4

how i implemented in ionic 1 but now it’s not working in ionic 2

  cats = data["product_categories"];
  angular.forEach(cats, function(cat, key) {

                // Has no parent itself
                if (cat.parent == 0) {
                    categories[cat.id] = cat;
                    // list which contains subcategories
                    categories[cat.id].children = [];

                }
                // Or there are categories that consider it a parent
                else if (parents[cat.parent] == undefined) {
                    categories[cat.parent] = {
                        children: []
                    };
                }

            });

in ion-list

    <div class='row' ng-repeat="row in categories | partition:1"> ......

#5

@iignatov I solved it. thanks

        for(let x of data['product_categories']){

            if ( x.parent == 0) {
                parents[x.id] = x;
                parents[x.id].children = [];
            }
            else if( parents[x.parent] == undefined ){
                parents[x.parent] = {
                    children: []
                };
            }
        }

        var arr = Object.keys(parents).map(function (key) {return parents[key]});
        this.fetchCatch = arr;

#6

@JosephMendez Ok, great, I’m glad you figured it out.


#7

hi , please I tried your code but didn’t get it
I want to display the chapters ad the versess.

below is my json data
{
β€œbook”: β€œGenesis”,
β€œchapters”: [
{
β€œchapter”: β€œ1”,
β€œverses”: [
{
β€œ1”: β€œIn the beginning God created the heaven and the earth.”
},
{
β€œ2”: β€œAnd the earth was without form, and void; and darkness was upon the face of the deep. And the Spirit of God moved upon the face of the waters.”
},
{
β€œ3”: β€œAnd God said, Let there be light: and there was light.”
},
{
β€œ4”: β€œAnd God saw the light, that it was good: and God divided the light from the darkness.”
},
{
β€œ5”: β€œAnd God called the light Day, and the darkness he called Night. And the evening and the morning were the first day.”
},
{
β€œ6”: β€œAnd God said, Let there be a firmament in the midst of the waters, and let it divide the waters from the waters.”
},
{
β€œ7”: β€œAnd God made the firmament, and divided the waters which were under the firmament from the waters which were above the firmament: and it was so.”
},
{
β€œ8”: β€œAnd God called the firmament Heaven. And the evening and the morning were the second day.”
},
{
β€œ9”: β€œAnd God said, Let the waters under the heaven be gathered together unto one place, and let the dry land appear: and it was so.”
},
{
β€œ10”: β€œAnd God called the dry land Earth; and the gathering together of the waters called he Seas: and God saw that it was good.”
},
{
β€œ11”: β€œAnd God said, Let the earth bring forth grass, the herb yielding seed, and the fruit tree yielding fruit after his kind, whose seed is in itself, upon the earth: and it was so.”
},
{
β€œ12”: β€œAnd the earth brought forth grass, and herb yielding seed after his kind, and the tree yielding fruit, whose seed was in itself, after his kind: and God saw that it was good.”
},
{
β€œ13”: β€œAnd the evening and the morning were the third day.”
},
{
β€œ14”: β€œAnd God said, Let there be lights in the firmament of the heaven to divide the day from the night; and let them be for signs, and for seasons, and for days, and years:”
},
{
β€œ15”: β€œAnd let them be for lights in the firmament of the heaven to give light upon the earth: and it was so.”
},
{
β€œ16”: β€œAnd God made two great lights; the greater light to rule the day, and the lesser light to rule the night: he made the stars also.”
},
{
β€œ17”: β€œAnd God set them in the firmament of the heaven to give light upon the earth,”
},
{
β€œ18”: β€œAnd to rule over the day and over the night, and to divide the light from the darkness: and God saw that it was good.”
},
{
β€œ19”: β€œAnd the evening and the morning were the fourth day.”
},
{
β€œ20”: β€œAnd God said, Let the waters bring forth abundantly the moving creature that hath life, and fowl that may fly above the earth in the open firmament of heaven.”
},
{
β€œ21”: β€œAnd God created great whales, and every living creature that moveth, which the waters brought forth abundantly, after their kind, and every winged fowl after his kind: and God saw that it was good.”
},
{
β€œ22”: β€œAnd God blessed them, saying, Be fruitful, and multiply, and fill the waters in the seas, and let fowl multiply in the earth.”
},
{
β€œ23”: β€œAnd the evening and the morning were the fifth day.”
},
{
β€œ24”: β€œAnd God said, Let the earth bring forth the living creature after his kind, cattle, and creeping thing, and beast of the earth after his kind: and it was so.”
},
{
β€œ25”: β€œAnd God made the beast of the earth after his kind, and cattle after their kind, and every thing that creepeth upon the earth after his kind: and God saw that it was good.”
},
{
β€œ26”: β€œAnd God said, Let us make man in our image, after our likeness: and let them have dominion over the fish of the sea, and over the fowl of the air, and over the cattle, and over all the earth, and over every creeping thing that creepeth upon the earth.”
},
{
β€œ27”: β€œSo God created man in his own image, in the image of God created he him; male and female created he them.”
},
{
β€œ28”: β€œAnd God blessed them, and God said unto them, Be fruitful, and multiply, and replenish the earth, and subdue it: and have dominion over the fish of the sea, and over the fowl of the air, and over every living thing that moveth upon the earth.”
},
{
β€œ29”: β€œAnd God said, Behold, I have given you every herb bearing seed, which is upon the face of all the earth, and every tree, in the which is the fruit of a tree yielding seed; to you it shall be for meat.”
},
{
β€œ30”: β€œAnd to every beast of the earth, and to every fowl of the air, and to every thing that creepeth upon the earth, wherein there is life, I have given every green herb for meat: and it was so.”
},
{
β€œ31”: β€œAnd God saw every thing that he had made, and, behold, it was very good. And the evening and the morning were the sixth day.”
}
]
},
{
β€œchapter”: β€œ2”,
β€œverses”: [
{
β€œ1”: β€œThus the heavens and the earth were finished, and all the host of them.”
},
{
β€œ2”: β€œAnd on the seventh day God ended his work which he had made; and he rested on the seventh day from all his work which he had made.”
},
{
β€œ3”: β€œAnd God blessed the seventh day, and sanctified it: because that in it he had rested from all his work which God created and made.”
},
{
β€œ4”: β€œThese are the generations of the heavens and of the earth when they were created, in the day that the LORD God made the earth and the heavens,”
},
{
β€œ5”: β€œAnd every plant of the field before it was in the earth, and every herb of the field before it grew: for the LORD God had not caused it to rain upon the earth, and there was not a man to till the ground.”
},
{
β€œ6”: β€œBut there went up a mist from the earth, and watered the whole face of the ground.”
},
{
β€œ7”: β€œAnd the LORD God formed man of the dust of the ground, and breathed into his nostrils the breath of life; and man became a living soul.”
},
{
β€œ8”: β€œAnd the LORD God planted a garden eastward in Eden; and there he put the man whom he had formed.”
},
{
β€œ9”: β€œAnd out of the ground made the LORD God to grow every tree that is pleasant to the sight, and good for food; the tree of life also in the midst of the garden, and the tree of knowledge of good and evil.”
},
{
β€œ10”: β€œAnd a river went out of Eden to water the garden; and from thence it was parted, and became into four heads.”
},
{
β€œ11”: β€œThe name of the first is Pison: that is it which compasseth the whole land of Havilah, where there is gold;”
},
{
β€œ12”: β€œAnd the gold of that land is good: there is bdellium and the onyx stone.”
},
{
β€œ13”: β€œAnd the name of the second river is Gihon: the same is it that compasseth the whole land of Ethiopia.”
},
{
β€œ14”: β€œAnd the name of the third river is Hiddekel: that is it which goeth toward the east of Assyria. And the fourth river is Euphrates.”
},
{
β€œ15”: β€œAnd the LORD God took the man, and put him into the garden of Eden to dress it and to keep it.”
},
{
β€œ16”: β€œAnd the LORD God commanded the man, saying, Of every tree of the garden thou mayest freely eat:”
},
{
β€œ17”: β€œBut of the tree of the knowledge of good and evil, thou shalt not eat of it: for in the day that thou eatest thereof thou shalt surely die.”
},
{
β€œ18”: β€œAnd the LORD God said, It is not good that the man should be alone; I will make him an help meet for him.”
},
{
β€œ19”: β€œAnd out of the ground the LORD God formed every beast of the field, and every fowl of the air; and brought them unto Adam to see what he would call them: and whatsoever Adam called every living creature, that was the name thereof.”
},
{
β€œ20”: β€œAnd Adam gave names to all cattle, and to the fowl of the air, and to every beast of the field; but for Adam there was not found an help meet for him.”
},
{
β€œ21”: β€œAnd the LORD God caused a deep sleep to fall upon Adam, and he slept: and he took one of his ribs, and closed up the flesh instead thereof;”
},
{
β€œ22”: β€œAnd the rib, which the LORD God had taken from man, made he a woman, and brought her unto the man.”
},
{
β€œ23”: β€œAnd Adam said, This is now bone of my bones, and flesh of my flesh: she shall be called Woman, because she was taken out of Man.”
},
{
β€œ24”: β€œTherefore shall a man leave his father and his mother, and shall cleave unto his wife: and they shall be one flesh.”
},
{
β€œ25”: β€œAnd they were both naked, the man and his wife, and were not ashamed.”
}
]
}

]

}

Please I need to display the chpater array in my iew .

below is my component logic

this.http.get(bibleUrl)
.map(res => res.json())
.subscribe(data => {
this.Chapter = data;
console.log(data);
this.Chapter = [];
this.Chapter.push(data);
this.mydata = this.Chapter[Math.floor((Math.random() * this.Chapter.length) + 0)];
console.log(this.Chapter);
// });
});

Thanks for response


#8

You don’t have a chapter array. You have an unwieldy object. I would suggest writing a program to transform it into an actual array, at which point this would be simple.


#9

thanks
Got it working.
Done .