-3

I am trying to parse this HummingBird api with sample url : http://hummingbird.me/api/v1/search/anime?query=naruto

However, I do not know how to get each id seperately , or each name seperately. For e.g:- 

<!DOCTYPE html>
  <html>
  <body>

  <h2>Create Object from JSON String</h2>

  <p id="demo"></p>

  <script>
  document.getElementById("demo").innerHTML = //make this display name

  </script>

  </body>
  </html>

I want the demo element to display the title of the first one in the list. Can anyone tell me how I can possibly do this?

Rusab Abrez Asher
  • 27
  • 2
  • 3
  • 9
  • are you talking about splitting the `?query=naruto` into `{"query": "naruto"}`? – ZomoXYZ Sep 11 '16 at 18:59
  • are you looking for JSON.parse ??? – JEY Sep 11 '16 at 19:01
  • No, for e.g in the url there is the JSON : [ { "id":11, "mal_id":20, "slug":"naruto", "status":"Finished Airing", "url":"https://hummingbird.me/anime/naruto", "title":"Naruto", "alternate_title":"", "episode_count":220, "episode_length":23, and so on and I want to get the title of this one or the episode count in the demo – Rusab Abrez Asher Sep 11 '16 at 19:01
  • Possibly JSON.parse but an example for a url based JSON would be appreciated. – Rusab Abrez Asher Sep 11 '16 at 19:02
  • Possible duplicate of [How to read an external local JSON file in Javascript](http://stackoverflow.com/questions/19706046/how-to-read-an-external-local-json-file-in-javascript) – ZomoXYZ Sep 11 '16 at 19:14

3 Answers3

1

If you use jQuery below is the snippet you can use. 

var results = "";
$.get("http://hummingbird.me/api/v1/search/anime?query=naruto",function(data){
  results = JSON.parse(data);
});
console.log(results);
Muaaz Rafi
  • 1,469
  • 2
  • 15
  • 23
  • Should this be in the $(document).ready......... {} thing? also how can i for e.g get something specific ffrom the result like just the episode-count? – Rusab Abrez Asher Sep 11 '16 at 19:07
  • You must know the basics of JSON in JavaScript to accomplish this. You can use Google to find documentation for this. http://www.json.org/js.html – ZomoXYZ Sep 11 '16 at 19:13
  • 1
    this can also be accomplished with `jQuery.getJSON()` (http://api.jquery.com/jQuery.getJSON/) – ZomoXYZ Sep 11 '16 at 19:16
  • Depends on where you are calling it, if you are using at page load then defiantly $(document).ready should come but if it depends on another ajax call then inside that call. For getting just the count you will need to loop though the results and construct the required result set like below. var objecter = [] $.each(results,function(index,value){ objecter.push(value.[required_key]) }); – Muaaz Rafi Sep 11 '16 at 19:20
1
  1. Download JQuery from here and put the file next to your html.
  2. Add this element between the html tag and the body

<head>
    <script  type="text/javascript" src="jquery-3.1.0.min.js"></script>
</head>
  1. Replace document.getElementById("demo").innerHTML = with:

$(document).ready(function(){
                $.getJSON("http://hummingbird.me/api/v1/search/anime?query=naruto", null, function (data) {document.getElementById("demo").innerHTML = data[0].title})
            })

JQuery is a JS library that makes life easy. The function below takes 1 function as an argument and executes it after the page has loaded

$(document).ready()

The next function makes an HTTP GET request and parses the response to js object

$.getJSON("http://hummingbird.me/api/v1/search/anime?query=naruto", null,...)

The next function gets the title of the first element of data 

function (data) {document.getElementById("demo").innerHTML = data[0].title}
AvielNiego
  • 1,193
  • 2
  • 12
  • 27
0

mmm try this fiddle i don't know exactly how you read the file but if you get a string do the JSON.parse(STRING) before.

https://jsfiddle.net/79a1abbL/3/

Salvatore
  • 177
  • 9