Looping through an object in react

Question

Learning react

Trying to loop through an object from an API call that returns a json object and display it but struggling to implement it

This is the component that should render it

    export default class ProfilePage extends Component {
  constructor() {
    super();
    this.state = { data: '' };
  }

  mapObject(object, callback) {
    return Object.keys(object).map(function (key) {
        return callback(key, object[key]);
      })

  }

  async componentDidMount() {
    const response = await fetch(`https://indapi.kumba.io/webdev/assignment`);
    const json = await response.json();
    // console.log(json)
    this.setState({ data: json });
    
  }

  

  render() {
    const data = this.state.data
    console.log(data)
    return (
      <div className="row">
          {Object.values(data).map(data => {
              <div key={key}>
                {data[key]}
              </div>
          })

          }
         Woerkkk please
    </div>
    
    );
  }
}

All I'm getting is a blank screen.

in the console i get the error 'key' is not defined no-undef

Do you want to loop through the items present in the response? Looping though the object itself doesn't seem very logical. — 3limin4t0r
– 3limin4t0r, Commented Nov 26, 2020 at 22:53

Daniel Duong · Accepted Answer · 2020-11-26 22:47:11Z

2

You are missing a return statement in your map for your render method. Edit: Key is not returned from Object.values

Either reconfigure with a return statement like so:

{Object.keys(data).map(key => {
          return (<div key={key}>
            {data[key]}
          </div>);
      })

Or alternatively you can implicitly return from arrow function using brackets

{Object.keys(data).map(key => (
          <div key={key}>
            {data[key]}
          </div>)
      ))

edited Nov 26, 2020 at 22:47

answered Nov 26, 2020 at 22:38

Daniel Duong

1,1126 silver badges11 bronze badges

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

2 Comments

Robin Zigmond Over a year ago

That is very true and an excellent point, but doesn't address the basic problem that an undeclared variable, key, is being used.

Bamiji O Over a year ago

Thanks. was able to fix it

José Neto · Accepted Answer · 2020-11-26 22:42:26Z

0

Using Object.values(myObj) you can get all object values as a array. So, with this array, you can iterate over the array and show your items, like this:

{Object.values(myObj).map(value => <p>{value}</p>)}

Don't forget use key prop when iterating.

answered Nov 26, 2020 at 22:42

José Neto

5068 silver badges12 bronze badges

Comments

Sujay Kundu · Accepted Answer · 2020-11-27 06:08:56Z

0

You can use useState and useEffect to fetch the object data

const App = () => {

  const [objData, setObjData] = useState({});
  const [objItems, setObjItems] = useState([]);
  
 const fetchObj = async () => {
     const response = await fetch(`https://indapi.kumba.io/webdev/assignment`);
     const data = await response.json();
     setObjData(data);
     setObjItems(data.items);
    }
    
    useEffect(() => {
       fetchObj()
    },[]);
    
    return(
    <div> 
         <h1> Order Id :{objData.order_id}</h1>  
          // or any other objData keys
             <h1>Items : </h1>
             <ul>
                {
                 objItems.map((i, idx) => {
                 return(
                   <li key={idx}>Name : {i.name} , Category: {i.category}, Price: {i.price}, Currency: {i.currency}</li>
                  )
                })
               }
            </ul>

    </div>
    )
}
export default App;

edited Nov 27, 2020 at 6:08

answered Nov 26, 2020 at 22:48

Sujay Kundu

711 gold badge2 silver badges10 bronze badges

2 Comments

Bamiji O Over a year ago

HI, it worked but when i wanted to render or loop through "items" which is an array of objects withing the json response, i get errorCannot read property '2' of undefined

Sujay Kundu Over a year ago

For items or any array present inside the object, you can create a new state for items like this and fetch it (changed the code):

Collectives™ on Stack Overflow

Looping through an object in react

3 Answers 3

2 Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related