How to populate an array in enyo.js?

Question

I have an array. I want to give the value of the array in enyo.js.

How will I populate the array dynamically?

Following is the code:

enyo.kind({
   name: "enyo.sample.RepeaterSample",
   classes: "enyo-fit repeater-sample",
    components: [
    {kind: "Repeater", onSetupItem:"setupItem", components: [
        {name:"item", classes:"repeater-sample-item", components: [
            {tag:"span", name: "personNumber"},
            {tag:"span", name: "personName"}
        ]}
    ]}
],
create: function() {
    this.inherited(arguments);
    this.$.repeater.setCount(this.people.length);
},
setupItem: function(inSender, inEvent) {
    var index = inEvent.index;
    var item = inEvent.item;
    var person = this.people[index];
    item.$.personNumber.setContent((index+1) + ". ");
    item.$.personName.setContent(person.name);
    item.$.personName.applyStyle("color", person.sex == "male" ? "dodgerblue" : "deeppink");
},
people: [
    {name: "Andrew", sex:"male"},
    {name: "Betty", sex:"female"},
    {name: "Christopher", sex:"male"},
    {name: "Donna", sex:"female"},
    {name: "Ephraim", sex:"male"},
    {name: "Frankie", sex:"male"},
    {name: "Gerald", sex:"male"},
    {name: "Heather", sex:"female"},
    {name: "Ingred", sex:"female"},
    {name: "Jack", sex:"male"},
    {name: "Kevin", sex:"male"},
    {name: "Lucy", sex:"female"},
    {name: "Matthew", sex:"male"},
    {name: "Noreen", sex:"female"},
    {name: "Oscar", sex:"male"},
    {name: "Pedro", sex:"male"},
    {name: "Quentin", sex:"male"},
    {name: "Ralph", sex:"male"},
    {name: "Steven", sex:"male"},
    {name: "Tracy", sex:"female"},
    {name: "Uma", sex:"female"},
    {name: "Victor", sex:"male"},
    {name: "Wendy", sex:"female"},
    {name: "Xin", sex:"male"},
    {name: "Yulia", sex:"female"},
    {name: "Zoltan"},
]

});

In this case the people is hard coded. I want to give my value that m getting from json dynamically.

Please help. Thanks.

Answer 1

When you get the array of JSON, then you just set this.people = [data from JSON]. That works if the code is contained in the same top-level kind (enyo.sample.RepeaterSample).

If the JSON return is in a different kind, then you probably need to set a published property for enyo.sample.RepeaterSample thusly:

published: {
   people: []
}

And then you can use setPeople(arrayOfPeople). You can also then automatically re-build the repeater in a peopleChanged method:

peopleChanged: function() {
   this.$.repeater.setCount(this.people.length);
}