jquery .each array json

Question

Im new in here and this is my first post and i hope someone can help me. im also new to jquery/jquery-mobile, API and JSON

im using aspx site, dont know if thats a help.

im making a search for movies on mobile with help from a jquery mobile, API and my JSON file is a array, but i cant finde out how i can get more then 1 movie out at one time.

so i hope someone can help me.

  $(document).ready(function() {

    $("#Search_B").click(function() {

      $("#intro_h3").hide();

      var S_Value = $('#GetMovies').val();
      var url = 'http://www.omdbapi.com/?s=' + S_Value;
      var json = $.getJSON(url);

      console.log(url);


      $("#Search_B").each(json, function(i, value) {

        $('#movie').html('');
        $('#movie').append('<h2> Title: ' + value.Search[0].Title + ' </h2>');
        $('#movie').append('<h3> Year: ' + value.Search[0].Year + ' </h3>');
        $('#movie').append('<h3> Type: ' + value.Search[0].Type + ' </h3>');
        $('#movie').append('<a href=http://www.imdb.com/title/' + value.Search[0].imdbID + ' target="_blank"> <img src=' + movie.Search[0].Poster + ' /> </a>');
        $('#movie').append('<br><a href=http://www.imdb.com/title/' + value.Search[0].imdbID + ' target="_blank"> Imdb </a>');
      });

    });

  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">
  <title></title>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
  <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
  <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

</head>

<body>
  <form id="form1" runat="server">
    <div>

      <div data-role="page" id="page1">
        <div data-role="header">
          <h1>Welcome to the online movie searcher</h1>
          <div data-role="navbar">
            <ul>
              <li><a href="#page1">Home</a>
              </li>
              <li><a href="#page2">Options</a>
              </li>
            </ul>
          </div>
        </div>

        <div data-role="main" class="ui-content">

          <!-- <input type="text" id="EnterMovie" /> -->
          <input type="search" id="GetMovies" />
          <input type="button" id="Search_B" value="Search" />

          <div id="movie"></div>


          <h3 id="intro_h3">Search for a movie up top!</h3>


        </div>

        <div data-role="footer">
          <h1>My Footer</h1>
        </div>
      </div>
    </div>
  </form>
</body>

</html>

Washington Guedes · Accepted Answer · 2017-01-19 18:27:10Z

1

Summary of the changes made to the code work:

You are using $.html('') to clear the #movie section inside the $.each() call. Instead you should do it only once outside the loop.
$('#movie') is the jQuery function being executed with '#movie' as argument and it requires process time. You can chain the $.append() methods to save process' time.
$.getJSON(url, callback) is an asynchronous method, your json variable will be available inside callback function only after the API has finished its work.
$.each(array, function(key, val) {}) will not work with a JSON object as array. The first argument must be the iterable json.Search instead.

Your final code should look like:

$(document).ready(function () {
  $("#Search_B").click(function () {
    $("#intro_h3").hide();
    $('#movie').html('');

    var S_Value = $('#GetMovies').val();
    var url = 'http://www.omdbapi.com/?s=' + S_Value;

    $.getJSON(url, function waitAPIthen (json) {
        $.each(json.Search, function (key, item) {
          $('#movie')
            .append('<h2> Title: ' + item.Title + ' </h2>')
            .append('<h3> Year: ' + item.Year + ' </h3>')
            .append('<h3> Type: ' + item.Type + ' </h3>')
            .append('<a href=http://www.imdb.com/title/' + item.imdbID + ' target="_blank"> <img src=' + item.Poster + ' /> </a>')
            .append('<br><a href=http://www.imdb.com/title/' + item.imdbID + ' target="_blank"> Imdb </a>');
        });
    });
});

edited Jan 19, 2017 at 18:27

answered Jan 19, 2017 at 17:14

Washington Guedes

4,3753 gold badges35 silver badges59 bronze badges

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

17 Comments

Panzer Over a year ago

thx didnt know that :) and i have also replaced value.Search[0] to value.Search[i], but it still dont work :/ But thx

Washington Guedes Over a year ago

The loop is being executed once or none?

Panzer Over a year ago

none at all, like the button dont work. i can press it but nothing happens

Washington Guedes Over a year ago

Try console.log(json); before the $.each(), what is the result in your console? I updated my answer to use json.value instead...

Washington Guedes Over a year ago

Try my updated answer, does it throw any error in your console(F12) ?

|

Collectives™ on Stack Overflow

jquery .each array json

1 Answer 1

17 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

17 Comments

Your Answer

Sign up or log in

Post as a guest

Related