Not able to iterate over object using map

Question

I am trying to render a table using a data collection "Posts". I want to use the map method returns a new array by applying the callback function on each element of an array, while the forEach method doesn’t return anything. Could someone shed a light how to print the following collection?. Thanks

0:
fields: {title: {…}, description: {…}}
metadata: {tags: Array(1)}
sys: {space: {…}, id: '3Nkel8Pkog5UK3r4DPFD0b', type: 'Entry', createdAt: '2022-05-16T13:43:08.257Z', updatedAt: '2022-05-18T09:21:02.302Z', …}
[[Prototype]]: Object
1: {metadata: {…}, sys: {…}, fields: {…}}
2: {metadata: {…}, sys: {…}, fields: {…}}
3: {metadata: {…}, sys: {…}, fields: {…}}
4: {metadata: {…}, sys: {…}, fields: {…}}
5: {metadata: {…}, sys: {…}, fields: {…}}
6: {metadata: {…}, sys: {…}, fields: {…}}
7: {metadata: {…}, sys: {…}, fields: {…}}
length: 8
[[Prototype]]: Array(0)

{
"title": {
    "en-US": "Test Metadata "
},
"description": {
    "en-US": {
        "data": {},
        "content": [
            {
                "data": {},
                "content": [
                    {
                        "data": {},
                        "marks": [],
                        "value": "Reference Description",
                        "nodeType": "text"
                    }
                ],
                "nodeType": "paragraph"
            }
        ],
        "nodeType": "document"
    }
}

}

import { Table } from '@contentful/f36-components';
import { PageExtensionSDK } from '@contentful/app-sdk';
import { useCMA, useSDK } from '@contentful/react-apps-toolkit';

const Page = () => {
  const sdk = useSDK<PageExtensionSDK>();
  const cma = useCMA();
  const [posts, setPosts] = useState([])

  useEffect(()=> {
    cma.entry.getMany({
      query:{
        content_type: 'title'
      },        
    })
    .then((data:any) => {
      if (data.items.length) { setPosts(data.items) }
    })
  });

  // posts.forEach((key, index) => {
  //   console.log('${key}: ${posts[key]}');
  // });

  return(
      <Table className="postTable">
          <Table.Head>
            <Table.Row>
              <Table.Cell>Entry Name</Table.Cell>
              <Table.Cell>Last Activity</Table.Cell>              
            </Table.Row>
          </Table.Head>
          {
            <Table.Body>
              {posts.map((post:any) => {
                return (
                  <Table.Row key={post['title']}>
                    <Table.Cell>{post['description']}</Table.Cell>
                    <Table.Cell>{post['description'] || "Column 2"}</Table.Cell>
                  </Table.Row>
                );
              })}

          </Table.Body>          
          }
      </Table>
  )
};

export default Page;

What is `data.items` here? There’s nothing shown with an `items` property. — Dave Newton, May 18 '22 at 10:54
you said "the map method returns a new array by applying the callback function on each element of an array", but the data you posted is not an array. Are you actually dealing with an array, and you posted just 1 item as example? — GrafiCode, May 18 '22 at 11:02
Assuming post.description is as above, you need a strategy for how to display the "nodeType=paragraph" and "nodeType=text" nodes, as there could be several by the looks of the structure. — James, May 18 '22 at 11:49

score 0 · Answer 1 · answered May 18 '22 at 11:06

0

Dont treat "post" inside map as an array because it is not. It's an object. Try something like this:

    {posts.map((post) => {
            return (
              <Table.Row key={post.title}>
                <Table.Cell>{post.description}</Table.Cell>
                <Table.Cell>{post.description || "Column 2"}</Table.Cell>
              </Table.Row>
            );
          })}

answered May 18 '22 at 11:06

Voyak

148
1
1
11

It throws the below error. TS2339: Property 'description' does not exist on type 'never'. – Steve May 18 '22 at 11:17
Are you sure that when it is rendering the array is not empty? On initial render it is so place condition before map like this {posts.length > 0 ? posts.map ....rest of the code} – Voyak May 18 '22 at 11:45
.then((data:any) => { if (data.items.length) { setPosts(data.items) } }) This condition taken care of that. – Steve May 18 '22 at 12:57

Not able to iterate over object using map

1 Answers1