Hiển thị dữ liệu json lồng nhau trong React JS

1. Cấu trúc tệp Json

Giả sử có một tệp json với cấu trúc như sau:

{
    "count": 40,
    "next": "http://127.0.0.1:8000/api/products/?limit=25&offset=25",
    "previous": null,
    "results": [
        {
            "id": 103,
            "category": null,
            "brand": {
                "id": 2,
                "name": "Laptop",
                "slug": "laptop"
            },
            "store": {
                "id": 3,
                "name": "Sendo",
                "slug": "sendo"
            },
            "title": "Bình Xịt Điện Con Ong Vàng COV 18D",
            "slug": "binh-xit-dien-con-ong-vang-cov-18d",
            "keyword": null,
            "price": 750000
        }
    ]
}

Lưu ý: mục category, brandstore có cấu trúc giống nhau

2. Hiển thị dữ liệu Json trong React

Bạn có thể dễ dàng hiển thị các mục như title, slug, keyword với .map trong react js:

return (
    <ul>
        {results.map(hit => {
               return (
                    <li key={hit.id}>
                    {hit.title}
                    {hit.price}
                    {hit.keyword}
                    </li>
               )
            }
        )}
    </ul>
)

Nhưng nếu bạn muốn hiển thị một mục trong nhóm categorybrand thì sao?

Tất nhiên bạn có thể viết:

{hit.category.name}
{hit.brand.name}

Nhưng nếu nhóm đó null (ví dụ: category) thì bạn sẽ gặp lỗi, vì sẽ không có cái name nào cả. Nó khác với mục keyword cũng có giá trị null nhé.

3. Hiển thị dữ liệu nhóm con Json (nhóm có thể null hoặc không)

Cách hiển thị dữ liệu json lồng nhau để không gặp lỗi đơn giản nhất là:
Cách 1: không có giá trị null trong các nhóm con (category, brand…).
Cách 2: Kiểm tra nhóm con có tồn tại không, nếu không tồn tại khì không hiển thị nó.

{hit.category && hit.category.name}
{hit.brand && hit.brand.name}

4. Kết quả

Và kết quả cuối cùng sẽ là:

return (
    <ul>
        {results.map(hit => {
               return (
                    <li key={hit.id}>
                    {hit.title}
                    {hit.price}
                    {hit.keyword}
                    {hit.category && hit.category.name}
                    {hit.brand && hit.brand.name}
                    </li>
               )
            }
        )}
    </ul>
)

Xong!