What could be the reason that my JSON request is not functioning properly?

I am currently working on creating a movie search application. This project marks my first time delving into json and I'm facing some issues with my code. As of now, I have it set up and running smoothly on localhost through xampp. On submitting the form

$('.search-form').submit(function (evt) {
        // body...
        evt.preventDefault();
        var $searchBar = $('#search');
        var omdbApi = 'http://www.omdbapi.com/?';
        var movieSearchTerm = $searchBar.val();
        var searchData = {
            s:movieSearchTerm,
            r:'json'
    } 

Below is the callback function:

 function displayMovies(data) {
        // looping through each search result
        $.each(data.items,function(i,movie) {
        movieHTML += '<li class="desc">';
        // including movie title
        movieHTML += '<a href="' + movie.Title + '" class="movie-title">';
        // adding release year
        movieHTML += '<a href="' + movie.Year + '" class="movie-year">';
        // displaying movie poster
        movieHTML += '<img src="' + movie.Poster + '" class="movie-poster"></li>';
        $('#movies').html(movieHTML);
      }); // end each
      // movieHTML += '</li>'; 
    }
    $.getJSON(omdbApi, searchData, displayMovies);
});//end submit

Answer №1

r:json

Oops, a mistake was made.

You forgot to define a variable named json and the platform is expecting the value of r to be in the format of json.

Remember to enclose string literals with either " or '.

data.items

However, the JSON output does not include items, it actually has Search.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

When creating a dynamic page number using JavaScript during a print event, the height of an A4 page is not taken into

While creating my A4 invoice using HTML, CSS, and JS, everything appears correctly in the print preview. However, I am encountering an issue where the page number is not aligned properly and extra empty pages are generated automatically. Below is a snippe ...

Encountering difficulties in JavaScript while trying to instantiate Vue Router

After following the guide, I reached the point where creating a Vue instance was necessary (which seemed to work). However, it also required providing a Vue Router instance into the Vue constructor, as shown below. const router = new VueRouter({ routes }) ...

The component is no longer able to locate the imported element when it is being shared

Recently, I imported a component into the shared module in order to use it across 2 different modules. However, upon recompiling the app, an error message appeared stating that the jodit-editor, which is utilized by the shared component, is not recognized ...

Tips for resolving syntax errors in try-catch blocks when working with Node.js

I have encountered an issue with the code in my controller.js file. It runs fine on my local machine, but when running on an AWS EC2 instance, I am getting an error. Can someone help me with this problem? query(request_body,(results,error) =>{ if ...

What is the best way to integrate a Next.js Image component with a set width and an adaptable height in order to maintain the image's proportions?

This code snippet uses ChakraUI styling and retrieves images from SanityCMS: <Box w="500px" h="500px" bg="red"> <Image src={allArtPieces[0].imageUrl} alt={allArtPieces[0].title} width="500px" ...

Why won't the click event work in Vue when using v-if or v-show?

Attempting to trigger a click event from a div, but if v-if false is present during component rendering, the click event does not work. Here's the code snippet: export default { name: "ProSelect", data() { return { isActive: false ...

Insert a THREE.Points element into the scene: Error in THREE.Object3D.add: The object being added is not a valid instance of THREE.Object3D (

Trying to incorporate a system of particles, a THREE.Points element into the scene has resulted in the following error: "THREE.Object3D.add: object not an instance of THREE.Object3D. undefined" The code used for this is as follows: var backCount = 1800; ...

Sort through the array using a separate array in Vuejs

I am currently working with two arrays: { "products": [ { "name": "Jivi", "Hint": "45-60 IE/kg alle 5 Tage\n60 IE 1x/Woche\n30-40 IE 2 x/Woche", "frequency": ["1", "2", "8"] }, { "name": "Adynovi", ...

Working with handleChange and onSubmit functions in pure JavaScript without any libraries

Currently developing my initial app, which is a login/register form using JS/Node.js/MySQL. I am facing issues with connecting my form to the database in order to store user data. I haven't utilized "handleChange" or "onSubmit" functions as I am not e ...

Ways to retrieve information from a URL using the .get() method in a secure HTTPS connection

As I work on handling user input from a form using node.js, express, and bodyParser, I encounter an issue. Even after using console.log(req.body), the output is {}. This is puzzling as there is data in the URL when the form is submitted successfully at htt ...

Encountering an issue with Angular2 where it is unable to load a JSON file, presenting the error message: "Cannot resolve all parameters

I've been trying to incorporate a json file into my Angular app, but I can't seem to pinpoint the issue. The error message keeps indicating that it cannot resolve all parameters of my component. (I had no trouble loading data directly from the c ...

Why is it that when I click outside of the <html> element, the click event bound to the <html> element is triggered?

const html = document.querySelector('html') const body = document.querySelector('body') body.onclick = () => { console.log('body clicked') } html.onclick = () => { console.log('html clicked') } document. ...

The Flask server push appears to be functioning correctly, yet the EventSource.onmessage event is not triggering as expected

My implementation includes a route /stream that is designed to push the string 'test' every second. Upon accessing this URL (localhost:12346/stream) on Chrome, I observed that it opens a blank page and adds "test" to the page every second. This ...

Utilizing Node.js ORM2 callback functions with custom parameters

Currently, I am developing models using a for loop: for (var j = 0; j < data.length; j++) { models.MyModel1.create({ name : data[j].name }, function(err, model){ if (err) { throw err } ...

What is the process for obtaining a JSON structure that represents a Mongoose schema?

Currently, I am working on creating an API in Express and utilizing Mongoose for my data layer. My goal is to make the API as self-explanatory as possible so that the frontend can automatically create forms and validations based on the schema rules establi ...

Inquiry on integrating Spotify with Axios for my debut solo project (beginner inquiry)

I have a question regarding my first solo project in React. I started learning code in September and I'm facing an issue while making a POST request to the Spotify API to retrieve an access token: Despite following the recommended 'Content-Type& ...

Reorganizing asynchronous code into a nested synchronous structure in Meteor/React

Recently, I've been experimenting with running data fetching code in a container component and passing it to the display component in order to streamline my use of hooks and reduce load time. I've tested both await/sync and Meteor's wrapAsyn ...

Struggling to make a basic JavaScript prompt function as expected

<html> <title>UniqueTitle</title> <head> <link rel="stylesheet" type="text/css" href="style.css" > <script type="text/javascript"> function modifyDates() { var dates = pr ...

Saving a PySpark DataFrame to a JSON file in its true format

Is there a way to save a PySpark DataFrame to a JSON file in a specific format? Despite trying the code mentioned in the documentation: df.write.json('myfile.json') The resulting file contains dictionaries stored as individual lines, causing i ...

Passing props to child components in Next.js: A step-by-step guide

I am currently working with my index.js page, which incorporates a layout component: import Layout from "../components/layout"; export default function Home({posts}) { console.log(posts) return ( <Layout posts={posts}> & ...