Как получить доступ к свойствам объекта «ключевой»

Question

Хотел бы вывести эти данные JSON

Я изо всех сил пытаюсь найти способ вывести эти данные, которые я извлекаю из Firebase, в основном из-за того, что я не знаю, как выбрать объекты в пределах датыобъектFirebase генерирует эти ключи автоматически: -LMgzJGM78f0BHbPf8cc.

Я не могу вывести свойства объектов, указанных выше ^ Я пытался использовать вложенные циклы for(in).

Воткод, который я использую в настоящее время:

Чтобы извлечь данные из базы данных

 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));
  }

Отображение состояния в элемент JSX, выводится только как props.name:

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

Вот пример данных в виде файла JSON, в моем приложении установлено состояние:

{
  "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"
      }
    },
  }
}

Свойства ключевых элементов -LMgzaEYe0tcCjpxOuPU Я не уверен, как получить доступ к этимданные создаются другой частью моего приложения. Должен ли я перейти в более поверхностное состояние, чтобы вывести свойства 'hours', 'name', mintutes и т. д., или есть способ получить к нему доступ, как сейчас?

Заранее большое спасибо.

Answer 1

Поскольку ключи в этих объектах неизвестны, может быть полезно использовать Object.keys().Попробуйте что-то подобное в вашем JSX:

Дано:

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>

Answer 2

Я бы предложил преобразовать объект, полученный из Firebase, в массив следующим образом:

const formattedTasks = [];

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

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

Итак, вы будете отображать через массив formattedTasks.

Вот рабочий пример: https://codesandbox.io/s/l348nnkv9q

Answer 3

Вы спрашиваете, как получить доступ к свойствам с проблемными именами, такими как -LMgzJGM78f0BHbPf8cc?

Если это так, вместо записи object.property вы можете получить доступ к свойствам объекта по имени свойства, используя синтаксис в квадратных скобках:

let obj = { color: 'blue' }

let prop = 'color'

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

Если нет, постарайтесь прояснить, в чем заключается ваша текущая проблема.