How to loop through a json array with links and show the character names?

1

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);
    });
  });
});
2

When I run your code posted above, I am getting results based on what I typed into the text box.

3

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

Skärmavbild 2020-04-01 kl. 17.01.59

Skärmavbild 2020-04-01 kl. 17.01.42
Skärmavbild 2020-04-01 kl. 17.01.42530×585 34.1 KB

4

I get urls of characters but no undefined. What search term are you using?

5

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.

6

value.characters is an array of character urls. You will need to use $.getJSON for each url to get the character name.

7

Ok, thank you for the help, I will try to figure it out.

8

@RandellDawson, i want ask one more question,

 

  $(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.

9