Question

{
  "Title": "Home Alone",
  "Year": "1990",
  "Rated": "PG",
  "Released": "16 Nov 1990",
  "Runtime": "103 min",
  "Genre": "Comedy, Family",
  "Director": "Chris Columbus",
  "Writer": "John Hughes",
  "Actors": "Macaulay Culkin, Joe Pesci, Daniel Stern, John Heard",
  "Plot": "An eight-year-old troublemaker must protect his house from a pair of burglars when he is accidentally left home alone by his family during Christmas vacation.",
  "Language": "English",
  "Country": "USA",
  "Awards": "Nominated for 2 Oscars. Another 10 wins & 4 nominations.",
  "Poster": "https://m.media-amazon.com/images/M/MV5BMzFkM2YwOTQtYzk2Mi00N2VlLWE3NTItN2YwNDg1YmY0ZDNmXkEyXkFqcGdeQXVyMTMxODk2OTU@._V1_SX300.jpg",
  "Ratings": [{
      "Source": "Internet Movie Database",
      "Value": "7.5/10"
    },
    {
      "Source": "Rotten Tomatoes",
      "Value": "65%"
    },
    {}
  ],
  "Metascore": "63",
  "imdbRating": "7.5",
  "imdbVotes": "406,011",
  "imdbID": "tt0099785",
  "Type": "movie",
  "DVD": "05 Oct 1999",
  "BoxOffice": "N/A",
  "Production": "Twentieth Century Fox",
  "Website": "http://www.foxhome.com/homealone/index_frames.html",
  "Response": "True"
}

反应

{
  movie.Ratings[1].Value
} <!-- doesn't work to show Rotten Tomatoes score 65% -->'


{
  movie.Title
} <!-- code works fine -->

Answer 1

@ syed-ahmed

当您尝试访问对象中的不存在属性时，它将返回未定义。因此，您必须确保该属性存在。我们可以使用javascript operator &&的用法，该方法基本上从左到右求值，然后从最右边的变量返回值。

请参见下面的示例代码供您参考：

const movieWithRating = {
  Title: 'Home Alone',
  Year: '1990',
  Rated: 'PG',
  Released: '16 Nov 1990',
  Runtime: '103 min',
  Genre: 'Comedy, Family',
  Director: 'Chris Columbus',
  Writer: 'John Hughes',
  Actors: 'Macaulay Culkin, Joe Pesci, Daniel Stern, John Heard',
  Plot:
    'An eight-year-old troublemaker must protect his house from a pair of burglars when he is accidentally left home alone by his family during Christmas vacation.',
  Language: 'English',
  Country: 'USA',
  Awards: 'Nominated for 2 Oscars. Another 10 wins & 4 nominations.',
  Poster:
    'https://m.media-amazon.com/images/M/MV5BMzFkM2YwOTQtYzk2Mi00N2VlLWE3NTItN2YwNDg1YmY0ZDNmXkEyXkFqcGdeQXVyMTMxODk2OTU@._V1_SX300.jpg',
  Ratings: [
    {
      Source: 'Internet Movie Database',
      Value: '7.5/10',
    },
    {
      Source: 'Rotten Tomatoes',
      Value: '65%',
    },
    {},
  ],
  Metascore: '63',
  imdbRating: '7.5',
  imdbVotes: '406,011',
  imdbID: 'tt0099785',
  Type: 'movie',
  DVD: '05 Oct 1999',
  BoxOffice: 'N/A',
  Production: 'Twentieth Century Fox',
  Website: 'http://www.foxhome.com/homealone/index_frames.html',
  Response: 'True',
};

const movieWithNoRating = {
  Title: 'Home Alone',
  Year: '1990',
  Rated: 'PG',
  Released: '16 Nov 1990',
  Runtime: '103 min'
};

// eslint-disable-next-line prettier/prettier
const hasValue = movieWithRating.Ratings && movieWithRating.Ratings[1] && movieWithRating.Ratings[1].Value || 'not-available';

// eslint-disable-next-line prettier/prettier
const notAvailable = movieWithNoRating.Ratings && movieWithNoRating.Ratings[1] && movieWithNoRating.Ratings[1].Value || 'not-available';


console.log(hasValue); // Output 65%

console.log(notAvailable); // Output not-available

如果您认为这对您有所帮助，请不要忘记将其标记为答案。

如何呈现JSON嵌套对象？

1 个答案: