Set innerHTML using Json

Set innerHTML using Json

Issue: first name is undefined.

Json output from User.php

[{"firstname":"John","lastname":"Doe","user_email":"john.doe@email.com","access_id":"1","role_id":"2","status":"enabled","company_name":"ABC Inc","mailing_address":"Earth","shipping_address":"Earth","email_address":"","phone":"(555) 555-0000","fax":"(555) 555-1111"}]

User.js

$(document).ready(function () {
  /* call the php that has the php array which is json_encoded */
  $.getJSON('user.php', function (user) {
    document.getElementById("firstname").innerHTML = user['firstname'];
    document.getElementById("lastname").innerHTML = user['lastname'];
  });
});

I figured out that user[''] is not right but I cannot seem to figure out what I am supposed to do. I put = "John" and that worked so I know I am using the wrong syntax.

Also it seems the second innerHTML does not get assigned. How come?