5

I am using json-server to fake the Api for the FrontEnd team.

We would like to have a feature to create the multiple objects (Eg. products) in one call.

In WebApi2 or actual RestApis, it can be done like the following:

POST api/products //For Single Creation
POST api/productCollections  //For Multiple Creation

I don't know how I can achieve it by using json-server. I tried to POST the following data to api/products by using the postman, but it does not split the array and create items individually.

[
    {
        "id": "ff00feb6-b1f7-4bb0-b09c-7b88d984625d",
        "code": "MM",
        "name": "Product 2"
    },
    {
        "id": "1f4492ab-85eb-4b2f-897a-a2a2b69b43a5",
        "code": "MK",
        "name": "Product 3"
    }
]

It treats the whole array as the single item and append to the existing json.

Could you pls suggest how I could mock bulk insert in json-server? Or Restful Api should always be for single object manipulation?

3 Answers 3

5

This is not something that json-server supports natively, as far as I know, but it can be accomplished through a workaround.

I am assuming that you have some prior knowledge of node.js

You will have to create a server.js file which you will then run using node.js. The server.js file will then make use of the json-server module.

I have included the code for the server.js file in the code snippet below.

I made use of lodash for my duplicate check. You will thus need to install lodash. You can also replace it with your own code if you do not want to use lodash, but lodash worked pretty well in my opinion.

The server.js file includes a custom post request function which accesses the lowdb instance used in the json-server instance. The data from the POST request is checked for duplicates and only new records are added to the DB where the id does not already exist. The write() function of lowdb persists the data to the db.json file. The data in memory and in the file will thus always match.

Please note that the API endpoints generated by json-server (or the rewritten endpoints) will still exist. You can thus use the custom function in conjunction with the default endpoints.

Feel free to add error handling where needed.

const jsonServer = require('json-server');
const server = jsonServer.create();
const _ = require('lodash')
const router = jsonServer.router('./db.json');
const middlewares = jsonServer.defaults();
const port = process.env.PORT || 3000;
    
server.use(middlewares);
server.use(jsonServer.bodyParser)
server.use(jsonServer.rewriter({
    '/api/products': '/products'
}));
    
server.post('/api/productcollection', (req, res) => {
    const db = router.db; // Assign the lowdb instance
    
    if (Array.isArray(req.body)) {
        req.body.forEach(element => {
            insert(db, 'products', element); // Add a post
        });
    }
    else {
        insert(db, 'products', req.body); // Add a post
    }
    res.sendStatus(200)
    
    /**
     * Checks whether the id of the new data already exists in the DB
     * @param {*} db - DB object
     * @param {String} collection - Name of the array / collection in the DB / JSON file
     * @param {*} data - New record
     */
    function insert(db, collection, data) {
        const table = db.get(collection);
        if (_.isEmpty(table.find(data).value())) {
            table.push(data).write();
        }
    }
});
    
server.use(router);
server.listen(port);

If you have any questions, feel free to ask.

4
  • Thanks. I would like to know how I can refresh the data back after the Write to db.json. Currently, the new data is changed in db.json. But it doesn't affect the existing in-memory db and it always keep previous db.json.
    – TTCG
    Sep 12, 2019 at 10:47
  • 1
    Thanks for your comment. I have now corrected my answer to better solve the problem that you are facing. The new code in my answer will add the records to the lowdb instance and persist to the db.json file.
    – Ruan
    Sep 12, 2019 at 14:31
  • Thanks Ruan. I wonder how you know that you can call db.get to get the existing collection in the memory. I couldn't find it at all in the json-server doc. Or I might have overlooked.
    – TTCG
    Sep 12, 2019 at 19:03
  • 1
    I actually spotted on the json-server page on the npm site that it uses lowdb to save all changes to the db.json file. That is when I realised that I just have to work through lowdb. I then read up on how to use lowdb in the lowdb readme on the github repository. The json-server doc could definitely be more detailed.
    – Ruan
    Sep 12, 2019 at 20:44
1

It probably didn't work at the time when this question was posted but now it does, call with an array on the /products endpoint for bulk insert.

0

The answer marked as correct didn't actually work for me. Due to the way the insert function is written, it will always generate new documents instead of updating existing docs. The "rewriting" didn't work for me either (maybe I did something wrong), but creating an entirely separate endpoint helped.

This is my code, in case it helps others trying to do bulk inserts (and modifying existing data if it exists).

const jsonServer = require('json-server');
const server = jsonServer.create()
const _ = require('lodash');
const router = jsonServer.router('./db.json');
const middlewares = jsonServer.defaults()

server.use(middlewares)
server.use(jsonServer.bodyParser)


server.post('/addtasks', (req, res) => {
    const db = router.db; // Assign the lowdb instance
    if (Array.isArray(req.body)) {
        req.body.forEach(element => {
            insert(db, 'tasks', element);
        });
    }
    else {
        insert(db, 'tasks', req.body);
    }
    res.sendStatus(200)

    function insert(db, collection, data) {
        const table = db.get(collection);

        // Create a new doc if this ID does not exist
        if (_.isEmpty(table.find({_id: data._id}).value())) {
            table.push(data).write();
        }
        else{
            // Update the existing data
            table.find({_id: data._id})
            .assign(_.omit(data, ['_id']))
            .write();
        }
    }
});

server.use(router)
server.listen(3100, () => {
  console.log('JSON Server is running')
})

On the frontend, the call will look something like this: axios.post('http://localhost:3100/addtasks', tasks)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.