How to Call Array in Object by Javascript from API URL

Question

I try to call API from swapi, I need to show title of films. I using jQuery to create it

here is my javascript

$(function(){
  function promiseTest(){
    return $.ajax({
      type: 'GET',
      url: 'https://swapi.co/api/people/',
    })
  }
  function promiseTest2(){
    return $.ajax({
      type: 'GET',
      url: 'https://swapi.co/api/films/', 
    })
}
var promise = promiseTest();
var promise2 = promiseTest2();

var bothPromise = $.when(promise, promise2);
bothPromise.done(function(data){
  $.each(data, function(i, name){
  $("#app").append("<ul><li>Name: "+ i.name +"</li><li>Height: "+name.height+" </li><li>Skin Color: "+ name.skin_color +"</li><li>Gender: "+name.gender+" </li><li>Film: "+ name.films.title +"</ul>")
})
})

HTML:

<div id="app"></div>

Here is my full code http://jsfiddle.net/dedi_wibisono17/phq7t50u/2/

I has try like this code, but I want to show the title of films from https://swapi.co/api/films/.

Anybody help? Thank you

did you console the response and check?

Ramesh
– Ramesh

2018-07-28 07:24:16 +00:00
Commented Jul 28, 2018 at 7:24 — Ramesh
– Ramesh, Commented Jul 28, 2018 at 7:24

CertainPerformance · Accepted Answer · 2018-07-28 07:22:51Z

1

The array of people is available in data[0].results - it doesn't exist in the base data.
When you use jQuery .each, the first argument is the iteration number, not the item being iterated over. Give the function a second argument, and use it when specifying the names, heights, etc of the people:

function promiseTest() {
  return $.ajax({
    type: 'GET',
    url: 'https://swapi.co/api/people/',
  })
}

function promiseTest2() {
  return $.ajax({
    type: 'GET',
    url: 'https://swapi.co/api/films/',
  })
}

var promise = promiseTest();
var promise2 = promiseTest2();

var bothPromise = $.when(promise, promise2);

bothPromise.done(function(data) {
  $.each(data[0].results, function(i, e) {
    $("#app").append("<ul><li>Name: " + e.name + "</li><li>Height: " + e.height + " </li><li>Skin Color: " + e.skin_color + "</li><li>Gender: " + e.gender + " </li><li>Film: " + e.films + "</ul>")
  })
  /*alert("done")*/
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="app"></div>

But there's no need for jQuery at all just for this - you can use fetch and Promise.all, which are supported natively in non-ancient browsers:

Promise.all([
  fetch('https://swapi.co/api/people/').then(res => res.json()),
  fetch('https://swapi.co/api/films/').then(res => res.json())
]).then(data => {
  const app = document.querySelector('#app');
  data[0].results.forEach((e) => {
    app.innerHTML += "<ul><li>Name: " + e.name + "</li><li>Height: " + e.height + " </li><li>Skin Color: " + e.skin_color + "</li><li>Gender: " + e.gender + " </li><li>Film: " + e.films + "</ul>"
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="app"></div>

answered Jul 28, 2018 at 7:22

CertainPerformance

373k55 gold badges354 silver badges359 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

dedi wibisono Over a year ago

Ohh thanks for explain it. But how to I show: Name : Luke Skywalker .... Film : The Empire Strikes Back, Revenge of the Sith, Return of the Jedi, A New Hope, The Force Awakens Not URL to show in frontend but the title of films from swapi.co/api/films any idea?

CertainPerformance Over a year ago

It looks like you'd have to make a separate fetch for each of said films in the films array, unless the API provides an easier way.

Collectives™ on Stack Overflow

How to Call Array in Object by Javascript from API URL

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related