Tablas dinámicas en JS a partir de un vector

[senseeye3led]

Tengo un vector con distintas comida, por ejemplo con el siguiente contenido:

Código:

[
	{
        id: 1,
        nombre: "Manzana",
        precio: 20,
        codigo: "123",
		esTemporada: 1,
		origen: "España",
    },
    {
        id: 2,
        nombre: "Pera",
        precio: 5000,
        codigo: "123444",
		esTemporada: 0,
		origen: "Brazil",
    },
    {
        id: 3,
        nombre: "Galleta",
        precio: 10,
        codigo: "20205",
		esTemporada: 1,
		origen: "Irlanda"
    },
    {
        id: 4,
        nombre: "Fresa",
        precio: 30000,
        codigo: "7700545",
		esTemporada: 1,
		origen: "España",
    },
	{
        id: 5,
        nombre: "Kiwi",
        precio: 6767,
        codigo: "00112233",
		esTemporada: 1,
		origen: "Australia",
    },
];

Muestro el contenido de algunos campos, cómo nombre, precio y código en una tabla de manera dinámica.

Para pintar la tabla:

Código:

const $cuerpoTabla = document.querySelector("#cuerpoTabla");
// Recorrer todos los productos
for (var i = 0, len = productos.length; i < len; i++){
    // Crear un <tr>
    const $tr = document.createElement("tr");
    // Creamos el <td> de nombre y lo adjuntamos a tr
    let $tdNombre = document.createElement("td");
    $tdNombre.textContent = productos[i].nombre; // el textContent del td es el nombre
    $tr.appendChild($tdNombre);
    // El td de precio
    let $tdPrecio = document.createElement("td");
    $tdPrecio.textContent = productos[i].precio;
    $tr.appendChild($tdPrecio);
    // El td del código
    let $tdCodigo = document.createElement("td");
    $tdCodigo.textContent = productos[i].codigo;
    $tr.appendChild($tdCodigo);
    // Finalmente agregamos el <tr> al cuerpo de la tabla
	alert($cuerpoTabla);
    $cuerpoTabla.appendChild($tr);
    // Y el ciclo se repite hasta que se termina de recorrer todo el vector
};

En el HTML:

Código:

	<table>

            <tbody id="cuerpoTabla">
			
			</tbody>

	</table>

Lo que quiero es:

Hacer una funcion pasandole el id de la comida (siempre será único) y me muestre los campos, nombre, precio, codigo, esTemporada y origen.

Antes de mostrar la información de la comida concreta, quiero eliminar la tabla dinámica, para poder mostrar 1 id (comida) con todos los campos. Vendría a ser cómo más información sobre un id concreto.

Soy capaz de posicionarme en el vector en la posición concreta para un determinado id y así poder coger toda la información, pero no de mostrarlo en el HTML.

Descarto abrir ventanas emergente, quiero poder hacerlo en la misma página recargando o actualizando el contenido.