Bokchee 88 Bokchee 88 - 2 months ago 11
Javascript Question

How to get the property value from JSON object in array, and write in url

I am building a movie library for my portfolio, at the moment i have only JSON array with 20 object for movie titles and summaries etc. How can i do it, when i click on item, lets say Suicide Squad, and than name to be appear in url.
like so, http://localhost:63342/Movie/title_of_the_movie

Would be nice to do this in js or jquery.

"name": "Godzilla",
"year": 1998,
"releaseDate": "20 May 1988",
"runtime": "2h 19mm",
"director": "Roland Emmerich",
"screenplay": "Dean Devlin and Roland Emmerich",
"cast": {
"Matthew Broderick": "Dr.Niko Tatopolous",
"Jean Reno": "Philipe Roache",
"Maria Pitillo": "Audrey Timmonds",
"Hank Azaria": "Victor 'Animal' Palotti",
"Kevin Dunn": "Colonel Hicks",
"Michael Lerner": "Mayor Ebert",
"Harry Shearer": "Charles Caiman",
"Arabella field": "Lucy Palotti",
"Vicki Lewis": "Dr.Elsie Chapman",
"Doug Savant": "Sergeant O'Neal"
"castPhoto": {},
"imdb": 5.3,

"boxOffice": "$130,000,000 ",
"openingWeekend": "$55,726,951"


Please note that normally when you change the URL, the browser will stop showing your current page and will load the other page. There are a few ways to change the URL without reloading the page, which I will mention at the end.

Generally if you are have your data (as in the sample) in a variable called movies and you want to create A tags with links to click on, in the container tag movielist, then you can just do something like this:

movies.forEach(function(movie) {
    var link = document.createElement('A');
    link.setAttribute('href', '#' +\W+/g,'_'));

As you can see, we sanitize the movie name for the URL by replacing anything which is not a "word character" (basically alphanumeric) with an underscore. While this is valid for URLs, it is a lossy transformation - i.e. it cannot be reversed to get back the original value. What @nikhil suggested - using encodeURIComponent() is a lossless transformation - i.e. you can read it back and get the original value, though it is less pretty to human eyes (mostly the problem with standard English text is that it converts spaces to "+" or "%20").

Additionally, you can see I prepended the link URL with "#" - this means that I do not replace the current URL completely, just its "Fragment Identifier" part. When you change the fragment identifier on the current URL, the browser doesn't reload the page instead it tries to find the specified "document fragment" on the page and scroll to it. As we don't expect to find fragments with movie names on the page, it will do nothing - just show it in the URL (though you may want to do interesting things with a fragment switching and CSS, see here).

Another way to change the URL without reloading the page, though its a lot more complicated to handle correctly is History.pushState(). This is useful for single page applications. See here for details about pushState(). As an example of that use, that is what Github use when you browse the files in a repository and it loads them quickly without reloading the entire page, but you can still use the browser's "Back" and "Forward" buttons to navigate.