我如何访问json对象内的数组?

Question

我使用axios访问OMDB api。返回的值保存到vue组件中称为ombdRatings的ref([])对象中，并且我试图访问这些值以显示在DOM中。下面是返回的json:

{"Title":"Parasite","Year":"1982","Rated":"R","Released":"12 Mar 1982","Runtime":"85 min","Genre":"Horror, Sci-Fi","Director":"Charles Band","Writer":"Alan J. Adler, Michael Shoob, Frank Levering","Actors":"Robert Glaudini, Demi Moore, Luca Bercovici","Plot":"In a post-apocalyptic USA, a doctor/scientist infected with a new strain of parasite ends up in a small desert town, trying to find a cure.","Language":"English","Country":"United States","Awards":"N/A","Poster":"https://m.media-amazon.com/images/M/MV5BMTFlZDVjMDMtODkwNS00MTM3LWJiMzQtY2IxN2JiNWZjMWUxXkEyXkFqcGdeQXVyMTQxNzMzNDI@._V1_SX300.jpg","Ratings":[{"Source":"Internet Movie Database","Value":"4.0/10"},{"Source":"Rotten Tomatoes","Value":"17%"}],"Metascore":"N/A","imdbRating":"4.0","imdbVotes":"2,574","imdbID":"tt0084472","Type":"movie","DVD":"30 Oct 2017","BoxOffice":"N/A","Production":"Embassy Pictures","Website":"N/A","Response":"True"}

评级存储在我的对象中的数组中。当我尝试访问数组上的第一个项目以在DOM中显示时，如:{{ omdbRatings.Ratings[0] }}，然后我得到一个错误，如

Uncaught (in promise) TypeError: Cannot read properties of undefined(阅读' 1 ')

我可以访问对象中的其他项，但我不知道如何在DOM中使用插值访问这个数组。

Answer 1

当axios未完成时，未定义评级和值，因此是错误的。你可以需要评级是存在的。你写的代码:

<div v-if="omdbRatings&&omdbRatings.Ratings&&......">.....</div>

这太乏味了。

简单，代码是正确的。在js中，你可以:

console.log(omdbRatings?.Ratings?.[0]?.Value||'--');

但是模板，你需要模板假设Optional_chaining:

export const optionalChaining = (obj, ...rest) => {
let tmp = obj;
for (let key in rest) {
let name = rest[key];
tmp = tmp?.[name];
}
return tmp || "";
}

所以,模板使用:

{{optionalChaining(omdbRatings,"Ratings",'0','Value')||'--'}}