访问嵌套的 JSON 对象以读入 React 中的 table

Question

我有一个 JSON object，我正在尝试使用 React 将其解析为 table，但是我在使用 .map() 尝试为每个对象创建一行时遇到了问题课程代码 name、transferable_credits、transferable_credits -> institution、transferable_credits -> name 和 url 的独特组合。我似乎无法弄清楚如何在每个 JSON 根键值对中获取嵌套数组的键值。

到目前为止我的 React 组件：

import data from './data.json'

const Home = () => {

    return ( 
        <div className="home">
            <table>
                <thead>
                    <tr>
                        <th>Course Code</th>
                        <th>Vendor Institution</th>
                        <th>Vendor Course</th>
                    </tr>
                </thead>
            <tbody>
                {Object.keys(data).map(function(key, index) {
                    return (
                        <tr key={index}>
                            <td>{key}</td>
                            {Object.keys(data[key].transferable_credits).forEach(function(key2) {
                                return (
                                    <td>{key2.institution}</td>
                                )
                            })}
                        </tr>
                    )})

                }
            </tbody>
            </table>
        </div>

     );
}
 
export default Home;

Answer 1

data[key].transferable_credits 是一个列表，因此您应该使用 map 而不是 Object.keys 循环。试试这个

import data from './data.json'

const Home = () => {

    return ( 
        <div className="home">
            <table>
                <thead>
                    <tr>
                        <th>Course Code</th>
                        <th>Vendor Institution</th>
                        <th>Vendor Course</th>
                    </tr>
                </thead>
            <tbody>
                {Object.keys(data).map(function(key, index) {
                    return (
                        <tr key={index}>
                            <td>{key}</td>
                            {data[key].transferable_credits.map(function(key2) {
                                return (
                                    <td>{key2.institution}</td>
                                )
                            })}
                        </tr>
                    )})

                }
            </tbody>
            </table>
        </div>

     );
}
 
export default Home;

访问嵌套的 JSON 对象以读入 React 中的 table

Accessing a nested JSON object to read into a table in React

javascript

json

jsx

reactjs

next.js