[
  {
    "nombre" : "juan",
    "cargo"  : "programador"
  },
  {
    "nombre"  : "jose",
    "cargo"   : "arquitecto"
  },
  {
    "nombre"  : "luis",
    "cargo"   : "desarrollador"
  }
]


luego mi archivo js esta así:

document.getElementById('btnjson').addEventListener('click', cargarJson);

function cargarJson(){
  fetch('personas.json')
  .then(function(res){
    console.log(res);
  })

let data =[
  {
    "nombre" : "juan",
    "cargo"  : "programador"
  },
  {
    "nombre"  : "jose",
    "cargo"   : "arquitecto"
  },
  {
    "nombre"  : "luis",
    "cargo"   : "desarrollador"
  }
];

request = new XMLHttpRequest();
request.open('GET', '/my/url', true);

request.onload = function() {
  if (request.status >= 200 && request.status < 400){
    // Success!
    var data = JSON.parse(request.responseText);
    console.log(data);
  } else {
    // We reached our target server, but it returned an error

  }
};

request.onerror = function() {
  // There was a connection error of some sort
};

request.send();

for(let i =0; i < data.length; i++) {
    let dato = data[i];
    //Dos formas de acceder al dato
    //1.
    console.log(dato["nombre"]);
    console.log(dato.cargo);
}