javascript: in a chain, how to get size of previous array?
up vote
2
down vote
favorite
When chaining filter and reduce, how to get the size of the filtered array? I need that size for tailoring responsive design CSS.
My (simplified) code, uses the 3rd and 4th parameters of the callback:
json.articles
.filter(a => keep(a,name))
.reduce((el, a,i,t) =>
i===0? DOMtag('section','class':`media$t.length`)
.appendChild(DOMtag(`article`, content(a,0))).parentElement
: el.appendChild(DOMtag(`article`, content(a,i))).parentElement,
null);
or, even simpler (thanks to luc and his lazy evaluation suggestion below):
json.articles
.filter(a => keep(a,name))
.reduce((el, a,i,t) =>
(el || DOMtag('section','class':`media$t.length`))
.appendChild(DOMtag(`article`, content(a,i))).parentElement,
null);
Both code work, but if someone has an idea about binding this somehow, it would be possible to use the initial value of the accumulator, such as:
json.articles
.filter(a => keep(a,name))
.reduce((el, a) =>
el.appendChild(DOMtag(`article`, content(a,i))).parentElement,
DOMtag('section','class':`media$this.length`));
Any idea?
javascript arrays this method-chaining
asked Nov 9 at 0:06
allez l'OM
10517
add a comment |
up vote
2
down vote
favorite
When chaining filter and reduce, how to get the size of the filtered array? I need that size for tailoring responsive design CSS.
My (simplified) code, uses the 3rd and 4th parameters of the callback:
json.articles
.filter(a => keep(a,name))
.reduce((el, a,i,t) =>
i===0? DOMtag('section','class':`media$t.length`)
.appendChild(DOMtag(`article`, content(a,0))).parentElement
: el.appendChild(DOMtag(`article`, content(a,i))).parentElement,
null);
or, even simpler (thanks to luc and his lazy evaluation suggestion below):
json.articles
.filter(a => keep(a,name))
.reduce((el, a,i,t) =>
(el || DOMtag('section','class':`media$t.length`))
.appendChild(DOMtag(`article`, content(a,i))).parentElement,
null);
Both code work, but if someone has an idea about binding this somehow, it would be possible to use the initial value of the accumulator, such as:
json.articles
.filter(a => keep(a,name))
.reduce((el, a) =>
el.appendChild(DOMtag(`article`, content(a,i))).parentElement,
DOMtag('section','class':`media$this.length`));
Any idea?
javascript arrays this method-chaining
asked Nov 9 at 0:06
allez l'OM
10517
1
the 4th argument in the reducer function is the source array. developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
– kunal_bohra
Nov 9 at 0:24
@kunal_bohra. Yes, this is how I am using it in my 1st code, but available only in the callback, not in reduce (can't be used for initial value).
– allez l'OM
Nov 9 at 14:05
add a comment |
up vote
2
down vote
favorite
up vote
2
down vote
favorite
When chaining filter and reduce, how to get the size of the filtered array? I need that size for tailoring responsive design CSS.
My (simplified) code, uses the 3rd and 4th parameters of the callback:
json.articles
.filter(a => keep(a,name))
.reduce((el, a,i,t) =>
i===0? DOMtag('section','class':`media$t.length`)
.appendChild(DOMtag(`article`, content(a,0))).parentElement
: el.appendChild(DOMtag(`article`, content(a,i))).parentElement,
null);
or, even simpler (thanks to luc and his lazy evaluation suggestion below):
json.articles
.filter(a => keep(a,name))
.reduce((el, a,i,t) =>
(el || DOMtag('section','class':`media$t.length`))
.appendChild(DOMtag(`article`, content(a,i))).parentElement,
null);
Both code work, but if someone has an idea about binding this somehow, it would be possible to use the initial value of the accumulator, such as:
json.articles
.filter(a => keep(a,name))
.reduce((el, a) =>
el.appendChild(DOMtag(`article`, content(a,i))).parentElement,
DOMtag('section','class':`media$this.length`));
Any idea?
javascript arrays this method-chaining
asked Nov 9 at 0:06
allez l'OM
10517
When chaining filter and reduce, how to get the size of the filtered array? I need that size for tailoring responsive design CSS.
My (simplified) code, uses the 3rd and 4th parameters of the callback:
json.articles
.filter(a => keep(a,name))
.reduce((el, a,i,t) =>
i===0? DOMtag('section','class':`media$t.length`)
.appendChild(DOMtag(`article`, content(a,0))).parentElement
: el.appendChild(DOMtag(`article`, content(a,i))).parentElement,
null);
or, even simpler (thanks to luc and his lazy evaluation suggestion below):
json.articles
.filter(a => keep(a,name))
.reduce((el, a,i,t) =>
(el || DOMtag('section','class':`media$t.length`))
.appendChild(DOMtag(`article`, content(a,i))).parentElement,
null);
Both code work, but if someone has an idea about binding this somehow, it would be possible to use the initial value of the accumulator, such as:
json.articles
.filter(a => keep(a,name))
.reduce((el, a) =>
el.appendChild(DOMtag(`article`, content(a,i))).parentElement,
DOMtag('section','class':`media$this.length`));
Any idea?
javascript arrays this method-chaining
javascript arrays this method-chaining
asked Nov 9 at 0:06
allez l'OM
10517
asked Nov 9 at 0:06
allez l'OM
10517
edited Nov 10 at 19:33
asked Nov 9 at 0:06
allez l'OM
10517
asked Nov 9 at 0:06
allez l'OM
10517
asked Nov 9 at 0:06
allez l'OM
10517
10517
1
the 4th argument in the reducer function is the source array. developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
– kunal_bohra
Nov 9 at 0:24
@kunal_bohra. Yes, this is how I am using it in my 1st code, but available only in the callback, not in reduce (can't be used for initial value).
– allez l'OM
Nov 9 at 14:05
add a comment |
1
the 4th argument in the reducer function is the source array. developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
– kunal_bohra
Nov 9 at 0:24
@kunal_bohra. Yes, this is how I am using it in my 1st code, but available only in the callback, not in reduce (can't be used for initial value).
– allez l'OM
Nov 9 at 14:05
1
1
the 4th argument in the reducer function is the source array. developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
– kunal_bohra
Nov 9 at 0:24
the 4th argument in the reducer function is the source array. developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
– kunal_bohra
Nov 9 at 0:24
@kunal_bohra. Yes, this is how I am using it in my 1st code, but available only in the callback, not in reduce (can't be used for initial value).
– allez l'OM
Nov 9 at 14:05
@kunal_bohra. Yes, this is how I am using it in my 1st code, but available only in the callback, not in reduce (can't be used for initial value).
– allez l'OM
Nov 9 at 14:05
add a comment |
1 Answer
1
active
oldest
votes
up vote
0
down vote
There is no way to have access to the filtered array length at the moment of passing the default value of reduce since the expression is evaluated before reduce is called.
You can, though, simplify the contents of your function as follows:
// Sample data
const json = articles: [name: 'test',,name: 'test2',,];
// functional helper function to illustrate the example
function DOMTag(tagName, content, className)
const tag = document.createElement(tagName);
if (content)
tag.appendChild(document.createTextNode(content));
if (className)
tag.className = className;
return tag;
// Start of actual answer code:
const section = json.articles
.filter(a => a.name)
.map(a => DOMTag(`article`, content: a.name))
.reduce((p, c, i, a) =>
(p || DOMTag('section',className:`media$a.length`))
.appendChild(c).parentElement
, null);
section.className = `media$section.childNodes.length`
// Validation
console.log(section.outerHTML); Another option that would be clean is to set the className outside of the chain:
// Sample data
const json = articles: [name: 'test',,name: 'test2',,];
// functional helper function to illustrate the example
function DOMTag(tagName, content)
const tag = document.createElement(tagName);
if (content)
tag.appendChild(document.createTextNode(content));
return tag;
// Start of actual answer code:
const section = json.articles
.filter(a => a.name)
.map(el => DOMTag('article', el.name))
.reduce((p,c) => (p.appendChild(c), p), DOMTag('section'))
section.className = `media$section.childNodes.length`
// Validation
console.log(section.outerHTML);Option2: use a function to abstract the creation of the container:
// Sample data
const json = articles: [name: 'test',,name: 'test2',,];
// functional helper function to illustrate the example
function DOMTag(tagName, content, className)
const tag = document.createElement(tagName);
if (content)
tag.appendChild(document.createTextNode(content));
if (className)
tag.className = className;
return tag;
// Start of actual answer code:
function section(children)
const section = DOMTag('section',
className: `media$children.length`
);
children.forEach(c => section.appendChild(c));
return section;
const s = section(
json.articles
.filter(a => a.name)
.map(el => DOMTag('article', content: el.name))
)
// Validation
console.log(s.outerHTML);Option 3: more functions! If you absolutely must use reduce:
// Sample data
const json = articles: [name: 'test',,name: 'test2',,];
// functional helper function to illustrate the example
function DOMTag(tagName, content, className)
const tag = document.createElement(tagName);
if (content)
tag.appendChild(document.createTextNode(content));
if (className)
tag.className = className;
return tag;
// Start of actual answer code:
function defaultSection()
let m = false;
return (a = ) =>
if (!m)
m = DOMTag('section', className: `media$a.length`);
return m;
;
const section = json.articles
.filter(a => a.name)
.map(el => DOMTag('article', content: el.name))
.reduce((p,c,i,a) =>
p(a).appendChild(c);
return p;
, defaultSection())();
// Validation
console.log(section.outerHTML);answered Nov 9 at 1:28
lucascaro
3,34611530
There is a way to pass the array to the callback (a synchronous callback), hence I believe that there should be a way to bindthisto that array. Your workarounds #2 and #3 are intersting (#1 is not chainable), but not much better than my own first solution.
– allez l'OM
Nov 9 at 21:51
That's a fair point. I don't think you can usebindin the way you are thinking but you can take advantage of lazy evaluation of boolean expressions to simplify your initial code. Update the answer with a new option that might be interesting as well.
– lucascaro
Nov 10 at 0:58
1
I don't understand why that answer has been downvoted. At least the comment above is very useful.
– allez l'OM
Nov 10 at 19:28
add a comment |
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
0
down vote
There is no way to have access to the filtered array length at the moment of passing the default value of reduce since the expression is evaluated before reduce is called.
You can, though, simplify the contents of your function as follows:
// Sample data
const json = articles: [name: 'test',,name: 'test2',,];
// functional helper function to illustrate the example
function DOMTag(tagName, content, className)
const tag = document.createElement(tagName);
if (content)
tag.appendChild(document.createTextNode(content));
if (className)
tag.className = className;
return tag;
// Start of actual answer code:
const section = json.articles
.filter(a => a.name)
.map(a => DOMTag(`article`, content: a.name))
.reduce((p, c, i, a) =>
(p || DOMTag('section',className:`media$a.length`))
.appendChild(c).parentElement
, null);
section.className = `media$section.childNodes.length`
// Validation
console.log(section.outerHTML); Another option that would be clean is to set the className outside of the chain:
// Sample data
const json = articles: [name: 'test',,name: 'test2',,];
// functional helper function to illustrate the example
function DOMTag(tagName, content)
const tag = document.createElement(tagName);
if (content)
tag.appendChild(document.createTextNode(content));
return tag;
// Start of actual answer code:
const section = json.articles
.filter(a => a.name)
.map(el => DOMTag('article', el.name))
.reduce((p,c) => (p.appendChild(c), p), DOMTag('section'))
section.className = `media$section.childNodes.length`
// Validation
console.log(section.outerHTML);Option2: use a function to abstract the creation of the container:
// Sample data
const json = articles: [name: 'test',,name: 'test2',,];
// functional helper function to illustrate the example
function DOMTag(tagName, content, className)
const tag = document.createElement(tagName);
if (content)
tag.appendChild(document.createTextNode(content));
if (className)
tag.className = className;
return tag;
// Start of actual answer code:
function section(children)
const section = DOMTag('section',
className: `media$children.length`
);
children.forEach(c => section.appendChild(c));
return section;
const s = section(
json.articles
.filter(a => a.name)
.map(el => DOMTag('article', content: el.name))
)
// Validation
console.log(s.outerHTML);Option 3: more functions! If you absolutely must use reduce:
// Sample data
const json = articles: [name: 'test',,name: 'test2',,];
// functional helper function to illustrate the example
function DOMTag(tagName, content, className)
const tag = document.createElement(tagName);
if (content)
tag.appendChild(document.createTextNode(content));
if (className)
tag.className = className;
return tag;
// Start of actual answer code:
function defaultSection()
let m = false;
return (a = ) =>
if (!m)
m = DOMTag('section', className: `media$a.length`);
return m;
;
const section = json.articles
.filter(a => a.name)
.map(el => DOMTag('article', content: el.name))
.reduce((p,c,i,a) =>
p(a).appendChild(c);
return p;
, defaultSection())();
// Validation
console.log(section.outerHTML);answered Nov 9 at 1:28
lucascaro
3,34611530
There is a way to pass the array to the callback (a synchronous callback), hence I believe that there should be a way to bindthisto that array. Your workarounds #2 and #3 are intersting (#1 is not chainable), but not much better than my own first solution.
– allez l'OM
Nov 9 at 21:51
That's a fair point. I don't think you can usebindin the way you are thinking but you can take advantage of lazy evaluation of boolean expressions to simplify your initial code. Update the answer with a new option that might be interesting as well.
– lucascaro
Nov 10 at 0:58
1
I don't understand why that answer has been downvoted. At least the comment above is very useful.
– allez l'OM
Nov 10 at 19:28
add a comment |
up vote
0
down vote
There is no way to have access to the filtered array length at the moment of passing the default value of reduce since the expression is evaluated before reduce is called.
You can, though, simplify the contents of your function as follows:
// Sample data
const json = articles: [name: 'test',,name: 'test2',,];
// functional helper function to illustrate the example
function DOMTag(tagName, content, className)
const tag = document.createElement(tagName);
if (content)
tag.appendChild(document.createTextNode(content));
if (className)
tag.className = className;
return tag;
// Start of actual answer code:
const section = json.articles
.filter(a => a.name)
.map(a => DOMTag(`article`, content: a.name))
.reduce((p, c, i, a) =>
(p || DOMTag('section',className:`media$a.length`))
.appendChild(c).parentElement
, null);
section.className = `media$section.childNodes.length`
// Validation
console.log(section.outerHTML); Another option that would be clean is to set the className outside of the chain:
// Sample data
const json = articles: [name: 'test',,name: 'test2',,];
// functional helper function to illustrate the example
function DOMTag(tagName, content)
const tag = document.createElement(tagName);
if (content)
tag.appendChild(document.createTextNode(content));
return tag;
// Start of actual answer code:
const section = json.articles
.filter(a => a.name)
.map(el => DOMTag('article', el.name))
.reduce((p,c) => (p.appendChild(c), p), DOMTag('section'))
section.className = `media$section.childNodes.length`
// Validation
console.log(section.outerHTML);Option2: use a function to abstract the creation of the container:
// Sample data
const json = articles: [name: 'test',,name: 'test2',,];
// functional helper function to illustrate the example
function DOMTag(tagName, content, className)
const tag = document.createElement(tagName);
if (content)
tag.appendChild(document.createTextNode(content));
if (className)
tag.className = className;
return tag;
// Start of actual answer code:
function section(children)
const section = DOMTag('section',
className: `media$children.length`
);
children.forEach(c => section.appendChild(c));
return section;
const s = section(
json.articles
.filter(a => a.name)
.map(el => DOMTag('article', content: el.name))
)
// Validation
console.log(s.outerHTML);Option 3: more functions! If you absolutely must use reduce:
// Sample data
const json = articles: [name: 'test',,name: 'test2',,];
// functional helper function to illustrate the example
function DOMTag(tagName, content, className)
const tag = document.createElement(tagName);
if (content)
tag.appendChild(document.createTextNode(content));
if (className)
tag.className = className;
return tag;
// Start of actual answer code:
function defaultSection()
let m = false;
return (a = ) =>
if (!m)
m = DOMTag('section', className: `media$a.length`);
return m;
;
const section = json.articles
.filter(a => a.name)
.map(el => DOMTag('article', content: el.name))
.reduce((p,c,i,a) =>
p(a).appendChild(c);
return p;
, defaultSection())();
// Validation
console.log(section.outerHTML);answered Nov 9 at 1:28
lucascaro
3,34611530
There is a way to pass the array to the callback (a synchronous callback), hence I believe that there should be a way to bindthisto that array. Your workarounds #2 and #3 are intersting (#1 is not chainable), but not much better than my own first solution.
– allez l'OM
Nov 9 at 21:51
That's a fair point. I don't think you can usebindin the way you are thinking but you can take advantage of lazy evaluation of boolean expressions to simplify your initial code. Update the answer with a new option that might be interesting as well.
– lucascaro
Nov 10 at 0:58
1
I don't understand why that answer has been downvoted. At least the comment above is very useful.
– allez l'OM
Nov 10 at 19:28
add a comment |
up vote
0
down vote
up vote
0
down vote
There is no way to have access to the filtered array length at the moment of passing the default value of reduce since the expression is evaluated before reduce is called.
You can, though, simplify the contents of your function as follows:
// Sample data
const json = articles: [name: 'test',,name: 'test2',,];
// functional helper function to illustrate the example
function DOMTag(tagName, content, className)
const tag = document.createElement(tagName);
if (content)
tag.appendChild(document.createTextNode(content));
if (className)
tag.className = className;
return tag;
// Start of actual answer code:
const section = json.articles
.filter(a => a.name)
.map(a => DOMTag(`article`, content: a.name))
.reduce((p, c, i, a) =>
(p || DOMTag('section',className:`media$a.length`))
.appendChild(c).parentElement
, null);
section.className = `media$section.childNodes.length`
// Validation
console.log(section.outerHTML); Another option that would be clean is to set the className outside of the chain:
// Sample data
const json = articles: [name: 'test',,name: 'test2',,];
// functional helper function to illustrate the example
function DOMTag(tagName, content)
const tag = document.createElement(tagName);
if (content)
tag.appendChild(document.createTextNode(content));
return tag;
// Start of actual answer code:
const section = json.articles
.filter(a => a.name)
.map(el => DOMTag('article', el.name))
.reduce((p,c) => (p.appendChild(c), p), DOMTag('section'))
section.className = `media$section.childNodes.length`
// Validation
console.log(section.outerHTML);Option2: use a function to abstract the creation of the container:
// Sample data
const json = articles: [name: 'test',,name: 'test2',,];
// functional helper function to illustrate the example
function DOMTag(tagName, content, className)
const tag = document.createElement(tagName);
if (content)
tag.appendChild(document.createTextNode(content));
if (className)
tag.className = className;
return tag;
// Start of actual answer code:
function section(children)
const section = DOMTag('section',
className: `media$children.length`
);
children.forEach(c => section.appendChild(c));
return section;
const s = section(
json.articles
.filter(a => a.name)
.map(el => DOMTag('article', content: el.name))
)
// Validation
console.log(s.outerHTML);Option 3: more functions! If you absolutely must use reduce:
// Sample data
const json = articles: [name: 'test',,name: 'test2',,];
// functional helper function to illustrate the example
function DOMTag(tagName, content, className)
const tag = document.createElement(tagName);
if (content)
tag.appendChild(document.createTextNode(content));
if (className)
tag.className = className;
return tag;
// Start of actual answer code:
function defaultSection()
let m = false;
return (a = ) =>
if (!m)
m = DOMTag('section', className: `media$a.length`);
return m;
;
const section = json.articles
.filter(a => a.name)
.map(el => DOMTag('article', content: el.name))
.reduce((p,c,i,a) =>
p(a).appendChild(c);
return p;
, defaultSection())();
// Validation
console.log(section.outerHTML);answered Nov 9 at 1:28
lucascaro
3,34611530
There is no way to have access to the filtered array length at the moment of passing the default value of reduce since the expression is evaluated before reduce is called.
You can, though, simplify the contents of your function as follows:
// Sample data
const json = articles: [name: 'test',,name: 'test2',,];
// functional helper function to illustrate the example
function DOMTag(tagName, content, className)
const tag = document.createElement(tagName);
if (content)
tag.appendChild(document.createTextNode(content));
if (className)
tag.className = className;
return tag;
// Start of actual answer code:
const section = json.articles
.filter(a => a.name)
.map(a => DOMTag(`article`, content: a.name))
.reduce((p, c, i, a) =>
(p || DOMTag('section',className:`media$a.length`))
.appendChild(c).parentElement
, null);
section.className = `media$section.childNodes.length`
// Validation
console.log(section.outerHTML); Another option that would be clean is to set the className outside of the chain:
// Sample data
const json = articles: [name: 'test',,name: 'test2',,];
// functional helper function to illustrate the example
function DOMTag(tagName, content)
const tag = document.createElement(tagName);
if (content)
tag.appendChild(document.createTextNode(content));
return tag;
// Start of actual answer code:
const section = json.articles
.filter(a => a.name)
.map(el => DOMTag('article', el.name))
.reduce((p,c) => (p.appendChild(c), p), DOMTag('section'))
section.className = `media$section.childNodes.length`
// Validation
console.log(section.outerHTML);Option2: use a function to abstract the creation of the container:
// Sample data
const json = articles: [name: 'test',,name: 'test2',,];
// functional helper function to illustrate the example
function DOMTag(tagName, content, className)
const tag = document.createElement(tagName);
if (content)
tag.appendChild(document.createTextNode(content));
if (className)
tag.className = className;
return tag;
// Start of actual answer code:
function section(children)
const section = DOMTag('section',
className: `media$children.length`
);
children.forEach(c => section.appendChild(c));
return section;
const s = section(
json.articles
.filter(a => a.name)
.map(el => DOMTag('article', content: el.name))
)
// Validation
console.log(s.outerHTML);Option 3: more functions! If you absolutely must use reduce:
// Sample data
const json = articles: [name: 'test',,name: 'test2',,];
// functional helper function to illustrate the example
function DOMTag(tagName, content, className)
const tag = document.createElement(tagName);
if (content)
tag.appendChild(document.createTextNode(content));
if (className)
tag.className = className;
return tag;
// Start of actual answer code:
function defaultSection()
let m = false;
return (a = ) =>
if (!m)
m = DOMTag('section', className: `media$a.length`);
return m;
;
const section = json.articles
.filter(a => a.name)
.map(el => DOMTag('article', content: el.name))
.reduce((p,c,i,a) =>
p(a).appendChild(c);
return p;
, defaultSection())();
// Validation
console.log(section.outerHTML);// Sample data
const json = articles: [name: 'test',,name: 'test2',,];
// functional helper function to illustrate the example
function DOMTag(tagName, content, className)
const tag = document.createElement(tagName);
if (content)
tag.appendChild(document.createTextNode(content));
if (className)
tag.className = className;
return tag;
// Start of actual answer code:
const section = json.articles
.filter(a => a.name)
.map(a => DOMTag(`article`, content: a.name))
.reduce((p, c, i, a) =>
(p || DOMTag('section',className:`media$a.length`))
.appendChild(c).parentElement
, null);
section.className = `media$section.childNodes.length`
// Validation
console.log(section.outerHTML); // Sample data
const json = articles: [name: 'test',,name: 'test2',,];
// functional helper function to illustrate the example
function DOMTag(tagName, content, className)
const tag = document.createElement(tagName);
if (content)
tag.appendChild(document.createTextNode(content));
if (className)
tag.className = className;
return tag;
// Start of actual answer code:
const section = json.articles
.filter(a => a.name)
.map(a => DOMTag(`article`, content: a.name))
.reduce((p, c, i, a) =>
(p || DOMTag('section',className:`media$a.length`))
.appendChild(c).parentElement
, null);
section.className = `media$section.childNodes.length`
// Validation
console.log(section.outerHTML); // Sample data
const json = articles: [name: 'test',,name: 'test2',,];
// functional helper function to illustrate the example
function DOMTag(tagName, content)
const tag = document.createElement(tagName);
if (content)
tag.appendChild(document.createTextNode(content));
return tag;
// Start of actual answer code:
const section = json.articles
.filter(a => a.name)
.map(el => DOMTag('article', el.name))
.reduce((p,c) => (p.appendChild(c), p), DOMTag('section'))
section.className = `media$section.childNodes.length`
// Validation
console.log(section.outerHTML);// Sample data
const json = articles: [name: 'test',,name: 'test2',,];
// functional helper function to illustrate the example
function DOMTag(tagName, content)
const tag = document.createElement(tagName);
if (content)
tag.appendChild(document.createTextNode(content));
return tag;
// Start of actual answer code:
const section = json.articles
.filter(a => a.name)
.map(el => DOMTag('article', el.name))
.reduce((p,c) => (p.appendChild(c), p), DOMTag('section'))
section.className = `media$section.childNodes.length`
// Validation
console.log(section.outerHTML);// Sample data
const json = articles: [name: 'test',,name: 'test2',,];
// functional helper function to illustrate the example
function DOMTag(tagName, content, className)
const tag = document.createElement(tagName);
if (content)
tag.appendChild(document.createTextNode(content));
if (className)
tag.className = className;
return tag;
// Start of actual answer code:
function section(children)
const section = DOMTag('section',
className: `media$children.length`
);
children.forEach(c => section.appendChild(c));
return section;
const s = section(
json.articles
.filter(a => a.name)
.map(el => DOMTag('article', content: el.name))
)
// Validation
console.log(s.outerHTML);// Sample data
const json = articles: [name: 'test',,name: 'test2',,];
// functional helper function to illustrate the example
function DOMTag(tagName, content, className)
const tag = document.createElement(tagName);
if (content)
tag.appendChild(document.createTextNode(content));
if (className)
tag.className = className;
return tag;
// Start of actual answer code:
function section(children)
const section = DOMTag('section',
className: `media$children.length`
);
children.forEach(c => section.appendChild(c));
return section;
const s = section(
json.articles
.filter(a => a.name)
.map(el => DOMTag('article', content: el.name))
)
// Validation
console.log(s.outerHTML);// Sample data
const json = articles: [name: 'test',,name: 'test2',,];
// functional helper function to illustrate the example
function DOMTag(tagName, content, className)
const tag = document.createElement(tagName);
if (content)
tag.appendChild(document.createTextNode(content));
if (className)
tag.className = className;
return tag;
// Start of actual answer code:
function defaultSection()
let m = false;
return (a = ) =>
if (!m)
m = DOMTag('section', className: `media$a.length`);
return m;
;
const section = json.articles
.filter(a => a.name)
.map(el => DOMTag('article', content: el.name))
.reduce((p,c,i,a) =>
p(a).appendChild(c);
return p;
, defaultSection())();
// Validation
console.log(section.outerHTML);// Sample data
const json = articles: [name: 'test',,name: 'test2',,];
// functional helper function to illustrate the example
function DOMTag(tagName, content, className)
const tag = document.createElement(tagName);
if (content)
tag.appendChild(document.createTextNode(content));
if (className)
tag.className = className;
return tag;
// Start of actual answer code:
function defaultSection()
let m = false;
return (a = ) =>
if (!m)
m = DOMTag('section', className: `media$a.length`);
return m;
;
const section = json.articles
.filter(a => a.name)
.map(el => DOMTag('article', content: el.name))
.reduce((p,c,i,a) =>
p(a).appendChild(c);
return p;
, defaultSection())();
// Validation
console.log(section.outerHTML);answered Nov 9 at 1:28
lucascaro
3,34611530
edited Nov 10 at 0:56
answered Nov 9 at 1:28
lucascaro
3,34611530
answered Nov 9 at 1:28
lucascaro
3,34611530
answered Nov 9 at 1:28
lucascaro
3,34611530
3,34611530
There is a way to pass the array to the callback (a synchronous callback), hence I believe that there should be a way to bindthisto that array. Your workarounds #2 and #3 are intersting (#1 is not chainable), but not much better than my own first solution.
– allez l'OM
Nov 9 at 21:51
That's a fair point. I don't think you can usebindin the way you are thinking but you can take advantage of lazy evaluation of boolean expressions to simplify your initial code. Update the answer with a new option that might be interesting as well.
– lucascaro
Nov 10 at 0:58
1
I don't understand why that answer has been downvoted. At least the comment above is very useful.
– allez l'OM
Nov 10 at 19:28
add a comment |
There is a way to pass the array to the callback (a synchronous callback), hence I believe that there should be a way to bindthisto that array. Your workarounds #2 and #3 are intersting (#1 is not chainable), but not much better than my own first solution.
– allez l'OM
Nov 9 at 21:51
That's a fair point. I don't think you can usebindin the way you are thinking but you can take advantage of lazy evaluation of boolean expressions to simplify your initial code. Update the answer with a new option that might be interesting as well.
– lucascaro
Nov 10 at 0:58
1
I don't understand why that answer has been downvoted. At least the comment above is very useful.
– allez l'OM
Nov 10 at 19:28
There is a way to pass the array to the callback (a synchronous callback), hence I believe that there should be a way to bind
this to that array. Your workarounds #2 and #3 are intersting (#1 is not chainable), but not much better than my own first solution.– allez l'OM
Nov 9 at 21:51
There is a way to pass the array to the callback (a synchronous callback), hence I believe that there should be a way to bind
this to that array. Your workarounds #2 and #3 are intersting (#1 is not chainable), but not much better than my own first solution.– allez l'OM
Nov 9 at 21:51
That's a fair point. I don't think you can use
bind in the way you are thinking but you can take advantage of lazy evaluation of boolean expressions to simplify your initial code. Update the answer with a new option that might be interesting as well.– lucascaro
Nov 10 at 0:58
That's a fair point. I don't think you can use
bind in the way you are thinking but you can take advantage of lazy evaluation of boolean expressions to simplify your initial code. Update the answer with a new option that might be interesting as well.– lucascaro
Nov 10 at 0:58
1
1
I don't understand why that answer has been downvoted. At least the comment above is very useful.
– allez l'OM
Nov 10 at 19:28
I don't understand why that answer has been downvoted. At least the comment above is very useful.
– allez l'OM
Nov 10 at 19:28
add a comment |
draft saved
draft discarded
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53217989%2fjavascript-in-a-chain-how-to-get-size-of-previous-array%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
1
the 4th argument in the reducer function is the source array. developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
– kunal_bohra
Nov 9 at 0:24
@kunal_bohra. Yes, this is how I am using it in my 1st code, but available only in the callback, not in reduce (can't be used for initial value).
– allez l'OM
Nov 9 at 14:05