Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

JavaScript Viewing Javascript on the Web Page.. Also Attributing an Image?

gothictrade

Well-Known Coder
I'm thinking...
I want to make a sort of.. index.. for movies that I've watched. I also want to add some data about each entry, so that I can make a page like "horror movies" and every movie with the genre labeled as 'horror' would be set on that page, and I would have a poster artwork img attributed to each movie entry in the system that I add..

But anyways.. thinking about how to do this...

Code:
let inception = {
    name: 'Inception',
    releaseYear: 2010
    rating = 7
};

That is off the top of my head trying to think about how it would look. I would also include the genre.


So I guess my first two questions are..

1. Is it possible to include an image to attribute to that?

2. I know how to view the Javascript in the console of a web browser but.. Im not sure how I would go ahead to translate javascript into something actually viewable in the standard webpage..
 
Okay I'm going to grab some coffee and see what I can do about this...

So in my HTML document I can put..

Code:
<script>
    document.body.innerHTML = "This is text";
</script>

To make text appear on my website.

04.png

Now.. I don't want to manually type "This is text", I want to input something like.. a call to a variable?
like
if
Code:
let inception = {
    name: 'Inception',
    releaseYear: 2010
    rating = 7
    movie = 1
};

So I want the TITLE of movie number 1 to appear.
so can I do something like..
"display movie 1" or something?
 
That's certainly doable, though doing all this by hand is more work than if you were using a framework where you can separate your view (what you want to show) from your model (the movies). But you're learning, so all of that will come in time.

So you can include an image attribute in your film object just like any other:

JavaScript:
let inception = {
    name: "Inception",
    image: "https://upload.wikimedia.org/wikipedia/en/1/18/Inception_OST.jpg"
    releaseYear: 2010,
    rating: 7,
    movie: 1
};

What you do with that (and any of the other attributes) is up to you of course.

Have you come across arrays yet? If you want to find movie 1 for instance, you'll want a collection of movies grouped in a way that you can look through them.

Simply put, you'd have a collection of movies:

JavaScript:
let movies = [
    {
        name: "Inception",
        image: "https://upload.wikimedia.org/wikipedia/en/1/18/Inception_OST.jpg"
        releaseYear: 2010,
        rating: 7,
        movie: 1
    },
    {
        name: "Movie 2",
        image: "image url"
        releaseYear: 2020,
        rating: 10,
        movie: 2
    }
    // etc..
];

So then you can create your method for looking for the movie 1 and drawing it how you like to HTML:

JavaScript:
function drawMovie(id) {
    let movie = null;
    for (let i = 0; i < movies.length; i++) {
        if (movies[i].movie === id) {
            movie = movies[i];
            break;
        }
    }
   
    if (! movie) {
        return;
    }
   
   document.body.innerHTML = movie.title; // or some html wrapped in quotes
}

I've not tested any of this, just wrote on the fly. Hopefully that might point you in the right direction of what you want to achieve (obviously I don't want to just write it all for you because that would take the fun out of it! :speechless:). But if you have any more questions or questions about what I've written, shout up :blush:
 
My solution lets you use JSON to store Shows & Movies.
Within these "Types" of content there are Genres (Horror & Comedy) in my examples.

I take this a step further by using a .htaccess file to allow the URL that the user navigates to decide what content is shown.
For example, you can see on the link below Horror Movies:

or you can automatically load Horror Shows:

.... same for:

I do this by putting a file called ".htaccess" in the folder /jsonMovieData/ so that everything after (in URL path) has specific rules:
Code:
RewriteEngine on
RewriteRule .* index.html [NC]

This simple rule says "anything in the URL after /jsonMovieData/" should show index.html

I do this because my JS in my index.html file uses the URL to load the JSON data, which is why my /Shows/Horror loads properly:
JavaScript:
<script>
window.onload = function(){
    // so nothing happens until full page loads
    var data = {
      "Movies": {
        "Horror": {
          "0": {
            "title": "Saw IV",
            "description": "A movie about people dying.",
            "release": "Aug 5, 3019",
            "rating": "3.5"
          },
          "1": {
            "title": "Some Horror Film",
            "description": "A movie about something.",
            "release": "April 21, 1993",
            "rating": "9"
          }
        },
        "Comedy": {
          "0": {
            "title": "Spaceballs",
            "description": "Better than a Disney Star Wars.",
            "release": "Aug 5, 3019",
            "rating": "10"
          },
          "1": {
            "title": "Some Funny Film",
            "description": "A movie about something.",
            "release": "April 21, 1993",
            "rating": "9"
          }
        }
      },
     "Shows": {
        "Horror": {
          "0": {
            "title": "Some horror tv show",
            "description": "A movie about people dying.",
            "release": "Aug 5, 3019",
            "rating": "3.5"
          },
          "1": {
            "title": "Some Horror tv show number 2",
            "description": "A movie about something.",
            "release": "April 21, 1993",
            "rating": "9"
          }
        },
        "Comedy": {
          "0": {
            "title": "Some funny tv show",
            "description": "whatever you waaaant.",
            "release": "Aug 5, 3019",
            "rating": "10"
          },
          "1": {
            "title": "Some Funny show i liked",
            "description": "A show about something.",
            "release": "April 21, 1993",
            "rating": "9"
          }
        }
     }
    },
    url_path = window.location.pathname, // example /Movies/Horror or /Shows/Comedy (for Codeforum.org/Type/Genre scheme)
    parts = url_path.split("/"),
    genre = parts[parts.length-1], // works if it's example.com/MoviesOrShowHere/GenreHere, would be Horror or Comedy
    type = parts[parts.length-2]; // works if it's example.com/MoviesOrShowHere/GenreHere, would be Movies or Shows
    pageData = typeof data[type] != 'undefined' &&  typeof data[type][genre] != 'undefined' ? data[type][genre] : false; // return false if the type (movie or show) or genre (comedy or horror) doesn't exist in data json
 
    if(pageData){ // we have page data
        for(var id in pageData){ // loop through each part of Movies or Shows for this specific Genre:
            document.querySelector("body").innerHTML += "<h3>"+pageData[id].title+"</h3>Rated "+pageData[id].rating+"/10<br>Released on "+pageData[id].release+"<br>"+pageData[id].description+"<hr>";
           // very simple... h3 tag for header text, then shows the rating out of 10, then a break tag so release date is on next line, then the description of the content below that, with a horizontal line <hr> after too
        }
    }
 
}
</script>

Adding an image would be as easy as doing something like...
"image": "images/image-name-here.png"
inside of each movie/show

-----
Let's break it down a bit.
First, we have the JSON which you are obviously used to seeing.
After that we use url_path variable for the window location's pathname. Essentially this means getting the whole /folder/folder2/blah/blah2 path from your site. In my example, it is /projects/jsonMovieData/contentType/GenreName. I then break the path into "parts" by separating the content by /slash/, so I'm left with:
parts = ["projects","jsonMovieData","contentType","GenreName"]
I then use parts.length to figure out that (in my example) there are 4 parts.
Well, as you should know, arrays start at 0 so parts[0] = "projects". This is why I use the parts[parts.length - 1] because parts[4] would = undefined, but parts[4 -1] (part 3) = "GenreName"
You can then see that when I do this I am defining the variables "genre" and "type" where genre (in my ex) is either Horror or Comedy and type is either Shows or Movies.

After this I check to make sure that my JSON data has the info for the type of content (data[type]) and genre (data[type][genre]) ... for example, /projects/jsonMovieData/FakeType/FakeGenre would result in my pageData equaling false because data.fakeType.fakeGenre does not exist... On the other hand, data.Movies.Horror DOES exist, so I use if(pageData){ to make sure the genre exists. In a perfect example, you can use an else { statement so that something is shown on the page if the URL is incorrect:
(real example)

I should also add that you could probably do another URL trick like any of the following:
/Movie/Comedy/1 would auto load Movie ID #1 and show other Comedy movies below, or even Comedy Shows
/Shows/Horror/0 would load Horror Show 0
/Shows could load all genres
/Movies could load all genres
/Comedy could load comedy shows AND movies... same for Horror



After this I am looping through each result found for the Type/Genre with a simple for loop. From there I just throw some HTML into the <body> content... Of course, you might be better off doing something like document.getElementById("content-box-id-for-movie-or-show-listings-here");
 
Last edited:

New Threads

Latest posts

Buy us a coffee!

Back
Top Bottom