For loop through JSON (jQuery)

Question

I'm trying to make a for loop to simplify and shorten the code. I'm trying to make loop that have 5 repetitions and that add value +1 in the (filmi.Movies[0].Title).

var i = (filmi.Movies[0].Title);
for(i=0; i<5; i++){
  $(document).ready(function(){
$("ul:first").append('<li class="list-group-item">' + (filmi.Movies[0].Title) + '</li>').attr(filmi.Movies[0].imdbID)
$(filmi.Movies[0].imdbID).addClass('list-group-item list-group-item-action')
});
}

Fiddle JS https://jsfiddle.net/L70uqzbw/

Raw example what loop should do:

filmi.Movies[0].Title
filmi.Movies[1].Title
filmi.Movies[2].Title
filmi.Movies[3].Title
filmi.Movies[4].Title

I see so many things here : First, put your for inside the .ready() function, not the other way around. Then you use the .attr function and I don't see why. This function, with only one parameter just gives you the value of the attribute you're selecting. — Zenoo
– Zenoo, Commented May 12, 2017 at 8:53

Jurij Jazdanov · Accepted Answer · 2017-05-12 08:58:51Z

1

for (var i = 0; i < filmi.Movies.length; i++) {
  // use filmi.Movies[i].Title
}

answered May 12, 2017 at 8:58

Jurij Jazdanov

1,2688 silver badges11 bronze badges

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

1 Comment

Slasher Over a year ago

Exacly what I was looking for!

Sander Meijer · Accepted Answer · 2017-05-12 09:00:57Z

1

You only want the first 5 movie titles or all movie titles?

This way u get the first 5.

for(var i = 0; i < 5; i++)
{
  console.log(filmi.Movies[i].Title);
}

If u want all the movie titles u should use length:

for(var i = 0; i < filmi.Movies.length; i++)
{
  console.log(filmi.Movies[i].Title);
}

answered May 12, 2017 at 9:00

Sander Meijer

854 bronze badges

Comments

Ikhlak S. · Accepted Answer · 2017-05-12 09:03:24Z

0

First of all you need to have all your code within

$(document).ready(function(){ /*All your code, for loops, logic, etc */ }

Now your for loop would look like:

for(var i=0; i < filmi.Movies.length; i++)
{
  console.log(filmi.Movies[i].Title);
}

answered May 12, 2017 at 9:03

Ikhlak S.

9,10411 gold badges60 silver badges80 bronze badges

Comments

Ritwika Das · Accepted Answer · 2017-05-12 09:07:08Z

Please try

$(document).ready(function(){
var movieTitleLength = filmi.Movies.length;
alert(movieTitleLength);
var items = [];
for(i=0;i<movieTitleLength;i++){
	 var listMovie = filmi.Movies[i].Title;
   if(listMovie != null){
   items.push('<li>' + listMovie + '</li>');
   }
}
$(".list-group").append( items.join('') );
});
const filmi = {
  "Movies": [
    {
      "Title": "La La Land",
      "Year": "2016",
      "Rated": "PG-13",
      "Released": "25 Dec 2016",
      "Runtime": "128 min",
      "Genre": "Comedy, Drama, Music",
      "Director": "Damien Chazelle",
      "Writer": "Damien Chazelle",
      "Actors": "Ryan Gosling, Emma Stone, Amiée Conn, Terry Walters",
      "Plot": "A jazz pianist falls for an aspiring actress in Los Angeles.",
      "Language": "English",
      "Country": "USA, Hong Kong",
      "Awards": "Won 6 Oscars. Another 184 wins & 224 nominations.",
      "Poster": "https://images-na.ssl-images-amazon.com/images/M/MV5BMzUzNDM2NzM2MV5BMl5BanBnXkFtZTgwNTM3NTg4OTE@._V1_SX300.jpg",
      "Ratings": [
        {
          "Source": "Internet Movie Database",
          "Value": "8.3/10"
        },
        {
          "Source": "Rotten Tomatoes",
          "Value": "93%"
        },
        {
          "Source": "Metacritic",
          "Value": "93/100"
        }
      ],
      "Metascore": "93",
      "imdbRating": "8.3",
      "imdbVotes": "232,825",
      "imdbID": "tt3783958",
      "Type": "movie",
      "DVD": "25 Apr 2017",
      "BoxOffice": "$150,459,658.00",
      "Production": "Liongate Films",
      "Website": "http://www.lalaland.movie/",
      "Response": "True"
    },
    {
      "Title": "Fracture",
      "Year": "2007",
      "Rated": "R",
      "Released": "20 Apr 2007",
      "Runtime": "113 min",
      "Genre": "Crime, Drama, Mystery",
      "Director": "Gregory Hoblit",
      "Writer": "Daniel Pyne (screenplay), Glenn Gers (screenplay), Daniel Pyne (story)",
      "Actors": "Anthony Hopkins, Ryan Gosling, David Strathairn, Rosamund Pike",
      "Plot": "An attorney, intent on climbing the career ladder toward success, finds an unlikely opponent in a manipulative criminal he is trying to prosecute.",
      "Language": "English",
      "Country": "USA, Germany",
      "Awards": "2 wins & 2 nominations.",
      "Poster": "https://images-na.ssl-images-amazon.com/images/M/MV5BMzIzNjQyMzkwM15BMl5BanBnXkFtZTcwOTg5ODQ0MQ@@._V1_SX300.jpg",
      "Ratings": [
        {
          "Source": "Internet Movie Database",
          "Value": "7.2/10"
        },
        {
          "Source": "Rotten Tomatoes",
          "Value": "71%"
        },
        {
          "Source": "Metacritic",
          "Value": "68/100"
        }
      ],
      "Metascore": "68",
      "imdbRating": "7.2",
      "imdbVotes": "146,665",
      "imdbID": "tt0488120",
      "Type": "movie",
      "DVD": "14 Aug 2007",
      "BoxOffice": "$39,000,000.00",
      "Production": "New Line",
      "Website": "http://www.fracturemovie.com/",
      "Response": "True"
    },
    {
      "Title": "Legend",
      "Year": "2015",
      "Rated": "R",
      "Released": "20 Nov 2015",
      "Runtime": "132 min",
      "Genre": "Biography, Crime, Drama",
      "Director": "Brian Helgeland",
      "Writer": "Brian Helgeland, John Pearson (book)",
      "Actors": "Paul Anderson, Tom Hardy, Christopher Eccleston, Joshua Hill",
      "Plot": "Identical twin gangsters Ronald and Reginald Kray terrorize London during the 1960s.",
      "Language": "English",
      "Country": "UK, France, USA",
      "Awards": "6 wins & 10 nominations.",
      "Poster": "https://images-na.ssl-images-amazon.com/images/M/MV5BMDQ4MGY0NWUtY2MxOC00YzI5LTg0OTEtZjNmY2Q2ZmM0MTA1XkEyXkFqcGdeQXVyNTQzOTc3MTI@._V1_SX300.jpg",
      "Ratings": [
        {
          "Source": "Internet Movie Database",
          "Value": "7.0/10"
        },
        {
          "Source": "Rotten Tomatoes",
          "Value": "61%"
        },
        {
          "Source": "Metacritic",
          "Value": "55/100"
        }
      ],
      "Metascore": "55",
      "imdbRating": "7.0",
      "imdbVotes": "106,814",
      "imdbID": "tt3569230",
      "Type": "movie",
      "DVD": "01 Mar 2016",
      "BoxOffice": "$14,146,549.00",
      "Production": "Universal Studios",
      "Website": "http://www.legend-the-movie.com/",
      "Response": "True"
    },
    {
      "Title": "Locke",
      "Year": "2013",
      "Rated": "R",
      "Released": "18 Apr 2014",
      "Runtime": "85 min",
      "Genre": "Drama",
      "Director": "Steven Knight",
      "Writer": "Steven Knight",
      "Actors": "Tom Hardy, Olivia Colman, Ruth Wilson, Andrew Scott",
      "Plot": "Ivan Locke, a dedicated family man and successful construction manager, receives a phone call on the eve of the biggest challenge of his career that sets in motion a series of events that threaten his carefully cultivated existence.",
      "Language": "English",
      "Country": "UK, USA",
      "Awards": "7 wins & 31 nominations.",
      "Poster": "https://images-na.ssl-images-amazon.com/images/M/MV5BMTQ1MjE5MzU2M15BMl5BanBnXkFtZTgwNzE4OTMzMTE@._V1_SX300.jpg",
      "Ratings": [
        {
          "Source": "Internet Movie Database",
          "Value": "7.1/10"
        },
        {
          "Source": "Rotten Tomatoes",
          "Value": "91%"
        },
        {
          "Source": "Metacritic",
          "Value": "81/100"
        }
      ],
      "Metascore": "81",
      "imdbRating": "7.1",
      "imdbVotes": "100,104",
      "imdbID": "tt2692904",
      "Type": "movie",
      "DVD": "12 Aug 2014",
      "BoxOffice": "$1,326,469.00",
      "Production": "A24 Films",
      "Website": "http://www.lockethemovie.com/",
      "Response": "True"
    },
    {
      "Title": "Mad Max: Fury Road",
      "Year": "2015",
      "Rated": "R",
      "Released": "15 May 2015",
      "Runtime": "120 min",
      "Genre": "Action, Adventure, Sci-Fi",
      "Director": "George Miller",
      "Writer": "George Miller, Brendan McCarthy, Nick Lathouris",
      "Actors": "Tom Hardy, Charlize Theron, Nicholas Hoult, Hugh Keays-Byrne",
      "Plot": "A woman rebels against a tyrannical ruler in postapocalyptic Australia in search for her home-land with the help of a group of female prisoners, a psychotic worshipper, and a drifter named Max.",
      "Language": "English, Russian",
      "Country": "Australia, USA",
      "Awards": "Won 6 Oscars. Another 210 wins & 193 nominations.",
      "Poster": "https://images-na.ssl-images-amazon.com/images/M/MV5BMTUyMTE0ODcxNF5BMl5BanBnXkFtZTgwODE4NDQzNTE@._V1_SX300.jpg",
      "Ratings": [
        {
          "Source": "Internet Movie Database",
          "Value": "8.1/10"
        },
        {
          "Source": "Rotten Tomatoes",
          "Value": "97%"
        },
        {
          "Source": "Metacritic",
          "Value": "90/100"
        }
      ],
      "Metascore": "90",
      "imdbRating": "8.1",
      "imdbVotes": "624,273",
      "imdbID": "tt1392190",
      "Type": "movie",
      "DVD": "01 Sep 2015",
      "BoxOffice": "$129,483,877.00",
      "Production": "Warner Bros.",
      "Website": "http://www.madmaxmovie.com/",
      "Response": "True"
    },
    {
      "Title": "The Wolf of Wall Street",
      "Year": "2013",
      "Rated": "R",
      "Released": "25 Dec 2013",
      "Runtime": "180 min",
      "Genre": "Biography, Comedy, Crime",
      "Director": "Martin Scorsese",
      "Writer": "Terence Winter (screenplay), Jordan Belfort (book)",
      "Actors": "Leonardo DiCaprio, Jonah Hill, Margot Robbie, Matthew McConaughey",
      "Plot": "Based on the true story of Jordan Belfort, from his rise to a wealthy stock-broker living the high life to his fall involving crime, corruption and the federal government.",
      "Language": "English, French",
      "Country": "USA",
      "Awards": "Nominated for 5 Oscars. Another 36 wins & 160 nominations.",
      "Poster": "https://images-na.ssl-images-amazon.com/images/M/MV5BMjIxMjgxNTk0MF5BMl5BanBnXkFtZTgwNjIyOTg2MDE@._V1_SX300.jpg",
      "Ratings": [
        {
          "Source": "Internet Movie Database",
          "Value": "8.2/10"
        },
        {
          "Source": "Rotten Tomatoes",
          "Value": "77%"
        },
        {
          "Source": "Metacritic",
          "Value": "75/100"
        }
      ],
      "Metascore": "75",
      "imdbRating": "8.2",
      "imdbVotes": "849,538",
      "imdbID": "tt0993846",
      "Type": "movie",
      "DVD": "25 Mar 2014",
      "BoxOffice": "$91,330,760.00",
      "Production": "Paramount Studios",
      "Website": "http://www.thewolfofwallstreet.com/",
      "Response": "True"
    }
  ]
}

.container ul:nth-child(1) li {
  cursor: pointer;
}

html,
body {
  height: 100%;
}

.container {
  min-height: 100%;
}

<!DOCTYPE html>
<html>

<head>
  <script data-require="jquery@*" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <link data-require="[email protected]" data-semver="4.0.5" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" />
  <link rel="stylesheet" href="style.css" />
  <script src="seznam-filmov.js"></script>
  <script src="script.js"></script>
</head>

<body>
  <h1>List of movies</h1>
  <div class="container">

    <div class="row">

      <div class="col">
        <ul class="list-group"></ul>
        <br />
        <button class="btn btn-outline-primary btn-lg btn-block">Ponastavi</button>
        <br/>
      </div>

      <div class="col">
        <div class="card" style="width: 20rem;">
          <img class="card-img-top" src="" />
          <div class="card-block">
            <h4 class="card-title"></h4>
            <p class="card-text"></p>
          </div>
          <ul class="list-group list-group-flush"></ul>
          <div class="card-block">
          </div>
        </div>
      </div>

    </div>
  </div>
</body>

</html>

Andwari · Accepted Answer · 2017-05-12 09:11:25Z

0

In your for-Loop, just pass the i to the Array?

You also must move the for-Loop inside the the ready-function. $(document).ready is called when the document is loaded and then executes the for-loop.

$(document).ready(function(){
  for(i=0; i<5; i++){
    $("ul:first").append('<li class="list-group-item">' +  (filmi.Movies[i].Title) + '</li>').attr(filmi.Movies[i].imdbID)
    $(filmi.Movies[i].imdbID).addClass('list-group-item list-group-item-action')
  }
});

I don't understand why you initialize the var i with the first Movie Title and then use it as an integer.

edited May 12, 2017 at 9:11

answered May 12, 2017 at 8:55

Andwari

1813 silver badges13 bronze badges

2 Comments

Slasher Over a year ago

I'm begginer and still learning. I really don't know fix this loop.

Andwari Over a year ago

The for-Loop increments the i with every loop so here it goes from 0 to 4. If you pass it to the Movies-arraylist like filmi.Movies[i] it does get the movies from 0 to 4, just like you wanted.

Collectives™ on Stack Overflow

For loop through JSON (jQuery)

5 Answers 5

1 Comment

Comments

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related