javascriptnode.jsexpressaxiosomdbapi

OMDb API need help getting /results page after movie search using AXIOS


this is my current app.js code. I am trying to create a movie search that allows me to search a movie within a database and bring me back results of 10 movies within that keyword. For example. If I search "ALABAMA", I should receive back 10 movies in the database with the words ALABAMA. However, I cannot move forward because I am stuck on trying to use node.js, express.js, and axios together. Previously I was using Request instead of Axios, but because it has been deprecated, I opted to use axios instead. I am still learning, as it a bit tricky, but I just need help trying to get my /results. page to load. My VIEWS folder contains a "results.ejs" and "search.ejs". I am using the OMDb API from http://omdbapi.com/ . Any feedback will be greatly appreciated, I'm just trying to know where I messed up.

const express = require("express");
    const app = express();
    const axios = require("axios"); 
     
    app.set("view engine", "ejs");
    app.use(express.static(process.env.STATIC_DIR || "public"));
     
    app.get("/", function(req, res){
        res.render("search.ejs")
    })
    
    app.get("/results", (req, res) => {
        var searchTerm = req.query.search;
        var url = "https://www.omdbapi.com/?s=" + searchTerm + "&apikey=thewdb";
        axios.get('http://www.omdbapi.com/?i=tt3896198&apikey=thewdb')
        
        .then(response => {
            console.log(response.data.Search);
        res.render("results.ejs", {data: response.data.Search});
        })
        .catch(err => {
            console.log(err);
        })}) 
     
    app.listen(3000, () => {
        console.log("Movie App Has Started!!");
    })

my results.ejs code is below:

<h1>Results Page!!!</h1>
 
<% if (data == null) { %>
<p>No results. Please try refining your search terms.</p>
<% } else { %>
 
<ul>
    <% data["Search"].forEach(function(movie) { %>
    <li>
        <strong>
            <%= movie["Title"] %>
        </strong>
        - <%=movie["Year"]%>
    </li>
    <% }) %>
</ul>
 
<% } %>
 
<a href="/">Search Again!</a>

my search.ejs code is below:

<h1>
    Search For a Movie
</h1>

<form action="/results" method="GET">
    <input type="text" placeholder="search term" name="search">
    <input type="submit">
</form>

enter image description here


Solution

  • It seems you are passing a hardcoded URL string instead of the prepared URL string with the Search Term.

    Change this

     var url = "https://www.omdbapi.com/?s=" + searchTerm + 
     "&apikey=thewdb";
    axios.get('http://www.omdbapi.com/?i=tt3896198&apikey=thewdb')
    

    To this

    var url = "https://www.omdbapi.com/?s=" + searchTerm +"&apikey=thewdb";
    
    axios.get(url)