I am having trouble accessing nested objects within arrays within objects

Question

I am quite new, this is my first question post I was hoping someone else will of had a similar problem.

I am receiving api data and turning into the JSON format. From that I can access the keys & values within an object (each monster)

hit_points: 17   (key: value)
hit_dice: "5d6"   (key: value)
speed: {fly: 40, walk: 20}   (object)

special_abilities: Array(1)
  0:
   desc: "some text"
   name: "One with Wind"

I am able to access special_abilities[0].name, in this case i get back "One with Wind".

What I cannot work out how to do is when I get more then one ability how to display all 3 without crashing the script when a monster has only 1 ability.

import React, {useState, useEffect} from 'react';
import './App.css';

function currentMonster({match}) {
    const [item, setItem] = useState([]);
    useEffect (() => {
        fetchMonster();
    }, []);

const fetchMonster  = async () => {
    const mob = match.params.id.toLowerCase();
    const fetchMonster = await fetch(`https://api.open5e.com/monsters/${mob}/?format=json`)
    const monster = await fetchMonster.json();
    setItem(monster)
    console.log(monster);
// const abilities = monster.special_abilities[0].name
}
    return (
            <div>
                <h1>{item.name}</h1>
                <p>Size: {item.size}</p>
                <p>Race: {item.type}</p>
                <p>Alignment: {item.alignment}</p>
                <p>Armor Class: {item.armor_class}</p>
                <p>Hit points: {item.hit_points}</p>
                <p>Hit dice: {item.hit_dice}</p>
                <p>Strength: {item.strength}</p>
                <p>Dexterity: {item.dexterity}</p>
                <p>Constitution: {item.constitution}</p>
                <p>Intelligence: {item.intelligence}</p>
                <p>Wisdom: {item.wisdom}</p>
                <p>Charisma: {item.charisma}</p>
                <p>Senses: {item.senses}</p>
                <p>CR: {item.challenge_rating}</p>
            </div>
        )
    }


  export default currentMonster;

This is the code I have currently, I wish to add another <p></p> on the list displaying each special ability and desc of the monsters, and when they have more then one ability those also.

Before asking I have tried to:

const [ability, setAbility] = useState([]);
setAbility(monster.special_abilities[0])
and then <p>{ability.name}</p>

while this works for one monster, if the monster has more then one ability I cannot see them. If the monster has less then two abilities and I log say [0][1][2] the website crashes.

I hope someone can help me with this while questions similar to this have been asked before in stack overflow I have not been able to find inspiration or an answer.

Kind regards,

Sheep

I think you can do things like, var rows = []; for (var i = 0; i < numrows; i++) { rows.push(ObjectRow()); } I wanted to run a for loop to iterate though the array but that just throws up errors. such as not being able to read 'undefined' referring to the array. — Sheep Snow
– Sheep Snow, Commented Mar 23, 2020 at 11:13
You are fetching one monster but trying to render an array of monsters. You even call it item and monster (not plural items and monsters) yet set item to an array but the api will not give you an array, it will give you a single monster. — HMR
– HMR, Commented Mar 23, 2020 at 11:14
Oh, not thats not true the API link was just to see what API i was using i guess i caused confusion, i mean to say I am searching for just one monster by replacing the URL component with the monsters name: https://api.open5e.com/monsters/${mob}/?format=json) so each time the api runs it is getting just one "item" or monster — Sheep Snow
– Sheep Snow, Commented Mar 23, 2020 at 11:17

HMR · Accepted Answer · 2020-03-23 11:26:07Z

1

Here is an example of how to fetch monster when current changes, you can get current from match.params.id but I don't want to make a routed example to demonstrate. Note that I am using monster.slug, this may not be the same as monster name. You should use monster.slug as well because that's what the api uses.

Make sure that current is a dependency of your effect so it'll re run when it changes. I don't think you have your development environment set up correctly because the code you are showing has missing dependencies and your editor should have warned you

const { useState, useEffect } = React;

const App = () => {
  const [current, setCurrent] = useState('aatxe');
  //you can do:
  //const current = match.params.id.toLowerCase();
  const [item, setItem] = useState(null);
  useEffect(() => {
    //SO code snippet doesn't have recent babel, so no
    // async await support in snippet code, changed to
    // promise
    const fetchMonster = () =>
      fetch(
        `https://api.open5e.com/monsters/${current}/?format=json`
      )
        .then(response => response.json())
        .then(setItem);
    fetchMonster();
  }, [current]);

  return (
    <div>
      <select
        value={current}
        onChange={e => setCurrent(e.target.value)}
      >
        <option value="aatxe">Aatxe</option>
        <option value="aboleth">Aboleth</option>
      </select>
      {item && (
        <div>
          <h1>{item.name}</h1>
          <ul>
            {item.special_abilities.map(
              (ability, index) => (
                <li key={index}>{ability.name}</li>
              )
            )}
          </ul>
        </div>
      )}
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="root"></div>

answered Mar 23, 2020 at 11:26

HMR

39.5k26 gold badges99 silver badges175 bronze badges

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

2 Comments

Sheep Snow Over a year ago

Thank you HMR, While I have not had time to go over it in detail yet I plugged in what you have made and it gives back the same answer in my environment also, I am not sure what I am missing I thought babel was installed properly but I do get the message ... React Hook useEffect has a missing dependency: 'fetchMonster'. Either include it or remove the dependency array. but that is the only error that comes up. anyway thank you alot!

HMR Over a year ago

Yes, in your original code fetchMonster is a dependency of the effect but not in my code. The only dependency is current and that should be the monster.slug you want to search for. Adding that as a dependency means the effect will run any time that changes.

Collectives™ on Stack Overflow

I am having trouble accessing nested objects within arrays within objects

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related