The thing I want to do is, when you click on a movie title you get detail data about the movie, when you click on a character you get detailed data on the character.
$(function(){
// create a keyup
$('#search').keyup(function (e) {
e.preventDefault();
//getting the search value from input
var searchTerm = $('#search').val();
//insensitive case
var exp = new RegExp(searchTerm, 'i');
//getting the swapi film data
$.getJSON("https://swapi.dev/api/films/", function (data) {//
//creating a output future values of data
var output = '<ul>'
//iterate through data.results with $.each
$.each(data.results, function (key, value) {
//if statment for searching the title, director, opening crawal
if((value.title.search(exp)!= -1) || (value.director.search(exp)!= -1) || (value.opening_crawl.search(exp)!= -1)){
//create a list
//output with, title, director, opening crawl and characters
output += '<li>';
output+='<a href="#" id="titleVal" >'+value.title+'</a>' //need a clickable event for to get the charachters data and not just the links
output+='<li>'+value.director+'</li>'
output+='<p>'+value.opening_crawl+'</p>'
output+='</li>';
}
});
//closing the ul
output += '</ul>'
$('#update').html(output);
//output to html
//creating a click function
$('a').on('click', function()
{
$.getJSON("https://swapi.dev/api/people/", data => {
//itarate through
//getting the characters names
for (const i in data.results) {
let x = data.results[i];
console.log(x.name);
console.log(x.height);
$('#info').append('<li>'+x.name+'</li><li>'+x.height+'</li>')
// for (const j in x) {
// let b = x[j];
// // console.log(b);
// $('#info').append('<li>'+b+'</li>')
// }
}
});
//how do i grab characters, for each movie title
function grabCharac (){
}
})
}//json
);//key up
});
}); //doc.ready
