如何访问 json 对象中的数组？答案

【问题标题】：How do I access an array inside a json object?如何访问 json 对象中的数组？
【发布时间】：2021-11-20 06:38:45
【问题描述】：

我正在使用 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 中的这个数组。

【问题讨论】：

请为您的问题提供stackoverflow.com/help/mcve。您发布的代码中无法访问1（很可能是数组中的第二个元素）。 "ref([]) object" - 它是一个 array，而不仅仅是对象。如果你给这个 ref 分配一个普通的对象，这是一个错误。

标签： json vue.js rest axios

【解决方案1】：

axios 没有做完的时候，ratings 和 Value 都是未定义的，所以是错误的。你可以需要评级是存在的。你写代码：

<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')||'--'}}

【讨论】：

正如目前所写，您的答案尚不清楚。请edit 添加其他详细信息，以帮助其他人了解这如何解决所提出的问题。你可以找到更多关于如何写好答案的信息in the help center。

【解决方案2】：

omdbRatings 是数组所以试试：

{{ omdbRatings[0].Ratings[0] }}

【讨论】：

嗨，我试过了。 @EstusFlask 正确地指出我使用了错误的 ref 类型，但它对这个问题没有影响。