Как отрендерить JSON в React.js?

Question

[rinatoptimus]

Есть JSON-файл:

{
    "books": {
        "book1": {
            "id": 1,
            "name": "Sample",
            "author": "Somebody",
            "genre": "Tales"
        },
        "book2": {
            "id": 2,
            "name": "Winter",
            "author": "Ted"
        }    
    }
}

Чтобы его вывести, подключаю его в компоненте:

import data from './books.json';

Потом пытаюсь вывести в таблицу:

class Home extends Component {
    render(){
        const carNode = () => {
            return (
                <tr>
                    <th scope="row">{data.books.book1.id}</th>
                    <td>
                        <p>
                            <Link
                            to={"books/"+data.books.book1.id}
                            key={data.books.book1.id}>
                            {data.books.book1.name}                         
                            </Link>
                        </p>
                        <p className="author">{data.books.book1.author}  </p>
                    </td>
                </tr>               
            )
        };

        return (
            <div className="container-fluid content-main">
                <div className="row">
                    <div className="col-xl-12">
                        .........
                        <p>{carNode()}</p>  
                        .........                                          
                    </div>
                </div>
            </div>
        );
    }
}

Выводится одна книга. Как организовать цикл, чтобы пробегал по всему json и выводил все книги? Есть в Реакте какой-нибудь специальный реактовский способ? Пробовал установить json-loader, как-то не помогло. Изначально, когда json был прописан в виде массива прямо в index.jsx, все работало, и вот когда вывел в отдельный файл, возникла такая проблема. Не могли бы вы помочь?

Answer 1

[Максим]

Всегда когда вам приходит какая-то структура, нужно пробегать ее полностью по каждому элементу, чтобы сгенерировать JSX-элемент. Для массивов обычно используют .map метод, для объектов - например Object.keys (так же подойдут конечно, и цикл forEach для массива, и цикл for in для объекта и т.д.)

Так как у вас в JSON приходит не массив объектов, а объект объектов то вам нужно пробегать с помощью Object.keys, например, и потом еще применить map к получившемуся массиву ключей. Пример получившегося массива:



Применяем map:

const template = Object.keys(data.books).map(item => <span key={data.books[item].id}>{data.books[item].author} - {data.books[item].name}</span>)

В данном случае в переменной template окажутся 2 JSX-элемента (тэги span с данными). Вам скорее всего нужно, чтобы это было tr. Поменять не трудно)

А json-loader вам нужен для того, чтобы webpack мог корректно импортировать такие файлы, так как пока json-лоадера нет, вебпак не знает как обрабатывать файлы с расширением .json. По такому же принципу вы подключаете css-loader, например, чтобы webpack мог "импортить цсски"

Comments

[rinatoptimus]

Максим, спасибо! Теперь все работает!

Answer 2

[Евгений Кучеренко]

Хочу добавить по структуре данных json. Если есть возможность, храните данные в формате массив чего-то, а не объект чего-то. Метод map для массива быстрее того же for in для объекта.

{
    books: [ { id: 1, name: "Sample", author: "Somebody", genre: "Tales" }, { id: 2, name: "Sample2", author: "Somebody2", genre: "Tales2" } ]
}

book1, 2, ... N - вставлять нет смысла, т.к. книги хранятся в значении свойства "books", а id определяет порядковый номер