循环遍历嵌套数组
Looping through Nested array
我有一个嵌套数组,如下所示。我试图首先循环顶层数组并获得groupValue,然后对于每个组值,我需要循环遍历docs数组并获得每个文档的标题。
嵌套数组示例:
[ { groupValue: 'Heading1',
doclist: { numFound: 958, start: 0, maxScore: 1.2041028, docs: [Object] } },
{ groupValue: 'Heading2',
doclist: { numFound: 8700, start: 0, maxScore: 0.50214005, docs: [Object] } },
{ groupValue: 'Heading3',
doclist: { numFound: 1138, start: 0, maxScore: 0.48008662, docs: [Object] } } ]
预期输出:Heading1:
iphone
samsung
Heading2:
motorola
ipad
我尝试了下面的方法,我能够返回所有子元素,但我不确定如何从父数组返回标题以及相应的子元素。
var values=groups.map(function(item,i) {
let docs=groups[i].doclist.docs
console.log(groups[i].groupValue);
return docs.map(function(item,i) {
return (<div key={i}>{docs[i].title}</div>);
})
});
下面是一个应该呈现您想要的内容的示例:
class Example extends React.Component {
render() {
const groups = [{ groupValue: 'Heading1', doclist: { numFound: 958, start: 0, maxScore: 1.2041028, docs: [{title: 'iphone'}, {title: 'samsung'}] } },
{ groupValue: 'Heading2', doclist: { numFound: 8700, start: 0, maxScore: 0.50214005, docs: [{title: 'motorola'}, {title: 'ipad'}] } }];
let values = groups.map((item, i) => {
let docs = groups[i].doclist.docs;
let doc = docs.map((item, i) => <li key={i}>{docs[i].title}</li>);
return (
<div>
<h3>{groups[i].groupValue}</h3>
<ul>{doc}</ul>
</div>
);
});
return <div>{values}</div>;
}
}
ReactDOM.render(<Example/>, document.getElementById('View'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react-dom.min.js"></script>
<div id="View"></div>
<script type="text/javascript">
var groups = [ { groupValue: 'Heading1',
doclist: { numFound: 958, start: 0, maxScore: 1.2041028, docs: [Object] } },
{ groupValue: 'Heading2',
doclist: { numFound: 8700, start: 0, maxScore: 0.50214005, docs: [Object] } },
{ groupValue: 'Heading3',
doclist: { numFound: 1138, start: 0, maxScore: 0.48008662, docs: [Object] } }];
// NORMAL LOOPING USING forEach
groups.forEach(function(a, b){
var headings = a.groupValue;
var docList = a.doclist;
var docs = docList.docs;
var start = docList.start;
var maxScore = docList.maxScore;
var numFound = docList.numFound;
var docTitle = docs.title;
// YOU CAN USE THE VALUES AS YOU WISH...
console.log(docs);
});
// USING ARRAY map FOR REACT.JS
var values = groups.map(function(item, i) {
let docs = item.doclist.docs;
let headings = item.groupValue;
let doc = docs.map(function(objDoc, n){
return (<p key={n}>{objDoc.title}</p>);
});
return (
<div key={i}>
<h3>{headings}</h3>
{doc}
</div>
);
});
</script>
您还可以将数据提取与呈现分开,这将使其更具可读性。
function prepareData(groups) {
return groups.map(group => {
return {
heading: group.groupValue,
items: group.doclist.docs.map(doc => doc.title)
};
});
}
现在渲染
render() {
const groups = [
{ groupValue: 'Heading1',
doclist: { numFound: 958, start: 0, maxScore: 1.2041028, docs: [Object] } },
{ groupValue: 'Heading2',
doclist: { numFound: 8700, start: 0, maxScore: 0.50214005, docs: [Object] } },
{ groupValue: 'Heading3',
doclist: { numFound: 1138, start: 0, maxScore: 0.48008662, docs: [Object] } }];
const dataToShow = prepareData(groups);
return (
<div>
{
dataToShow.map(group =>
<h3>{group.heading}</h3>
<ul>{group.items.map(item => <li>{item}</li>}</ul>
)
}
</div>
);
}
相关文章:
- 从多维嵌套json数组创建下拉列表
- 如何通过json对象数组为嵌套对象赋值
- 为循环嵌套的Javascript未按预期返回数组
- 具有嵌套对象数组的 Javascript 对象的递归搜索函数
- 将js对象更改为使用嵌套的可观察数组敲除js视图模型
- MongoDB嵌套对象数组后查询
- 从对象数组中动态创建嵌套json
- 使用Angular.js解析JSON中的嵌套对象数组
- 如何将id数组与带下划线的对象数组嵌套属性进行比较
- 将JS对象数组转换为嵌套形式的最有效方法
- 在javascript/angular中创建播放列表(按值复制数组,但按引用设置嵌套对象)
- 嵌套在 ng 重复中的拼接数组
- JavaScript格式的对象数组嵌套到子对象中
- JSON 将对象数组嵌套到表
- 如何获取数组嵌套对象子对象的父对象| MeteorJs-Astronomy
- 从数组嵌套JSON
- 使用AngularJS的JSON对象在数组嵌套在一个数组中,我怎么能得到数据到html
- 深入研究JavaScript中的一组嵌套对象
- 如何获得数组嵌套在对象的总和
- 将数组嵌套到主干模型中