And how do we fit the forEach into our existing code?
I was also wondering, with the current code above, what loops through the json data? I mean, if we use forEach we know instantly what is happening, though above what is doing the iteration inside the function?
Main reason I ask is because I’ve been using each, forEach, Object.keys, etc and none of these are being used within the function. And would I be right in saying the functions just mentioned create an index automatically?
No, this would be calling catFunction() from within itself… it would be possible to do it like that, although I think the iterative way is more efficient here, and most probably more readable.
And instead of forEach() we’ve been using filter() and reduce() here; these are other native methods to iterate over an array, but they also return a filtered array (such as by a certain category property) and a single value (such as an HTML string), respectively.
It really depends on the data and how you use it… if it’s coming from a database and should be persisted again, then it would make sense to store the IDs there. Now it just occurred to me that there’s an ID property in your OP fiddle anyway (ah, and in your above post as well)… so why not just use this one? ^^
And instead of forEach() we’ve been using filter() and reduce() here; these are other native methods to iterate over an array, but they also return a filtered array (such as by a certain category property) and a single value (such as an HTML string), respectively.
Ahhh moment… yes this makes a little more sense now m3g4p0p… filter and reduce, wasn’t to sure what they were exactly doing, thanks for the links.
this would be calling catFunction() from within itself
Recursion = When a function calls itself until it dosen’t (also as you mention above) read this today and thought the catFunction() was a Recursive Function.
So are you saying its not a Recursive Function because we’re using filter and reduce, otherwise it would be?
…so why not just use this one
Yes as shown in the latest fiddle example, this works good now.
I think in this instance now that it’s working, keep things how they are… as the saying goes “over engineer things”
function getList(array, cat) {
if (!array.length) return '';
var obj = array.pop();
var item = obj.cat === cat ? `<li>${obj.title}</li>` : '';
// Call the function again on the popped sub-array, and
// append the result to the current list item
return item + getList(array, cat);
}
The return statement is where the recursion happens here. But again, this might not be terribly efficient for just iterating over an array; typically you’d use something like this when the data is nested itself.
Nested data doesn’t look at all like that array of objects you just posted. It is difficult to come up with a good example of nested data as it is very rare for data to actually be structured that way.
One of the books that I have that discusses recursion uses the example of a railway line where each station can communicate with those on either side and the station at one end of the line needs to find out how many passengers are waiting at each station. That involves passing the request from station to station down the line and back and so the data returned would then be nested. For example each station passes back an array containing their answer and the array they received from the next station - looking something like this:
Nested data could be complex objects where some values are arrays of other objects etc., or actually something as simple as a multidimensional array. E.g. consider this array
var data = [
'foo',
'bar',
[
'baz',
'boo'
],
'bam',
[
'bee',
'zoo',
[
'zap',
'zang'
]
]
];
you might want to render as nested ul elements. You don’t know how deeply nested that array is though, so you can’t just use a certain number of nested for loops or something. Here you’d use recursion, like e.g.
var getList = function(array) {
var list = '<ul>';
var element;
for (var i in array) {
element = array[i];
list += '<li>';
if (Array.isArray(element)) {
// If the element is itself another array,
// recursively append it to the current
// list item
list += getList(element);
} else {
// Otherwise, just append the current element
list += element;
}
list += '</li>';
}
return list + '</ul>';
}