How to access object properties of 'key' object reactJS

Question

Would like to output this JSON data

I am struggling to find a way to output this data which I am pulling from Firebase, mostly in that I do not know how to select the objects within the 'date' object. Firebase generates these keys automatically: -LMgzJGM78f0BHbPf8cc.

I am not able to output the properties of the objects named as above^ I have tried using nested for(in) loops.

Here is the code I am using currently:

To pull the data from the database

 componentDidMount() {
    axios.get('./tasks.json')
      .then(response => {
        const fetchedTasks = [];
        for (let date in response.data) {
          fetchedTasks.push({
            ...response.data[date],
            date: date,
          });
          for (let item in response.data[date]) {
            fetchedTasks.push({
              ...response.data[date[item]],
              id: item
            })
          }
        }
        this.setState((prevState, props) => {
          return {
            taskList: fetchedTasks,
            loading: false
          }
        })
      })
      .catch(error => console.log(error));
  }

Mapping the state to a JSX element, only outputs like props.name:

  {this.state.taskList.map((array, index) => (
            <CompleteTask
              key={array.date}
              taskName={array.date}
            />
          ) )
        }

Here is an example the data as a JSON file, it is set to the state in my app:

{
  "tasks" : {
    "09182018" : {
      "-LMgzJGM78f0BHbPf8cc" : {
        "hours" : 0,
        "end" : "2018-09-18T14:02:25.022Z",
        "minutes" : 0,
        "name" : "sadflkjdsalkf",
        "seconds" : 2,
        "start" : "2018-09-18T14:02:22.508Z"
      },
      "-LMgzaEYe0tcCjpxOuPU" : {
        "hours" : 0,
        "end" : "2018-09-18T14:03:38.635Z",
        "minutes" : 0,
        "name" : "safd",
        "seconds" : 2,
        "start" : "2018-09-18T14:03:36.353Z"
      }
    },
  }
}

The properties of the key elements -LMgzaEYe0tcCjpxOuPU I am unsure of how to access, these data are created by another part in my app, should I move to a more shallow state to output the properties of 'hours','name', mintutes etc. or is there a way to access it as it is now?

Many thanks in advance.

connexo · Accepted Answer · 2018-09-25 12:59:35Z

6

Are you asking how to access properties with problematic names like -LMgzJGM78f0BHbPf8cc?

If so, instead of the object.property notation, you can access object properties by the property name using the square brackets syntax:

let obj = { color: 'blue' }

let prop = 'color'

console.log(obj.color);
console.log(obj['color']);
console.log(obj[prop]);

If not, please try to make more clear what your current problem is.

answered Sep 25, 2018 at 12:59

connexo

57.2k15 gold badges112 silver badges149 bronze badges

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

Comments

Taras Yemets · Accepted Answer · 2018-09-25 13:26:16Z

3

I'd suggest to transform the object received from the Firebase to array in this way:

const formattedTasks = [];

const tasks = Object.values(data.tasks);

tasks.forEach(task =>
  Object.entries(task).forEach(([key, value]) =>
    formattedTasks.push({ name: key, data: value })
  )
);

So, you'll map through formattedTasks array.

Here's a working example: https://codesandbox.io/s/l348nnkv9q

answered Sep 25, 2018 at 13:26

Taras Yemets

764 bronze badges

Comments

Yura · Accepted Answer · 2018-09-25 13:13:55Z

1

Since the keys in those objects are unknown, it may be useful to use Object.keys(). Try something like this in your JSX:

Given:

const data = {
  "tasks" : {
    "09182018" : {
      "-LMgzJGM78f0BHbPf8cc" : {
        "name" : "Task One",
      },
      "-LMgzaEYe0tcCjpxOuPU" : {
        "name" : "Task Two",
      }
    },
  }
};

JSX:

<ul>
    {Object.keys(data.tasks).map((date) => {
        const dayTasks = tasks[date];
        return Object.keys(dayTasks).map((key) => {
            const task = dayTasks[key];
            return (
              <li>{task.name}</li>
            )
        })
    })}
</ul>

edited Sep 25, 2018 at 13:13

answered Sep 25, 2018 at 13:07

Yura

2,71126 silver badges32 bronze badges

Comments

Dez · Accepted Answer · 2021-12-30 14:05:03Z

0

          <div>
           {
              Object.entries(slot).map(([key, value]) =>
              <div>
                {console.log("key", key)}
                <span>{key}</span>
                <div>
                
                {value.map(g => (
                  <div>{console.log("g", g.eTime)}
                  <span>{g.eTime}</span>
                  </div>
                ))}
                </div>
              </div>
            )
           }
         </div>

answered Dec 30, 2021 at 14:05

Dez

213 bronze badges

1 Comment

Community Over a year ago

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

Collectives™ on Stack Overflow

How to access object properties of 'key' object reactJS

4 Answers 4

Comments

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related