React: Iterate over object, find array, and display array items

Question

I'm trying to iterate over an object being return by the axios call to "/Home/NewsNotes".

Response from Axios

I'm able to display the property names to the screen, but I'm having issues accessing the "NewsNotes" array.

Here's my code for my component.

class ReleaseDetailsComponent extends React.Component {
constructor(props) {
    super(props);
    this.state = {
        releaseNotes: {}
    };
}

componentDidMount() {
    var _this = this;
    const urlParams = new URLSearchParams(window.location.search);
    const currCatId = urlParams.get('categoryId');
    axios.get('/Home/NewsNotes?categoryId=' + currCatId)
        .then(response => _this.setState(
            { releaseNotes: response.data }
        ))
        .catch(function (error) {
            console.log(error);
        });
    console.log(currCatId);
}

render() {
    return (
        <section>
            <div className="row">
                <div className="col-sm-8 col-sm-offset-2 col-md-10 col-md-offset-1">
                    <h2 className="page-title tutorials"><img className="title-icon" src="/Content/images/icons/icon-release-notes.png" /> News & Release Notes</h2>
                    <h3>{this.state.releaseNotes.Title}</h3>
                    {Object.keys(this.state.releaseNotes).map(function (item, key) {
                        return (
                            <p>{item}</p>
                        );
                    })}
                </div>
            </div>
        </section>
    );
  }
}

ReactDOM.render(
<ReleaseDetailsComponent />,
document.getElementById('tutorialsWrapper')
);

access it using this.state.releaseNotes.NewsNotes

Rei Dien
– Rei Dien

2017-05-18 00:14:41 +00:00
Commented May 18, 2017 at 0:14 — Rei Dien
– Rei Dien, Commented May 18, 2017 at 0:14

James H. · Accepted Answer · 2017-05-18 05:05:09Z

0

I assume the object which you retrieved from URL using axios will look like:

var releaseNotes = {
    NewsNotes: [
        "Buy some milk": "data 1",
        "Clean kitchen": "data 2",
        "Watch Netflix": "data 3"
    ],
    NewsNotesCategoryId: 3,
    SortOrder: null,
    Title: "1.0.1",
    TypeId: 2
};

Next, you can inject "this" into map method as follow, check for any child array, then push each JSX block into the temp array in order to return later:

{Object.keys(this.state.releaseNotes).map((key, idx) => {
    var temp = [];
    temp.push(<p>{key}</p>);

    if (Array.isArray(this.state.releaseNotes[key])) {
        this.state.releaseNotes[key].map(ckey => {
            temp.push(<p>{ckey}</p>);
        });
    }

    return temp;
}, this)}

answered May 18, 2017 at 5:05

James H.

4818 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

James H. Over a year ago

So it is just the matter of what you would like to get. For example, I would like to take Body for the list, then in the if statement:

this.state.releaseNotes[key].map((key, idx) => {                               temp.push(<p>{key.Body}</p>);                            });

Ravindra Ranwala · Accepted Answer · 2017-05-18 02:16:22Z

0

You can't render an array of elements using keys. Rather map over the array and print them like this.

renderReleaseNotes() {
  return _.map(this.state.releaseNotes, releaseNote => {
    return (
      <p>releaseNote.title</p>

    );
  });
}

Hope this helps. Happy coding !

answered May 18, 2017 at 2:16

Ravindra Ranwala

21.2k7 gold badges50 silver badges65 bronze badges

Collectives™ on Stack Overflow

React: Iterate over object, find array, and display array items

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related