JSFiddle - React, Tailwind, and code Playground

HTML

<pre id="showblock"></pre>

JavaScript

const data = [
    {id: 1},
    {id: 2},
    {id: 3},
    {id: 4},
    {id: 7},
    {id: 9},
    {id: 10},
    {id: 12},
    {id: 14},
    {id: 15},
    {id: 16}];
var result = [];
var curArr =[];
for(var i = 0; i < data.length;i++){
  if(i == 0)
  	curArr.push({id: data[i].id});
  else if(data[i].id - data[i-1].id >= 2){
  	result.push(curArr);
    curArr = [];
     	curArr.push({id: data[i].id});
      }
  else if(data[i].id - data[i-1].id == 1)
     	curArr.push({id: data[i].id});
  if(i == data.length-1)
  	result.push(curArr);
}

show(result);

function show(arr){
	var el = document.querySelector("#showblock");
  result.map(function(e1,i1){
  	var name = e1.length < 2?e1[0].id:e1[0].id+"-"+e1[e1.length-1].id;
    el.innerHTML += '"'+name+'": [\n';
  	e1.map(function(e,i){
  		el.innerHTML += '\t{id: '+e.id+'}'+ (i== e1.length-1?'':',') + "\n";
  });
  el.innerHTML += ']'+(i1!= e1.length-1?',':'')+"\n";
  });
}