Create object array with dynamic properties

Question

In the targetData array, objects has properties("january",etc ) are taken from source array.... I am unable to transform sourceEvents to TargetData array.

var sourceEvents =[
    {
        "title": "Course Tile1",
        "details": "Webex| Advanced",
        "month": "January"
    },
    {
        "title": "Course Tile1",
        "details": "Webex| Advnced",
        "month": "february"
    },
    {
        "title": "Course Tile1",
        "details": "Webex| Advnced",
        "month": "febrary"
    }];



var TargetData =[
    {"january":
  [
        {
            "title": "Course Tile1",
            "details": "Webex| Advanced"
        },
        {
            "title": "Course Tile2",
            "details": "Webex| Advanced",

        }
  ]
    },
    { "Feb":[
    {
            "title": "Course Tile3",
            "details": "Webex| Advanced"
        },
        {
            "title": "Course Tile4",
            "details": "Webex| Advanced"

        }]
}
]

I need to use ng-repeat to loop the resulting array.

That target structure will be hard to loop through usefully. — T.J. Crowder, Feb 25 '16 at 11:08

T.J. Crowder · Accepted Answer · 2016-05-20T14:29:04.717

It'll be hard to loop through the structure you've shown. I'd suggest this instead:

var targetData = [
    {
        "month": "january",
        "entries": [
            {
                "title": "Course Tile1",
                "details": "Webex| Advanced"
            }, {
                "title": "Course Tile2",
                "details": "Webex| Advanced",

            }
        ]
    },
    {
        "month": "february",
        "entries": [
            {
                "title": "Course Tile3",
                "details": "Webex| Advanced"
            },
            {
                "title": "Course Tile4",
                "details": "Webex| Advanced"

            }
        ]
    }
];

That way, you have nested ng-repeats: One for months, then the next for the entries in the month.

In which case, it's fairly easy to produce with a loop over your source data and a temporary index of months to entries:

var sourceEvents = [
    {
        "title": "Course Tile1",
        "details": "Webex| Advanced",
        "month": "January"
    },
    {
        "title": "Course Tile1",
        "details": "Webex| Advnced",
        "month": "February"
    },
    {
        "title": "Course Tile1",
        "details": "Webex| Advnced",
        "month": "February"
    }
];

var months = Object.create(null);
var targetData = [];
sourceEvents.forEach(function(event) {
    var month = event.month;
    var entry = months[month];
    if (!entry) {
        months[month] = entry = {
            month: month,
            entries: []
        };
        targetData.push(entry);
    }
    entry.entries.push({
        title: event.title,
        details: event.details
    });
});
document.body.innerHTML =
    "<pre>" + JSON.stringify(targetData, null, 4).replace(/</g, "&lt;") + "</pre>";

Note: Your source data had a couple of typos which I've fixed in the above.

Side note: I've used targetData rather than TargetData in the above because it's more in keeping with the majority of JavaScript style guides.

@Dew: Wow, just how old a browser are you using? **:-)** [`Array#forEach`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach) was added by the ES5 specification in 2009, all modern browsers have it. It can be shimmed on obsolete browsers like IE8, or just use a `for` loop instead. There's a truly exhaustive list of options for looping through arrays [in this answer](http://stackoverflow.com/questions/9329446/for-each-over-an-array-in-javascript/9329476#9329476). — T.J. Crowder, Feb 25 '16 at 12:50

score 0 · Answer 2 · answered Feb 25 '16 at 11:27

Note the quotes or lack thereof:

var sourceEvents = [ 
    {
        title:"Course Tile1",
        details:"Webex| Advanced",
        month:january
    },
    {
        title:"Course Tile1",
        details:"Webex| Advnced",
        month:february
    },
    {
        title:"Course Tile1",
        details:"Webex| Advnced",
        month:february
    }
];
var january = [
    {
        title:"Course Tile1",
        details:"Webex| Advanced"
    },
];
var february = [
    {
        title:"Course Tile1", 
        details:"Webex| Advanced"
    },
];
var targetEvents = [
    {
        january, february,
    }
];

Create object array with dynamic properties

2 Answers2