How to loop through arrays in reactjs

Question

I have a categories array from that I need to print Category ,category name, pictures and videos and comments.

this is my array

import React from 'react';  
    
function App() {  
    
 const categories = [
  {
      "Lots and Grounds": [
          {
              "categoryName": "Lots and Grounds",
              "prompt": "PORCH",
              "description": "Concrete",
              "rating": "Defective",
              "ratingAbbreviation": "T",
              "ratingColor": "#212121",
              "answerText": "bla bla blaaaaaa",
              "showOnSummary": "1",
              "isRepairSelected": 1,
              "repairAmountEntered": "110",
              "repairCommentEntered": null,
              "categoryDisclaimer": "bla bla bl;aaaaa",
              "subCategory": null,
              "pictures": [
                  "IMG_0856.JPG",
                  "IMG_0831.JPG",
                  "IMG_0848.JPG"
              ],
              "videos": [],
              "picture_decorations": {
                  "IMG_0856.JPG": [
                      {
                          "decoration_type": "0",
                          "decoration_color": "#D81919",
                          "decoration_begin_vertical": "0.41",
                          "decoration_begin_horizontal": "0.29",
                          "decoration_end_vertical": "0.64",
                          "decoration_end_horizontal": "0.40"
                      }
                  ],
                  "IMG_0831.JPG": [
                      {
                          "decoration_type": "0",
                          "decoration_color": "#D81919",
                          "decoration_begin_vertical": "0.25",
                          "decoration_begin_horizontal": "0.57",
                          "decoration_end_vertical": "0.47",
                          "decoration_end_horizontal": "0.52"
                      }
                  ],
                  "IMG_0848.JPG": [
                      {
                          "decoration_type": "1",
                          "decoration_color": "#D81919",
                          "decoration_begin_vertical": "0.08",
                          "decoration_begin_horizontal": "0.29",
                          "decoration_end_vertical": "0.45",
                          "decoration_end_horizontal": "0.71"
                      }
                  ]
              }
          },
          {
              "categoryName": "Lots and Grounds",
              "prompt": "VEGETATION",
              "description": "Trees, Shrubs",
              "rating": "Marginal",
              "ratingAbbreviation": "T",
              "ratingColor": "#212121",
              "answerText": "answer text here",
              "showOnSummary": "1",
              "isRepairSelected": 1,
              "repairAmountEntered": "1",
              "repairCommentEntered": null,
              "categoryDisclaimer": " disclaimer text here.",
              "subCategory": null,
              "pictures": [],
              "videos": [],
              "picture_decorations": []
          }
      ]
  }
];  
    
  return (  
    <div className="container">  
  <h1>CATEGORIES</h1>  
{categories.map((category, index) => (  
<div data-index={index}> 
<p>Category: Lots and Grounds): </p>  
<p>CategoryName {1} {category.categoryName}(for eg: )</p>  
<p>Prompt  {category.prompt}(for eg:PORCH )</p>  
<p>Pictures(from pictutes array): {}</p>  
<p>Picture decorations(from pictutes decorations array): {} </p>  
<p>Videos(from videos array): {} </p> 
<p>Credits: {category.repairAmountEntered} </p> 
<p>Comments: {category.repairCommentEntered} </p> 

</div>  
))}  


</div>  
);  
}  

export default App;

here is the sandbox link for this. KIndly help https://codesandbox.io/s/quirky-silence-qhbf2?file=/src/App.js

I need result as something like this(in driveway place prompt name appears)

Does this answer your question? Iterate through array in Reactjs — keikai
– keikai, Commented Dec 17, 2021 at 9:02

Ram Rana · Accepted Answer · 2021-12-17 09:27:20Z

import "./styles.css";

import React from "react";

function App() {
  const categories = [
    {
      "Lots and Grounds": [
        {
          categoryName: "Lots and Grounds",
          prompt: "PORCH",
          description: "Concrete",
          rating: "Defective",
          ratingAbbreviation: "T",
          ratingColor: "#212121",
          answerText: "bla bla blaaaaaa",
          showOnSummary: "1",
          isRepairSelected: 1,
          repairAmountEntered: "110",
          repairCommentEntered: null,
          categoryDisclaimer: "bla bla bl;aaaaa",
          subCategory: null,
          pictures: ["IMG_0856.JPG", "IMG_0831.JPG", "IMG_0848.JPG"],
          videos: [],
          picture_decorations: {
            "IMG_0856.JPG": [
              {
                decoration_type: "0",
                decoration_color: "#D81919",
                decoration_begin_vertical: "0.41",
                decoration_begin_horizontal: "0.29",
                decoration_end_vertical: "0.64",
                decoration_end_horizontal: "0.40"
              }
            ],
            "IMG_0831.JPG": [
              {
                decoration_type: "0",
                decoration_color: "#D81919",
                decoration_begin_vertical: "0.25",
                decoration_begin_horizontal: "0.57",
                decoration_end_vertical: "0.47",
                decoration_end_horizontal: "0.52"
              }
            ],
            "IMG_0848.JPG": [
              {
                decoration_type: "1",
                decoration_color: "#D81919",
                decoration_begin_vertical: "0.08",
                decoration_begin_horizontal: "0.29",
                decoration_end_vertical: "0.45",
                decoration_end_horizontal: "0.71"
              }
            ]
          }
        },
        {
          categoryName: "Lots and Grounds",
          prompt: "VEGETATION",
          description: "Trees, Shrubs",
          rating: "Marginal",
          ratingAbbreviation: "T",
          ratingColor: "#212121",
          answerText: "answer text here",
          showOnSummary: "1",
          isRepairSelected: 1,
          repairAmountEntered: "1",
          repairCommentEntered: null,
          categoryDisclaimer: "disclamer text here",
          subCategory: null,
          pictures: [],
          videos: [],
          picture_decorations: []
        }
      ]
    }
  ];

  return (
    <div className="container">
      <h1>CATEGORIES</h1>
      {categories.map((category, categoryIndex) => {
        return (
          <div key={categoryIndex}>
            {Object.keys(category).map((key, childIndex) => {
              return (
                <div key={childIndex}>
                  {category[`${key}`].map((result, index) => {
                    console.log(result);
                    return (
                      <div data-index={index}>
                        <p>Category: Lots and Grounds): </p>
                        <p>
                          CategoryName {1} {result.categoryName}(for eg: )
                        </p>
                        <p>Prompt {result.prompt}(for eg: )</p>
                        <p>
                          Pictures(from pictutes array):{" "}
                          {result?.pictures?.map((picture, picutreIndex) => {
                            return <div key={picutreIndex}>{picture}</div>;
                          })}
                        </p>
                        <p>
                          Picture decorations(from pictutes decorations array):{" "}
                          {}{" "}
                        </p>
                        <p>
                          Videos(from videos array):
                          {result?.videos?.map((video, videoIndex) => {
                            return <div key={videoIndex}>{video}</div>;
                          })}{" "}
                        </p>
                        <p>Credits: {result.repairAmountEntered} </p>
                        <p>Comments: {result.repairCommentEntered} </p>
                      </div>
                    );
                  })}
                </div>
              );
            })}
          </div>
        );
      })}
    </div>
  );
}

export default App;

Nicola Scionti · Accepted Answer · 2021-12-17 09:10:00Z

1

If the structure of the JSON remains the same for every category, you can replace category with Object.values(category)[index][0] or Object.values(category)[index][1] inside jour JSX map function:

return (  
<div className="container">  
<h1>CATEGORIES</h1>  
{categories.map((category, index) => (  
    <div data-index={index}>
      <p>Category: {Object.keys(category)[index]}: </p>
      <p>
        CategoryName {1} {Object.values(category)[index][0].categoryName}(for eg: )
      </p>
      <p>Prompt {Object.values(category)[index][1].prompt}(for eg: )</p>
      <p>Pictures(from pictutes array): {Object.values(category)[index][1].pictures}</p>
      <p>Picture decorations(from pictutes decorations array): {Object.values(category)[index][1].picture_decorations} </p>
      <p>Videos(from videos array): {Object.values(category)[index][1].videos} </p>
      <p>Credits: {Object.values(category)[index][0].repairAmountEntered} </p>
      <p>Comments: {Object.values(category)[index][1].repairCommentEntered} </p>
    </div>
  ))}
</div>

</div>  
))}

edited Dec 17, 2021 at 9:10

answered Dec 17, 2021 at 9:01

Nicola Scionti

5462 silver badges15 bronze badges

3 Comments

SkRoR Over a year ago

it will dispaly results of this case only, if i have more sub categories this will not work

Nicola Scionti Over a year ago

check the edit with index

SkRoR Over a year ago

Only Working for one case.Thank you for helping me.

Collectives™ on Stack Overflow

How to loop through arrays in reactjs

2 Answers 2

2 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related