Type of “id” (number) in user.json is not supported. Use objects or arrays of objects error when using json-server, why?

Question

I am working on an Angular 4 App. I am trying to get data from a JSON file for building a user dashboard.

I created a json file and tried loading it using JSON server using this: $ json-server --watch user.json and I am getting the following error:

Type of "id" (number) in user.json is not supported. Use objects or arrays of objects..

When I remove the "id" field in the file, I get the same error with "name".

I feel there is something wrong with the way I have created the json files. I am new to web development, so don't mind if it's a very fundamental mistake.

This is my json file:

{
 "id": 1,
 "name":"Kajal Agarwal",
 "department":"Information Technology",
 "college":"Indian Institute of Engineering Science and Technology, Shibpur",
 "subjects":[
    {
        "title":"Data Structures",
        "active":true,
        "faculty":"Prasun Ghosal",
        "notifications":4,
        "color":"#9c27b0"
    },
    {
        "title":"Operating System",
        "active":true,
        "faculty":"Niharika Singh",
        "notifications":0,
        "color":"#ffc107"
    },
    {
        "title":"Algorithms",
        "active":true,
        "faculty":"Debojit Mondal",
        "notifications":1,
        "color":"#009688"
    },
    {
        "title":"Web Technologies",
        "active":true,
        "faculty":"Shantanu Saurabh",
        "notifications":2,
        "color":"#ff5722"
    },
    {
        "title":"Formal Language and Automata Theory",
        "active":true,
        "faculty":"Sudhanshu Sekhar",
        "notifications":3,
        "color":"#03a9f4"
    },
    {
        "title":"Digital Logic and Circuit Design",
        "active":false,
        "faculty":"",
        "notifications":0,
        "color":"#9e9e9e"
    }
  ]
}

Answer 1

Maybe I'm late for the response, but this is just for future readers since I too faced similar problem until I understood more about json-server.

As such there is nothing wrong with your JSON object. The reason why you are getting that error has to do with how json-server works.

Each and every key directly exposed at the root of the JSON object is considered as a separate URL in json-server. In your case, if you wrap your entire JSON object inside a key eg: 'data', your error would be resolved. Your JSON object would look something like below

{
"data":{
 "id": 1,
 "name":"Kajal Agarwal",
 "department":"Information Technology",
 "college":"Indian Institute of Engineering Science and Technology, Shibpur",
 "subjects":[
    {
        "title":"Data Structures",
        "active":true,
        "faculty":"Prasun Ghosal",
        "notifications":4,
        "color":"#9c27b0"
    },
    {
        "title":"Operating System",
        "active":true,
        "faculty":"Niharika Singh",
        "notifications":0,
        "color":"#ffc107"
    },
    {
        "title":"Algorithms",
        "active":true,
        "faculty":"Debojit Mondal",
        "notifications":1,
        "color":"#009688"
    },
    {
        "title":"Web Technologies",
        "active":true,
        "faculty":"Shantanu Saurabh",
        "notifications":2,
        "color":"#ff5722"
    },
    {
        "title":"Formal Language and Automata Theory",
        "active":true,
        "faculty":"Sudhanshu Sekhar",
        "notifications":3,
        "color":"#03a9f4"
    },
    {
        "title":"Digital Logic and Circuit Design",
        "active":false,
        "faculty":"",
        "notifications":0,
        "color":"#9e9e9e"
    }
  ]
}
}

Now if you try to access the root key from URL like below. You would be able to fetch your entire JSON object.

localhost:3000/data

If you were to add another key called "data2" at the root of the JSON object and assign some other object then you would have another URL as below

localhost:3000/data2

Hope this makes sense and is helpful. You could also visit here to see an example of how json-server works