Help Please! Single and double quotation marks and escaping them

JavaScript
1

I don’t understand why the behavior seen here is happening. I thought FCC earlier taught that unlike some other programming languages, single and double quotes work the same in JavaScript.

rating = watchList.map(obj =>{
    var movieRatings = {};
    //movieRatings[obj.Title] = obj.imdbRating;
    movieRatings["\"title\""] = obj.Title;
    movieRatings["\"rating\""] = obj.imdbRating;
    return movieRatings;
});

returns the following:

[ { '"title"': 'Inception', '"rating"': '8.8' },
  { '"title"': 'Interstellar', '"rating"': '8.6' },
  { '"title"': 'The Dark Knight', '"rating"': '9.0' },
  { '"title"': 'Batman Begins', '"rating"': '8.3' },
  { '"title"': 'Avatar', '"rating"': '7.9' } ]

whereas,

rating = watchList.map(obj =>{
    var movieRatings = {};
    //movieRatings[obj.Title] = obj.imdbRating;
    movieRatings["\'title\'"] = obj.Title;
    movieRatings["\'rating\'"] = obj.imdbRating;
    return movieRatings;
});

returns

[ { '\'title\'': 'Inception', '\'rating\'': '8.8' },
  { '\'title\'': 'Interstellar', '\'rating\'': '8.6' },
  { '\'title\'': 'The Dark Knight', '\'rating\'': '9.0' },
  { '\'title\'': 'Batman Begins', '\'rating\'': '8.3' },
  { '\'title\'': 'Avatar', '\'rating\'': '7.9' } ]

watchList is an array of items shown here:

var watchList = [
    {
        "Title": "Inception",
        "Year": "2010",
        "Rated": "PG-13",
        "Released": "16 Jul 2010",
        "Runtime": "148 min",
        "Genre": "Action, Adventure, Crime",
        "Director": "Christopher Nolan",
        "Writer": "Christopher Nolan",
        "Actors": "Leonardo DiCaprio, Joseph Gordon-Levitt, Ellen Page, Tom Hardy",
        "Plot": "A thief, who steals corporate secrets through use of dream-sharing technology, is given the inverse task of planting an idea into the mind of a CEO.",
        "Language": "English, Japanese, French",
        "Country": "USA, UK",
        "Awards": "Won 4 Oscars. Another 143 wins & 198 nominations.",
        "Poster": "http://ia.media-imdb.com/images/M/MV5BMjAxMzY3NjcxNF5BMl5BanBnXkFtZTcwNTI5OTM0Mw@@._V1_SX300.jpg",
        "Metascore": "74",
        "imdbRating": "8.8",
        "imdbVotes": "1,446,708",
        "imdbID": "tt1375666",
        "Type": "movie",
        "Response": "True"
    },
    {
        "Title": "Interstellar",
        "Year": "2014",
        "Rated": "PG-13",
        "Released": "07 Nov 2014",
        "Runtime": "169 min",
        "Genre": "Adventure, Drama, Sci-Fi",
        "Director": "Christopher Nolan",
        "Writer": "Jonathan Nolan, Christopher Nolan",
        "Actors": "Ellen Burstyn, Matthew McConaughey, Mackenzie Foy, John Lithgow",
        "Plot": "A team of explorers travel through a wormhole in space in an attempt to ensure humanity's survival.",
        "Language": "English",
        "Country": "USA, UK",
        "Awards": "Won 1 Oscar. Another 39 wins & 132 nominations.",
        "Poster": "http://ia.media-imdb.com/images/M/MV5BMjIxNTU4MzY4MF5BMl5BanBnXkFtZTgwMzM4ODI3MjE@._V1_SX300.jpg",
        "Metascore": "74",
        "imdbRating": "8.6",
        "imdbVotes": "910,366",
        "imdbID": "tt0816692",
        "Type": "movie",
        "Response": "True"
    },
    {
        "Title": "The Dark Knight",
        "Year": "2008",
        "Rated": "PG-13",
        "Released": "18 Jul 2008",
        "Runtime": "152 min",
        "Genre": "Action, Adventure, Crime",
        "Director": "Christopher Nolan",
        "Writer": "Jonathan Nolan (screenplay), Christopher Nolan (screenplay), Christopher Nolan (story), David S. Goyer (story), Bob Kane (characters)",
        "Actors": "Christian Bale, Heath Ledger, Aaron Eckhart, Michael Caine",
        "Plot": "When the menace known as the Joker wreaks havoc and chaos on the people of Gotham, the caped crusader must come to terms with one of the greatest psychological tests of his ability to fight injustice.",
        "Language": "English, Mandarin",
        "Country": "USA, UK",
        "Awards": "Won 2 Oscars. Another 146 wins & 142 nominations.",
        "Poster": "http://ia.media-imdb.com/images/M/MV5BMTMxNTMwODM0NF5BMl5BanBnXkFtZTcwODAyMTk2Mw@@._V1_SX300.jpg",
        "Metascore": "82",
        "imdbRating": "9.0",
        "imdbVotes": "1,652,832",
        "imdbID": "tt0468569",
        "Type": "movie",
        "Response": "True"
    },
    {
        "Title": "Batman Begins",
        "Year": "2005",
        "Rated": "PG-13",
        "Released": "15 Jun 2005",
        "Runtime": "140 min",
        "Genre": "Action, Adventure",
        "Director": "Christopher Nolan",
        "Writer": "Bob Kane (characters), David S. Goyer (story), Christopher Nolan (screenplay), David S. Goyer (screenplay)",
        "Actors": "Christian Bale, Michael Caine, Liam Neeson, Katie Holmes",
        "Plot": "After training with his mentor, Batman begins his fight to free crime-ridden Gotham City from the corruption that Scarecrow and the League of Shadows have cast upon it.",
        "Language": "English, Urdu, Mandarin",
        "Country": "USA, UK",
        "Awards": "Nominated for 1 Oscar. Another 15 wins & 66 nominations.",
        "Poster": "http://ia.media-imdb.com/images/M/MV5BNTM3OTc0MzM2OV5BMl5BanBnXkFtZTYwNzUwMTI3._V1_SX300.jpg",
        "Metascore": "70",
        "imdbRating": "8.3",
        "imdbVotes": "972,584",
        "imdbID": "tt0372784",
        "Type": "movie",
        "Response": "True"
    },
    {
        "Title": "Avatar",
        "Year": "2009",
        "Rated": "PG-13",
        "Released": "18 Dec 2009",
        "Runtime": "162 min",
        "Genre": "Action, Adventure, Fantasy",
        "Director": "James Cameron",
        "Writer": "James Cameron",
        "Actors": "Sam Worthington, Zoe Saldana, Sigourney Weaver, Stephen Lang",
        "Plot": "A paraplegic marine dispatched to the moon Pandora on a unique mission becomes torn between following his orders and protecting the world he feels is his home.",
        "Language": "English, Spanish",
        "Country": "USA, UK",
        "Awards": "Won 3 Oscars. Another 80 wins & 121 nominations.",
        "Poster": "http://ia.media-imdb.com/images/M/MV5BMTYwOTEwNjAzMl5BMl5BanBnXkFtZTcwODc5MTUwMw@@._V1_SX300.jpg",
        "Metascore": "83",
        "imdbRating": "7.9",
        "imdbVotes": "876,575",
        "imdbID": "tt0499549",
        "Type": "movie",
        "Response": "True"
    }
];

This comes from the following challenge on FCC:
https://learn.freecodecamp.org/javascript-algorithms-and-data-structures/functional-programming/use-the-map-method-to-extract-data-from-an-array

2

When you have single quotes inside of double quotes, you don’t need to escape them (and vice-versa).

3

Then can you explain to me why

rating = watchList.map(obj =>{
    var movieRatings = {};
    //movieRatings[obj.Title] = obj.imdbRating;
    movieRatings['\'title\''] = obj.Title;
    movieRatings["\'rating\'"] = obj.imdbRating;
    return movieRatings;
});

returns

[ { '\'title\'': 'Inception', '\'rating\'': '8.8' },
  { '\'title\'': 'Interstellar', '\'rating\'': '8.6' },
  { '\'title\'': 'The Dark Knight', '\'rating\'': '9.0' },
  { '\'title\'': 'Batman Begins', '\'rating\'': '8.3' },
  { '\'title\'': 'Avatar', '\'rating\'': '7.9' } ]
4

Looking more into the specifics of JSON formatting, it looks like escaping single quotes isn’t allowed in object keys.

To extend beyond what is technically possible, you really don’t want to wrap your property names in string-literal quotes. That’s just asking for trouble.

1 Like
5

Gotcha. Thank you. When I learned earlier in the coursework that single and double quotes work the same in JavaScript, I guess I viewed that as a hard and fast rule across the board. So again, thanks for clearing that up for me @ArielLeslie!

I really would like to know if it is possible, but I guess I am really fighting an uphill battle getting this approach to fit the desired mold for the challenge.

6

You can use single quotes by wrapping them in double quotes. You just can’t wrap them in single quotes.

You might like playing with https://jsonlint.com/

ETA - That’s specifically for JSON formatting. Strings used within JavaScript functions allow for escaping single quotes.

1 Like
7

Thanks!

In regards to solving the FCC challenge I am referring to, how come the following passes the test

rating = watchList.map(obj => ({"title":obj.Title, "rating":obj.imdbRating}));

but it shows to output the following:

[ { title: 'Inception', rating: '8.8' },
  { title: 'Interstellar', rating: '8.6' },
  { title: 'The Dark Knight', rating: '9.0' },
  { title: 'Batman Begins', rating: '8.3' },
  { title: 'Avatar', rating: '7.9' } ]

The challenge is looking for title and rating to be output in quotes, correct? And, why does it output them both without quotes, yet passing the test?

8

Quotes around property names are usually unnecessary (unless the string has spaces in it or is otherwise funky). When you print an object, you won’t see quotes around the keys.

9

Then do you know why

rating = watchList.map(obj =>{
    var movieRatings = {};
    movieRatings["title"] = obj.Title;
    movieRatings["rating"] = obj.imdbRating;
    return movieRatings;
});

does not pass the challenge?

It outputs

[ { title: 'Inception', rating: '8.8' },
  { title: 'Interstellar', rating: '8.6' },
  { title: 'The Dark Knight', rating: '9.0' },
  { title: 'Batman Begins', rating: '8.3' },
  { title: 'Avatar', rating: '7.9' } ]

which is the exact same output as what

rating = watchList.map(obj => ({"title":obj.Title, "rating":obj.imdbRating}));

outputs, and yet this latter line of code passes the test.

10

Try resetting the challenge and putting that in again. It passes for me.

1 Like
11

I can’t believe I spent this long on this challenge, all because I didn’t try opening a different web browser or clear the cache on my current browser and try again!

Oh well, just have to look at it as the extra time and effort is just reinforcement!

I am thankful for the community we have here! Thank you again, @ArielLeslie, for all your help. It really has been invaluable!

12

I wish I could say that things like that stop happening, but I’ve defintely spent many work hours in a similar way. I’m glad I could help though. Happy coding.

1 Like