ReactJS / Javascript: функция карты и JSON
В консоли данные загружаются с файлом JSON, который я пытаюсь визуализировать (см. Ниже). Сообщение об ошибке от Chrome: TypeError: data.map is not a function. Я не нашел хороших примеров функции d3.extent, поэтому мне здесь нужна помощь. Компонент Graph выглядит так:
constructor({data=[]}) {
console.info('construc data:', data)
const times = d3.extent(data.map(action => action.timestamp))
const range = [50, 450]
super({data})
this.state = {data, times, range}
}
Файл JSON:
{data:
action:
{action: [{action: "Changed", timestamp: 1499348050,…},…]}
Итак, как мне разобрать его с помощью d3.extent?
Я думаю, мне нужно сделать вложенный d3.extent? Если так, не используйте для этого. Все примеры в сети пока имеют плоские JSON / массивы.
попробуйте data.action.action.map(action => . . .)
Функция карты не работает с объектом. Функция карты, связанная с массивом.
@Helpinghand ошибки.
@SagarGavhane есть идеи, как это исправить?
вы можете предоставить точный объект данных?
Только что добавил скриншот.
Если свойство действия представляет собой массив объектов, попробуйте это. data.action.map(action => action.timestamp);
TypeError: невозможно прочитать карту свойства undefined
Не могли бы вы попробовать data.action.map?
по-прежнему нет: TypeError: не удается прочитать "карту" свойства undefined
Все еще получаю: TypeError: не удается прочитать свойство "карта" неопределенного значения.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Неправильный JSON
Ваш файл JSON недействителен, так как ваши ключи должны быть заключены в кавычки. Используйте Валидатор JSON, чтобы убедиться, что у вас правильный файл JSON.
Вызов .map() на Object вызывает TypeError
Когда ваши данные загружаются из файла JSON (и по умолчанию не используется пустой массив, установленный вашим конструктором), убедитесь, что он имеет форму Array, потому что вызов метода .map() на Object вместо Array вызывает TypeError . Это связано с тем, что .map() является частью прототипа Array, а d3.extent(array) требует Array в качестве аргумента.
Правильный подход
Если ваш JSON правильно загружен в объект data, должно работать следующее:
d3.extent(data.action.action.map(action => action.timestamp))
Включенный вами фрагмент JSON недействителен.