Load JSON Data Items into React Native Calendar Agenda

Question

I'm trying to load JSON Data into my Calendar Agenda but I'm not able to. There is not much documentation on how to load JSON into Agenda items by comparing them to dates either. Can someone please help me. This is my JSON Data. I'm trying to Load Items for a particular date using the Agenda_TimeStamp field. I have another page where I'm post the data into my sql database from where I'm pulling the data here from. I want to show the contents of the JSON data on specific dates with respect to Agenda_Timestamp

 {
        "AgendaName": null,
        "User_ID": 100,
        "Agenda_DESC": "TEST",
        "Agenda_TIMESTAMP": "2020-08-04 02:44:14",
        "Agenda_TYPE": "CO",
        "Agenda_ID": 100
    }

I'm trying to load this data in the agenda using this react native code

import axios from 'axios';
import { Calendar, CalendarList, Agenda } from 'react-native-calendars';

const HomeScreen = () => {
useEffect(() => {
        const fetchData = async () => {
            const result = await axios(
                'http://localhost/restservice/Agenda/',
            );

            setData(result.data);
        };

        fetchData();
    }, []);
    const timeToString = (time) => {
        const date = new Date(time);
        return date.toISOString().split('T')[0];
    };

    const [data, setData] = useState([]);
   /*  const [date, setDate] = useState(new Date()); */
    const [items, setItems] = useState([]);
   /*  const onChange = date => {
        setDate(date);
    }; */

    const loadItems =(day) => {
        setTimeout(() => {
            for (let i = -15; i < 85; i++) {
                const time = day.timestamp + i * 24 * 60 * 60 * 1000;
                const strTime = timeToString(time);
                if (!items[strTime]) {
                    items[strTime] = [];
                    const numItems = Math.floor(Math.random() * 3 + 1);
                    for (let j = 0; j < data.count(); j++) {
                        items[strTime].push({
                            name: 'Item for ' + strTime + ' #' + j,
                            height: Math.max(50, Math.floor(Math.random() * 150))
                        });
                    }
                }
    }

            const newItems = {};
            Object.keys(data).forEach(key => { newItems[data.Agenda_id] = data[Agenda_TYPE]; });
            setItems(newItems);
        }, 1000);
    }



    const renderItem = (item) => {
        return (
           
                <TouchableOpacity style={[styles.item, { height: item.height }]}
                    onPress={() => alert(item.name)}>

                    <Text>
                        {item.name}
                    </Text>

                </TouchableOpacity>
   
           

        );
    };


    return (
        <View style={styles.container}>
            <StatusBar barStyle={theme.dark ? "light-content" : "dark-content"} />
         
            <Agenda theme={{
                
            }}
                    items={items}
                    loadItemsForMonth={loadItems}
                    renderItem={renderItem}
                  
                />
           
            
        </View>
    );
};
export default HomeScreen;

Answer 1

You can call your fetch function inside loadItems for retrieve your data.

Also Verify this line:

Object.keys(data).forEach(key => { newItems[data.Agenda_id] = data[Agenda_TYPE]; });

Should create a date as each key, also the object nomenclature of each items should be some like this:

    items={{
    '2012-05-22': [{name: 'item 1 - any js object'}],
    '2012-05-23': [{name: 'item 2 - any js object', height: 80}],
    '2012-05-24': [],
    '2012-05-25': [{name: 'item 3 - any js object'}, {name: 'any js object'}]
  }}