[英]Alphabetically order with header in reactjs
I have a list of items fetched through API which is sorted in alphabetical order, but I want to add header above the list items. 我有一个通过API提取的项目列表,该列表按字母顺序排序,但是我想在列表项目上方添加标题。 For example like below HTML Structure
例如下面的HTML结构
<h4> A</h4 >
<ul>
<li>Apple</li>
<li>Ant</li>
</ul>
<h4>B</h4>
<ul>
<li>Babel</li>
<li>Ball</li>
</ul>
So far I have mapped the list of items like below in function: 到目前为止,我已经在功能中映射了以下项目列表:
filterItems = (itemList) => {
result = result.map((item, index) => (
<li className="brand-item" key={index}><a href="#">
<img onError={this.nobrandimage} src={item.thumbnail} className="img-responsive" /></a>
</li>
))
return result;
}
Below is my render function: 下面是我的渲染函数:
render(){
//code to get the letterkey, I am not sure how to put this in map function to render**
var letters = '', groups = {};
for (var i = 0, len; i < len; i++) {
var letterKey = brands[i].name.charAt(0).toLowerCase(); // get the first letter
if (letters.indexOf(letterKey) === -1) {
letters += letterKey;
groups[letterKey] = [brands[i]];
} else {
groups[letterKey].push([brands[i]]);
}
};
console.log(letters);
let brands = this.props.brands.all_brands
if (brands) brands.sort(this.dynamicSort("name"));
if (brands) len = brands.length
const filteredList = this.filterItems(brands, letters);
return (
<ul>
{filteredList}
</ul>
);
}
Note: I need help to map the first letter to my list in heading tag. 注意:我需要帮助将第一个字母映射到标题标记中的列表。
Sample App Url to have a better view: https://stackblitz.com/edit/react-pfzlvo 示例应用程序网址具有更好的视图: https : //stackblitz.com/edit/react-pfzlvo
Preprocess your brands into a map {letterKey: [brands]} to use in render function. 将您的品牌预处理到地图{letterKey:[brands]}中,以用于渲染功能。
const groups = brands.reduce((groups, brand) => {
const letterKey = brand.name.charAt(0).toLowerCase();
(groups[letterKey] || (groups[letterKey] = [])).push(brand);
return groups;
}, {});
Map the entries of [key, brands] to your unordered list 将[键,品牌]的条目映射到您的无序列表
Object.entries(groups).sort().map(([letterKey, brands]) => (
<div key={letterKey}>
<h4>{letterKey}</h4>
<ul>
{ brands.map(brand => <li key={brand}>{brand}</li>) }
</ul>
</div>
));
const brands = ['cca', 'ccb', 'ccc', 'bba', 'bbb', 'bbc', 'aaa', 'aab', 'aac']; const groups = brands.reduce((groups, brand) => { const letterKey = brand.charAt(0).toLowerCase(); (groups[letterKey] || (groups[letterKey] = [])).push(brand); return groups; }, {}); Object.entries(groups).sort().map(([letterKey, brands]) => { console.log('KEY', letterKey); brands.map(brand => console.log('\\tbrand', brand)); });
After you grouped brands groups = {a: [apple, Ant], b: [Babel, Ball], ...}
you can iterate groups like 在将品牌分组分组
groups = {a: [apple, Ant], b: [Babel, Ball], ...}
您可以像
Object.keys(groups).sort().map(letter, key => (
<div key={key}>
<h4>{letter}</h4>
<ul>
{
groups[letter].map((word, index) => (
<li key={index}>{word}</li>
))
}
</ul>
</div>
))
Object.keys(groups).map(letter, key => (
<div key={key}>
<h4>{letter}</h4>
<ul>
{
groups[letter].map((word, index) => (
<li key={index}>{word}</li>
))
}
</ul>
</div>
))
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.