迭代对象数组的子项-ReactJS

时间:2018-06-06 03:56:55

标签: javascript reactjs

我正在为我的数组对象的结果制作<table>但是我遇到了迭代数组对象的子节点的问题。 这是我的数据(this.props.converted值): image here, value of my data

<table>
                <thead>
                <tr>
                        <th>Name</th>
                        <th>Contact Numbers</th>
                        <th>Address</th>
                        <th>Email</th>
                        <th>Birthdate</th>
                        <th>Note</th>
                    </tr>
                </thead>            
                <tbody>
                    {this.props.converted.map((data,idx) =>( //Please check the image above for my data
                    <tr key={idx}>
                    <td>
                    {data.children.map(data => data).join(', ')}
                    </td>
                    <td>{data.contact_number}</td>
                    <td>{data.Address}</td>
                    <td>{data.Email}</td>
                    <td>{data.Birthdate}</td>
                    <td>{data.Note}</td>
                    </tr>
                     ))}
                </tbody>

             </table>

输出应该是这样的:enter image description here

1 个答案:

答案 0 :(得分:0)

我已经发现了答案..

    <table>
            <thead>
            <tr>
                    <th>ID</th>
                    <th>Name</th>
                    <th>Address</th>
                    <th>Email</th>
                    <th>Birthdate</th>
                    <th>Note</th>
                    <th>Contact Numbers</th>
                </tr>
            </thead>            
            <tbody>
                {this.props.converted.map((data,idx) =>(
                <tr key={idx}>

                {data.children.map((x,i) => (
                       <td key={i}>{x.value}</td>
                )         
                )}

                <td>{data.contact_number}</td>
                <td>{data.Address}</td>
                <td>{data.Email}</td>
                <td>{data.Birthdate}</td>
                <td>{data.Note}</td>
                </tr>
                 ))}
            </tbody>

         </table>