alert 2 arrays in same line javascript

Question

I have a problem alerting out 2 arrays on same line in Javascript. The user should write Movie name and movie rating(1-5) 5 times, and printMovies() function should print out users (movie)name and (movie)rating in a single line something like this:

Movie             Rating

Star Wars         5

Lord of the Rings 4

Casino            4

Movie4            3

Movie5            2

How do I alert out all of five inputs in a single line (movie + rating) per line, AFTER they have got input from user?

//CODE

var title;

var rating;

var a = [];

var movies = [];

var ratings = [];

function buttonAddMovie()//Button onclick
{

    addMovie(title, rating)
    addMovie(title, rating)
    addMovie(title, rating)
    addMovie(title, rating)
    addMovie(title, rating)
}

function addMovie(title, rating) {

    do{
    title = prompt("Enter movie: ");
    }
    while (title == "");

    do {
    rating = parseInt(prompt("Enter rating 1-5 on movie " + (title)));
    }
    while (rating > 5 || rating < 1);

    movies.push(title);//Pushing title to movies
    a.push(movies);//Pushing movies to a array
    ratings.push(rating);//Pushing rating to ratings
    a.push(ratings);//Pushing ratings to a array
    printMovies()
}

function printMovies() {

    for (var i = 0; i < a.length; i++) {
    alert(a[0][0] + " " + a[0][1]);//Here is my biggest problem!

    }
}

Answer 1

The reason it wasn't working was you had an array, a.

You pushed the movie name to 'a'

a = ['Movie name'];

But then you pushed the rating to 'a' separately

a = ['Rating'];

So the movie's name was replaced with rating, hence the alerts saying '(movie's name) undefined', then '(movie's rating) undefined'.

What I've done is removed the rating array and pushed the movie name and rating at the same time.

Also, I've changed the for loop to display the current movie by changing

alert(a[0][0] + " " + a[0][1]);

to

alert(a[i][0] + " " + a[i][1]);

otherwise it will always display the first movie rating.

    var title;

    var rating;

    var a = [];

    var movies = [];

    function buttonAddMovie()//Button onclick
    {
        addMovie(title, rating, document.getElementById('quantity').value)
    }

    function addMovie(title, rating, amount) {
      for(var count = 0; count < amount; count++){
        do{
        title = prompt("Enter movie: ");
        }
        while (title == "");

        do {
        rating = parseInt(prompt("Enter rating 1-5 on movie " + (title)));
        }
        while (rating > 5 || rating < 1);

        movies.push(title,rating);//Pushing title to movies
        a.push(movies);//Pushing movies to a array
        movies = [];
      }
      printMovies();
    }

    function printMovies() {

        for (var i = 0; i < a.length; i++) {
          alert(a[i][0] + " " + a[i][1]);
          document.getElementById('movielist').innerHTML+= "<li>"+a[i][0]+" - "+a[i][1]+"</li>"; // Adds movies to the <ul>
        }
    }

<h2>Add</h2>
<input id='quantity' placeholder='Amount of movies you want to add' /><br>
<button onclick='buttonAddMovie();'>Add Movies</button>
<h2>Movie list</h2>
<ul id='movielist'></ul>

Now you can stack as many as you want by writing the number in the input tag.

The movies are then displayed at the end in an unformatted list.

Very basic code, but I hope it helps.

Answer 2

You problem is in the addMovie function your push the array to array. that means structure of the a is

a = [['title'] , ['rating'] , ['title','title1'],['rating',ratting1],......]

Try this with json object.

  var movies = [];
       function addMovie(title, rating) {
            var movie = {};
            do {
                title = prompt("Enter movie: ");
            }
            while (title == "");

            do {
                rating = parseInt(prompt("Enter rating 1-5 on movie " + (title)));
            }
            while (rating > 5 || rating < 1);
            movie.title = title;
            movie.ratings = rating; movies.push(movie);
        }
        function printMovies() {
            for (var i = 0; i < movies.length; i++) {
                alert(movies[i].title + " " + movies[i].ratings); 
            }
        }

function buttonAddMovie()//Button onclick
{

    addMovie(title, rating);
    addMovie(title, rating);
    addMovie(title, rating);
    addMovie(title, rating);
    addMovie(title, rating);
    printMovies();
}

Answer 3

<html>

<head>
  <script>
    var arr = [{
      "Movie": "Movie1",
      "Rating": 1
    }, {
      "Movie": "Movie2",
      "Rating": 2
    }, {
      "Movie": "Movie3",
      "Rating": 2
    }, {
      "Movie": "Movie5",
      "Rating": 4
    }, {
      "Movie": "Movie4",
      "Rating": 5
    }, ];

    var str = "";

    for (var i = 0; i < arr.length; i++) {
      str += "Movie Name: " + arr[i].Movie + " || Rating: " + arr[i].Rating + "\n";
}
      alert( "Json Iterated Output \n" + str);
  </script>
</head>

</html>