javascript – No me reconoce la data del JSON

Estoy haciendo un buscador y no me muestra en pantalla los datos del JSON. Lo que quiero hacer es que filtre el dato y lo muestre por pantalla, pero solo sale ‘producto no encontrado’ como si estuviera vacío.

Ese es el único error que tengo, y en consola me muestra los datos como que la función los esta tomando.

Archivo JS – main.js

const formulario = document.querySelector('#formulario'), boton = document.querySelector('#boton'), resultado = document.querySelector('#resultado')


document.addEventListener('DOMContentLoaded', () => {
    fetchData();
})

const fetchData = async () => {
// esta funcion toma los datos del JSON
    try {
        const res = await fetch('api.json'),
        data = await res.json();
    //console.log(data);
    filtrar(data)

    } catch (error) {
    console.log(error);
   }
}

const filtrar = (data) => {
console.log(data);
resultado.innerHTML = '';
const texto = formulario.value.toLowerCase();
for (let producto in fetchData) {
    let nombre = producto.title.toLowerCase();
    if (nombre.indexOf(texto) !== -1) {
        resultado.innerHTML += `
      <li>${producto.title} - ${producto.precio}</li>
      `
    }
}
if (resultado.innerHTML === '') {
    resultado.innerHTML += `<li>Producto no encontrado...</li>`
}
};

boton.addEventListener('click', filtrar);

Archivo de HTML – vantas.html

<h1>Buscador</h1>
<input type="text" id="formulario">
<button id="boton">Agregar</button>
<ul id="resultado">

</ul>

<script src="https://es.stackoverflow.com/main.js"></script>

Archivo JSON – api.json

(
 {
    "precio": 500,
    "id": 1,
    "title": "Cafe"
 },
 {
    "precio": 300,
    "id": 2,
    "title": "Pizza"
 }
)

Muchas gracias!