pass values of json object in react native to another object

Question

I used a fetch API to get data from backend server. I returned JSON object data from fetch function and I want to pass every single value in the object to another object.

function getvals() {

    return fetch('http://*********/users/timetable')
        .then(response => response.json())
        .then((responseData) => {
            console.log(responseData);
            return responseData;
        })

        .catch(error => console.log(error))

}

the function getvals() is returning the object data, these data looks like this:

[{"title": "Math","day": "FRI", "end_time": 11, "start_time": 9,location: "Classroom 403",extra_descriptions: "Chen"}]

now I want every single value of the object data to be passed to this object:

const events_data = [
 
    {
        title: "Math",
        startTime: genTimeBlock("WED", 9),
        endTime: genTimeBlock("WED", 10),
        location: "Classroom 403",
        extra_descriptions: ["Kim", "Lee"],
    },
    {
        title: "Mandarin",
        startTime: genTimeBlock("TUE", 9),
        endTime: genTimeBlock("TUE", 10),
        location: "Language Center",
        extra_descriptions: ["Chen"],
    },
    {
        title: "Japanese",
        startTime: genTimeBlock("FRI", 9),
        endTime: genTimeBlock("FRI", 10),
        location: "Language Center",
        extra_descriptions: ["Nakamura"],
    },
  
];

for example the value of day from getvals() function i want to pass it to be set in in startTime in events_data object

then within the the view the events_data will be passed to events props:

   <SafeAreaView style={{ flex: 1, padding: 30 }}>
     <View style={styles.container}>
       <TimeTableView
           scrollViewRef={this.scrollViewRef}
           **events={// events.data will be passed here as object format //}**
           pivotTime={8}
           pivotDate={this.pivotDate}
           numberOfDays={this.numOfDays}
           onEventPress={getvals}
           headerStyle={styles.headerStyle}
           formatDateHeader="dddd"
           locale="en"
          />
      </View>
      </SafeAreaView>

it may the way to do this is easy but im new with this approche and i couldn't find an easy way to do it.

The data returned only has the parameters day, end_time and start_time so how are they going to be added to events_data when they are missing title, location and extra_description? — yudhiesh
– yudhiesh, Commented Jan 16, 2021 at 4:37
@yudhiesh thanks for replying, the rest will be added later just i post part of it as example — alobe
– alobe, Commented Jan 16, 2021 at 4:44
@yudhiesh sorry for that mistake i have updated the question again — alobe
– alobe, Commented Jan 16, 2021 at 5:41

yudhiesh · Accepted Answer · 2021-01-16 09:17:03Z

1

You can map over the data and then add them to the array events_data.

The function addData pushes the data received from the fetch request in the desired format to the events_data.

function getvals() {
  fetch("http://*********/users/timetable")
    .then((response) => response.json())
    .then((output) => {
      addData(output, events_data);
    })
    .catch((error) => console.log(error));
}

function addData(data, data2) {
  data.forEach(d) => {
    data2.push({
      title: d.title,
      startTime: genTimeBlock(d.day, d.startTime),
      endTime: genTimeBlock(d.day, d.endTime),
      location: d.location,
      extra_description: [d.extra_description],
    });
  });
}

Edit:

If you wanted to render the data then you can do it like this:

const RenderData = () => {
  return (
    <View>
      {events_data &&
        events_data.result.map((data) => {
          return <Text>{data.title}</Text>;
        })}
    </View>
  );
};

edited Jan 16, 2021 at 9:17

answered Jan 16, 2021 at 5:52

yudhiesh

6,8774 gold badges25 silver badges56 bronze badges

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

4 Comments

alobe Over a year ago

this is very helpful I really appreciate that, i have simple question if i want to call the event_data inside <View> how can that be done. im sorry it sound simple weird question but I'm still learning. thanks

alobe Over a year ago

thank you for replying i have voted up and alos i have updated my question where exactly the events_data objects will be passed because i tried the way that you mentioned but doesn't work. thank in advance

yudhiesh Over a year ago

You should not constantly change the question and unapprove my answer, create a new question instead and I will answer that as well. Also you need to add in more information about what you intend to add to TimeTableView.

alobe Over a year ago

sorry about that, my apologies. i have approved the question and created another one with more details as your request: stackoverflow.com/questions/65747282/…

Collectives™ on Stack Overflow

pass values of json object in react native to another object

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related