score:0

the response you are getting from your server shows that you are not getting an array but instead 1 artist. you need to make your server return an array of books info. so your json response would be:

[
    {
      "id":"1",
      "author": "j.k rowling",
      "title": "harry potter",
      "pages":"7000"
    },
    {
      "id":"2",
      "author": "a.k sayomh",
      "title": "singer role",
      "pages":"10000"
    },
    //...
]

then in your ag-grid you can then use the .map function like you were doing.

if you don't get an array of books info then that api is not meant for your use case.

let's say the api return an object if the total amount of data is 1 and an array if more. then what you could do it.

useeffect(() => {
  fetch(http://fakeapi.com/)
      .then(res => res.json())
      .then(json => array.isarray(json)
        ? json.map(res => ({
            author: res.author,
            title: res.title,
            id: res.id,
            pages: res.pages,
          ))
        : [json]
      ).then(res => setrowdata(res));
}, []);

Related Query

More Query from same tag