Como passar parâmetro em url, com dois pontos no lado do servidor javascript para back-end NodeJS?

Aug 26 2020

Estou tentando passar um id numérico como parâmetro no URL para o servidor. O que estou fazendo errado?

Eu tenho um aplicativo gerenciador de tarefas no qual, para ler uma tarefa, os usuários podem ler uma tarefa por seu id, agora estou passando isso diretamente no carteiro digitando id (5e8b) como:

{{url}}/tasks/5e8b

Mas não consegui fazer funcionar no navegador, aqui está o meu código Html:

<h1>Read Task by Task ID</h1>
    <form id="task-id-form">
        <input type="text" id="task-id"><br> <br>
        <button id="task-id-button">Find Task</button>
        <p id="task-id-display"></p>
    </form>

E meu código JS do lado do servidor é (que não está funcionando):


const readTaskForm = document.querySelector( "#task-id-form" );
readTaskForm.addEventListener( "submit", ( e ) => {
    const readTaskId = document.querySelector( "#task-id" ).value;
    const params = { id: readTaskId }; // new addition
    const urlParams = new URLSearchParams( Object.entries( readTaskId ) );

    fetch( "http://localhost:3000/tasks/" + urlParams, {
        method: 'get',
        headers: {
            'Accept': 'application/json, text/plain, */*',
            'Content-Type': 'application/json',
            "Authorization": `Bearer` + `${ inMemoryToken }`
        }
    } ).then( res => res.json() )
        .then( res => {
            console.log( res );
           
        }
        );
} );

E meu código js do nó de back-end é as (que está funcionando corretamente no carteiro):

router.get( "/tasks/:id", auth, async ( req, res ) => {
    const _id = req.params.id;
    try {
        const task = await Task.findOne( { _id, owner: req.user._id } );
        if ( !task ) {
            return res.status( 401 ).send( { error: "Task id not found" } );
        }
        res.send( { task } );
    } catch ( e ) {
        res.status( 400 ).send( e );
    }
} );

Qualquer ajuda é muito apreciada.

Respostas

MatiasG Aug 27 2020 at 00:54

Acho que você não precisa usar URLSearchParams como parâmetro, basta usar readTaskId

        const readTaskForm = document.querySelector("#task-id-form");
        readTaskForm.addEventListener("submit", (e) => {
          const readTaskId = document.querySelector("#task-id").value;
          //const params = { id: readTaskId }; // new addition

          //const urlParams = new URLSearchParams(Object.entries(readTaskId));
          fetch("http://localhost:3000/tasks/" + readTaskId, {
            method: "get",
            headers: {
              Accept: "application/json, text/plain, */*",
              "Content-Type": "application/json",
              Authorization: `Bearer` + `${inMemoryToken}`
            }
          })
            .then((res) => res.json())
            .then((res) => {
              console.log(res);
            });
        });