React Native Handle Nested Object with Map and Display

Question

how to handle nested object with map for display on flatlist or text or other component at react native. i tried to display using text and flatlist but didnt work, i want to display like this

this is my code,

const Schedule = () => {
const [resp, setData] = useState([]);
 useEffect(() => {
      const fetchData = async () => {
        const respData1 = await axios(
          `http://sh3ll.my.id/api/data3.json`
        );  
        setData({ data: respData1.data.data });  
      };
        fetchData();
    },[]);

    console.log('render');
    if (resp.data) {
      console.log("d==>", resp);
    }

    return (
       <View style={{paddingTop:20}}>
            { resp.data && resp.data.map((items,i)=> 
                <Text key={i}>{`${items.date} ${items.time}`}
                  {items.list.map((sub)=>{ `${sub.description}`
                  })}
                </Text> 
             ) }
        
        {/* <FlatList data={resp} 
        keyExtractor={(x,i)=>i}
        renderItem={({item})=>
        ....?? }
        /> */}

      </View>
    )
}

export default Schedule

if i put ${items.list} after ${items.time} you will see that the object is there — ivanichi
– ivanichi, Commented Dec 6, 2020 at 13:08

Jens M · Accepted Answer · 2020-12-06 13:12:23Z

1

Looking at your code, I assume your data object looks like this:

const resp = {
    data: [
      {
        date: "date 1",
        time: "time 1",
        list: [{ description: "desc 1" }, { description: "desc 2" }]
      },
      {
        date: "date 2",
        time: "time 2",
        list: [{ description: "desc 1" }, { description: "desc 2" }]
      }
    ]
  };

If that's correct, you can flatten your object by calling your own "createDescription" function that will take care of rendering the descriptions:

function createDescription(listItem) {
    return <p>{listItem.description}</p>;
}

  return (
    <table style={{ paddingTop: 20 }}>
      {resp.data &&
        resp.data.map((items, i) => (
          <tr key={i}>
            <td>{items.date}</td>
            <td>{items.time}</td>
            <td>{items.list.map((sub) => createDescription(sub))}</td>
          </tr>
        ))}
    </table>
  );

Now that you have your HTML correctly rendered, you can fix the layout using CSS.

edited Dec 6, 2020 at 13:12

answered Dec 6, 2020 at 13:03

Jens M

563 bronze badges

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

3 Comments

ivanichi Over a year ago

thank you the data has appeared, but I have a problem with <p> in react native prnt.sc/vwuula

Jens M Over a year ago

Can you try using fragments ( <> </> ) instead of <p> </p> ? I'm not used to working with React Native, but this should do the trick.

ivanichi Over a year ago

okay i've managed to tidy up with this: style = {{flexShrink: 1, width: '20% '}} and you can see prnt.sc/vx213e that it's perfect. thank you man. you have helped me

Collectives™ on Stack Overflow

React Native Handle Nested Object with Map and Display

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related