Looping through Nested array

Question

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

You're nearly there. You can build the JSX (what you call React HTML) before you return statement for the child elements. The answers below are valid but I've added one of my own where I've just modified your assignment to the values var. — Pineda
– Pineda, Commented Oct 28, 2016 at 22:37

Fabian Schultz · Accepted Answer · 2016-10-28 21:29:58Z

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>

Poiz · Accepted Answer · 2016-10-28 21:43:15Z

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

Doppio · Accepted Answer · 2016-10-29 13:11:46Z

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

Collectives™ on Stack Overflow

Looping through Nested array

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related