I have tried to get the values of the json url and show the characters name. I get undefined when doing it. I tried with $each and with for loop but without results. Maybe I need to make a function or something.If somebody can help me or push me to the right direction I will appreciate it.
<div id="searcharea">
<label for="search">Live search Star Wars data base</label>
<p></p>
<input type="search" name="search" id="search" placeholder="search"> </div>
<div id="update"></div>
$(document).ready(function() {
$('#search').keyup(function() {
let searchTerm = $('#search').val();
let myEx = new RegExp(searchTerm, "i");
//json file, output and if statement
$.getJSON("https://swapi.co/api/films/", function(data) {
let output = ' <ul class="searchResults">';
$.each(data.results, function(key, value) {
if ((value.title.search(myEx) != -1) || (value.director.search(myEx) != -1) || (value.opening_crawl.search(myEx) != -1)) {
output += '<li>';
output += '<h3>' + value.title + '</h3>'
output += '<h4>' + value.director + '</h4>'
output += '<p>' + value.opening_crawl + '</p>'
//I'm doing something wrong here, I just get the urls up
output += '<p>' + value.characters + '</p>'
output += '</li>'
}
});
output += '</ul>';
$('#update').html(output);
});
});
});
So you are getting the character names? I’m getting it like this, undefined when a write name after character, and links when only have value.charachters
I’m using the same as you. I want the names inside the urls. That’s my problem. To get the names inside the url, like Luke Skywalker and then show them.
$(document).ready(function() {
function getData(url, callback) {
$.ajax({
dataType: 'json',
type: 'GET',
async: true,
url: url,
success: function(data) {
callback(data);
},
error: function(xhr, status) {
alert('Sorry, i have a problem');
}
});
}
function getStarWars() {
$('#search').keyup(function () {
let searchTerm = $('#search').val();
let myEx = new RegExp(searchTerm, "i");
let output =' <ul class="searchResults">';
getData('https://swapi.co/api/films/', function(data) {
let output =' <ul class="searchResults">';
$.each(data.results, function (key, value) {
if((value.title.search(myEx) != -1 )|| (value.director.search(myEx) != -1 )||(value.opening_crawl.search(myEx) != -1 )){
output += '<li>';
output += '<a href="#" class="title">'+value.title+'</<a>'
output += '<h3><'+value.title+'></h3>'
output += '<h4>'+value.director+'</h4>'
output += '<p>'+value.opening_crawl+'</p>'
output += '<li>'+value.characters+'</li>'
output += '</li>'
}
});
output += '</ul>';
$('#update').html(output);
getData('https://swapi.co/api/people/', function(people) {
$.each(people.results, function (index, value) {
let ch ='<li>'+value.name+'</li>';
$('.title').on('click', function () {
$('#char').html(ch);
});
});
});
});
});
}
getStarWars();
});
<div id="searcharea">
<label for="search">Live search Star Wars data base</label>
<p></p>
<input type="search" name="search" id="search" placeholder="search">
</div>
<div id="update"></div>
<div id="char"></div>
the code looks like this now, when I press the title I want to present all the characters who belongs to that title.
I created a new $json but when I click the title nothin happens.
