title: Expected an array of objects but got an object in an object
body: <p>In a project I'm currently working on I got an angular exception: <code>Error: [$resource:badcfg] Error in resource configuration. Expected response to contain an array but got an object?</code></p>
  
  <p>In my search to find a solution I entered the URL of the web service directly into my browser and surprisingly I did not receive an array as expected.</p>
  
  <p>The web service class:</p>
  
  <pre><code>@Path("/menu")
  public class MenuHandler {
      @GET
      @Path("/cls")
      @Produces(MediaType.APPLICATION_JSON)
      public List&lt;Clazz&gt; getCLSs()    {
          Clazz clazz = new Clazz();
          Clazz.setFoo("foo");
          Clazz.setBar("bar");
  
          ArrayList&lt;Clazz&gt; clazzes = new ArrayList&lt;&gt;();
          clazzes.add(clazz);
  
          return clazzes;
      }
  }
  </code></pre>
  
  <p>When I enter the url <code>http://localhost:8080/myProject/rest/menu/cls</code> I would expect to see a JSON array with JSON objects:</p>
  
  <pre><code>[ {"foo": "foo", "bar": "bar"} ]
  </code></pre>
  
  <p>but instead, I receive an JSON object with a property the JSON object I was expecting without any array:</p>
  
  <pre><code>{
    "clazz": {
      "foo": "foo",
      "bar": "bar"
    }
  }
  </code></pre>
  
  <p>So I wondered why there was no array and what would happen when I add another Clazz object. In that case I still get a JSON object but this time one of the parameters is the JSON array that I would expect to have from the start.</p>
  
  <pre><code>{
    "clazz": [
      {
        "foo": "foo",
        "bar": "bar"
      },
      {
        "foo": "foo2",
        "bar": "bar2"
      }
    ]
  }
  </code></pre>
  
  <p>Can somebody explain me why this behavior is happening and where my thinking went wrong?</p>