How to store array of objects in db.json from json-server

Question

I am creating a fake backend using json-server to store some data in json format. The data is complex as follows -

   {
        "id": 0,
        "quizName": "Which Harry Potter Character Are You?",
        "characters": ["Harry", "Ron", "Hermoine"],
        "qa": [{
                "question": "Do you play Chess?",
                "answers": [{
                        "name": "yes",
                        "charscore": [0, 1, 0]
                    },
                    {
                        "name": "no",
                        "charscore": [1, 0, 1]
                    }
                ]
            },
            {
                "question": "Do you spell magic correctly?",
                "answers": [{
                        "name": "yes",
                        "charscore": [0, 0, 1]
                    },
                    {
                        "name": "no",
                        "charscore": [1, 1, 0]
                    }
                ]
            },
            {
                "question": "Do you have a Scar?",
                "answers": [{
                        "name": "yes",
                        "charscore": [1, 0, 0]
                    },
                    {
                        "name": "no",
                        "charscore": [0, 1, 1]
                    }
                ]
            }
        ]
    }

But when I do jQuery POST to the json-server, the json data is stored as follows -

{
  "quizName": "Which Harry Potter Character Are You?",
  "characters[]": [
    "Harry",
    "Ron",
    "Hermoine"
  ],
  "qa[0][question]": "Do you play Chess?",
  "qa[0][answers][0][name]": "yes",
  "qa[0][answers][0][charscore][]": [
    "0",
    "1",
    "0"
  ],
  "qa[0][answers][1][name]": "no",
  "qa[0][answers][1][charscore][]": [
    "1",
    "0",
    "1"
  ],
  "qa[1][question]": "Do you spell magic correctly?",
  "qa[1][answers][0][name]": "yes",
  "qa[1][answers][0][charscore][]": [
    "0",
    "0",
    "1"
  ],
  "qa[1][answers][1][name]": "no",
  "qa[1][answers][1][charscore][]": [
    "1",
    "1",
    "0"
  ],
  "qa[2][question]": "Do you have a Scar?",
  "qa[2][answers][0][name]": "yes",
  "qa[2][answers][0][charscore][]": [
    "1",
    "0",
    "0"
  ],
  "qa[2][answers][1][name]": "no",
  "qa[2][answers][1][charscore][]": [
    "0",
    "1",
    "1"
  ],
  "id": 1
}

The post method is as follows-

$.post(this.serverUrl, val, function (serverResponse) {
      //val contains the expected javascript object
      console.log(serverResponse);
});

How can I store the values correctly in json-server?

You should use JSON.stringify(serverResponse) to save JSON object properly or either use this url (scotch.io/tutorials/…) to get some help to how to store data in JSON-Server — Mahesh Singh Chouhan
– Mahesh Singh Chouhan, Commented Apr 2, 2017 at 11:15
stringify the object post following data in db.json- { "{\"quizName\":\"Which Harry Potter Character Are You?\",\"characters\":[\"harry\",\"ron\",\"harmione\"],\"qa\":[{\"question\":\"do u play chess?\",\"answers\":[{\"name\":\"yes\",\"charscore\":[0,1,0]},{\"name\":\"no\",\"charscore\":[1,0,1]}]},{\"question\":\"do u have scar?\",\"answers\":[{\"name\":\"yes\",\"charscore\":[1,0,0]},{\"name\":\"no\",\"charscore\":[0,1,1]}]},{\"question\":\"du u spell magic?\",\"answers\":[{\"name\":\"yes\",\"charscore\":[0,0,1]},{\"name\":\"no\",\"charscore\":[1,1,0]}]}]}": "", "id": 1 } — Praful Surve
– Praful Surve, Commented Apr 2, 2017 at 11:22
Yes, it is the correct way to store any JSON object by using stringify and when you want to use it back as JSON object you can use JSON.parse(serverResponse) — Mahesh Singh Chouhan
– Mahesh Singh Chouhan, Commented Apr 2, 2017 at 11:24
Can you please tell, what exact issue you are facing while saving into json-server? — Mahesh Singh Chouhan
– Mahesh Singh Chouhan, Commented Apr 2, 2017 at 11:25

Praful Surve · Accepted Answer · 2017-04-02 13:38:10Z

1

Modifying the AJAX call to send stringify object and setting the contentType: "application/json" did the trick

Modified the AJAX call as below-

$.ajax({
      type: "POST",
      url: this.serverUrl,
      data: JSON.stringify(val),
      contentType: "application/json"
 });

edited Apr 2, 2017 at 13:38

answered Apr 2, 2017 at 13:32

Praful Surve

7881 gold badge10 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to store array of objects in db.json from json-server

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related