CODEWITHSUNDEEP
javascriptarraysreactjsmultidimensional-array
Learner
Learner

Reputation: 2339

Looping through Nested array

I have a nested array as below. I am trying to first loop the top level array and get the groupValue and then for every group value I need to loop over the docs array and get the title for each document.

Nested array example:

[ { 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] } } ]

Expected Output:

Heading1:
iphone
samsung

Heading2:
motorola
ipad

I tried the below approach and I was able to return all child elements but I am not sure how to return the heading from the parent array along with the corresponding child elements.

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>);
    })
});

Upvotes: 0

Views: 1066

Answers (3)

Doppio
Doppio

Reputation: 2188

You could also separate data extraction from render, which will make it more readable. 

function prepareData(groups) {
  return groups.map(group => {
    return {
      heading: group.groupValue,
      items: group.doclist.docs.map(doc => doc.title)
    };
  });
}

Now render

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>
  );
}

Upvotes: 0

Poiz
Poiz

Reputation: 7617

<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>

Upvotes: 0

Fabian Schultz
Fabian Schultz

Reputation: 18556

Here's an example that should render what you wanted:

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>

Upvotes: 2

Related Questions