Как выполнить операции CRUD со статическим массивом JSON в Angular? (без API)
У меня есть этот файл массива JSON.
[
{
"id": 1,
"name": "John Doe",
"email": "[email protected]",
"age": 25
},
{
"id": 2,
"name": "Jane Doe",
"email": "[[email protected]]",
"age": 28
},
{
"id": 3,
"name": "Bob Smith",
"email": "[[email protected]",
"age": 30
}
]
Как мне выполнить операции CRUD с этим массивом через угловую реактивную форму и представить данные в таблице?
У меня нет никакого API. Я хочу использовать этот статический JSON для выполнения операций CRUD.
Ответы 1
Вы когда-нибудь пробовали json-сервер? Обычно я макетирую совместимые данные и работаю с этим для mvps.
Поместите следующее в файл db.json
db.json
{
"users":[
{
"id":1,
"name":"John Doe",
"email":"[email protected]",
"age":25
},
{
"id":2,
"name":"Jane Doe",
"email":"[[email protected]]",
"age":28
},
{
"id":3,
"name":"Bob Smith",
"email":"[[email protected]",
"age":30
}
]
}
беги npx json-server db.json
с помощью Angular HttpClient вы сможете выполнять следующие HTTP-вызовы:
- ПОЛУЧИТЬ /пользователи
- ПОСТ/пользователи
- ПУТ /пользователи/{идентификатор}
- УДАЛИТЬ /пользователи/{id}
- ПАТЧ /пользователи/{id}
Вы также можете использовать синтаксис, подобный OData, посетив следующий URL-адрес
Для получения формы предлагаю вам посетить официальный документ
Для таблицы предлагаю вам вдохновиться чем-то вроде вот этого.
Соединяя все вместе
После того, как вы создали форму, таблицу и службу данных (что позволит вам выполнить конкретный HTTP-запрос), вам необходимо:
- выполнить запрос PATCH/PUT через вашу службу данных, когда пользователь запускает действие сохранения
- как только предыдущий запрос завершится, вам придется обновить конкретную редактируемую строку таблицы.
Я пытался, но не могу получить конечные точки API, такие как сообщение об удалении патча и т. д.
Можете ли вы привести пример? Было бы гораздо проще помочь
Я не могу предоставить вам точный пример, но я запустил json-сервер на локальном хосте, и данные показывались, когда я разместил массив, но я не знаю, как получить точные данные с этого сервера, и я тоже не знаю. знать, как получить конечные точки операций CRUD из макетного API
А вот моя цель довольно ясна. Я хочу показать данные статического массива в таблице. Затем через форму я хочу добавить новые данные в таблицу, и они появятся вместе с остальными данными. Затем удаление или обновление этих данных. Надеюсь, это поможет ответить на ваш вопрос.
пожалуйста, посмотрите обновленный ответ. Я не могу разместить все это здесь..
Предоставьте достаточно кода, чтобы другие могли лучше понять или воспроизвести проблему.