Mapee json desde la API y visualice con Handlebarsjs en html

Estoy tratando de hacer que el siguiente html simple con un fragmento de manillar funcione. Esta muestra tiene la siguiente

  1. Obtiene datos de API externa (por simplicidad proporcionada en el propio script json)

  2. (Map-Reduce) Mapea los valores clave en json y se reduce a un objeto (¿puede ser json directamente?)

  3. Proporcionar el objeto reducido como datos para la comstackción de manillares.

El problema que veo está en el mapeo correcto y la comstackción de manillares. Finalmente, html debe representar a dos personas con sus detalles. Por favor, corríjame para obtener un código optimizado logrando el resultado.

Tengo una pregunta relacionada con un ligero cambio en la estructura de json aquí. Transformación y conversión Json del par clave-valor en una clase en Javascript / Jquery

       
This div should append people data dynamically below. if not there is an error
var url = 'data.json'; {{#each this}}
Id: {{id}} First Name : {{firstname}} First Name : {{lastName}} Gender : {{gender}}, Age : {{age}} Address : {{address}}
{{/each}} //4a.function creation var slingshot = function(url, tplId, anchor) { $.getJSON(url, function(data) { // for simplicity giving the data object below data = [{ "id": "2IJXhq", "fields": [{ "key": "gender", "value": "male" }, { "key": "address", "value": "1234, some ln, Los Angeles, CA 9303" }, { "key": "age", "value": "25" }], "firstName": "David", "lastName": "Smith", "website": "davidsmith.com" }, { "id": "3GJXhq", "fields": [{ "key": "gender", "value": "male" }, { "key": "address", "value": "1234, some ln, New York, NY 12012" }, { "key": "age", "value": "30" }], "firstName": "John", "lastName": "Crowe", "website": "johncrowe.com" }] //however, please provide a solution after commenting above line to get the json data directly in .getJson(data) let o = data.map(item => item .reduce((a, { key, Value }) => ({ [key]: Value, ...a }), {})) var template = $(tplId).html(); var result = Handlebars.compile(template)(o); $(anchor).append(result); }); } //4b.function firing slingshot('data.json', '#tpl', '#anchor');