How to Manage the response of the API in react?

Question

i did a request to the API, then the response is as the following:

data1 = [{id: 1, code:1, title:title1}, {id:2, code:3, title:title2}, ...]

Now i would like to extract an array of the titles of the above response as below:

titles = [title1, title2, ....]

how can i do it by map?

And the second question:

Consider if the response would be as follow:

data2 = [{id: 1, code:1, title:title1, chapters:[{id:1, chapter: chapter1},{id:2, chapter: chapter2}, ...]}, {id:4, code:5, title:title3, chapters:[{id:4, chapter: chapter3}, ...]}, ...]

In this case how can i extract an array of the chapters as following:

chapters = [chapter1, chapter2, chapter3]

I tried to do them as below:

for the first question:

title = data1.map((item) => {item.title})

for the second one i did:

chapters = data2.chapters.map((item) => {item.chapter})

But it doesn't work. I think some where there are error in syntaxes.

Can any one help me how to manage these data? Thank you.

score 1 · Answer 1 · answered Dec 19 '20 at 00:04

1

You are not returning a value. Try removing braces like so...

title = data1.map((item) => item.title)

chapters = data2.chapters.map((item) => item.chapter)

See this for more info on the issue: Meaning of curly braces in array.map()

answered Dec 19 '20 at 00:04

Nathan Hall

409
2
8
17

Thank you for your comments. Is it possible to write as following in the setState this.setState({ data1: response1.data1, titles: this.state.data1.map((item)=> item.title), }); i did it but i checked by console.log(this.state.titles), the array is empty. – Mosen Dec 19 '20 at 00:37
1

@Mosen don’t call state inside setState. Instead, use function to access previous state. Another option is to get value needed outside setState in variable. https://stackoverflow.com/questions/51817798/this-state-inside-setstate-reactjs – Nathan Hall Dec 19 '20 at 00:43
Yes, i did Now it works perfect! Tahnk you so much. – Mosen Dec 19 '20 at 00:57

score 1 · Accepted Answer · answered Dec 19 '20 at 00:07

Yep, you are wrong with syntax.

Firs case - title = data1.map((item) => {item.title}) You've wrapped item.title with {}, so you should add return. Or omit {}. For example: title = data1.map(item => item.title)

Second case - same issue with {}, but you should also use flatMap because you need flat list in result. If you write with regular map - you won't get desired ["chapter1", "chapter2"].

See also detailed example below.

const data1 = [
  { id: 1, code: 1, title: "title1" },
  { id: 2, code: 3, title: "title2" }
];
const data1_mapped = data1.map(d => d.title);
console.log(data1_mapped);

const data2 = [
  {
    id: 1,
    code: 1,
    title: "title1",
    chapters: [{ id: 1, chapter: "chapter1" }, { id: 2, chapter: "chapter2" }]
  },
  {
    id: 2,
    code: 2,
    title: "title2",
    chapters: [{ id: 1, chapter: "chapter22" }, { id: 2, chapter: "chapter32" }]
  }
];
const data2_mapped = data2.flatMap(d => d.chapters.map(c => c.chapter));
console.log(data2_mapped);

Thank you for your comments. Is it possible to write as following in the setState this.setState({ data1: response1.data1, titles: this.state.data1.map((item)=> item.title), }); — Mosen, Dec 19 '20 at 00:31

How to Manage the response of the API in react?

2 Answers2