VuejsでのCannot read properties of nullのエラーについて

Question

以下のサイトを見ながらVueとaxiosを使用しながらサンプルアプリを作成中です。
https://www.webprofessional.jp/fetching-data-third-party-api-vue-axios/

apiを使用してデータを持ってくるところまではできたのですが、URLを整形し表示するところでconsoleにエラーが出ています。
出ているエラーは以下になります。

JavaScriptも最近勉強し始めたばかりのため、このエラーの原因と修正方法について教えていただけると幸いです。

以下がコードになります。

<div class="container" id="app">
    <h3 class="text-center">VueNews</h3>
    <div class="row" v-for="posts in processedPosts">
      <div class="columns large-3 medium-6" v-for="post in posts">
        <div class="card">
          <div class="card-divider">
           {{ post.title }}
          </div>
          <a :href="post.url" target="_blank"><img :src="post.image_url"></a>
          <div class="card-section">
            <p>{{ post.abstract }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>

  </body>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
  <script src="main.js"></script>

const NYTBaseURL = 'https://api.nytimes.com/svc/topstories/v2/';
const ApiKey = 'MyApiKey';

function buildUrl(url) {
  return NYTBaseURL + url + '.json?api-key=' + ApiKey
}


const app = new Vue({
  el: '#app',
  data: {
    results: []
  },
  mounted() {
    this.getPosts('home')
  },
  methods: {
    getPosts(section) {
      let url = buildUrl(section)
      axios.get(url).then((response) => {
        this.results = response.data.results
      }).catch(error => {
        console.log(error)
      })
    }
  },
  computed: {
    processedPosts() {
      let posts = this.results

      // Add image_url_attribute
      posts.map(post => {
        let imgObj = post.multimedia.find(media => media.format === 'superJumbo')
        post.image_url = imgObj ? imgObj.url: 'http://placehold.it/300x200?text=N/A'
      })

      // Put Array into Chunks
      let i, j, chunkedArray = [], chunk = 4
      for (i = 0, j = 0; i< posts.length; i += chunk, j++) {
        chunkedArray[j] = posts.slice(i, i+chunk)
      }
      return chunkedArray
    }
  }
})

Answer 1

エラーメッセージは「findというプロパティがnull」となっているので、おそらく「processedPosts」内の「post.multimedia.find」がエラーの元かと思います。

「post」は「axios」で非同期に取得したレスポンスが入るようなので、取得前に「v-for」が実行され、ひいては「processedPosts」内の処理が実行されたものであると推測できます。

同処理実行時に「posts」に内容がることを確認してください。

Comments

[Ryo_was_taken]

おっしゃる通りpost.multimedia.findがエラー元でした。
axiosのレスポンスが入る前にpostsがなかったため、postsの中が空でも実行するように一度変更してみましたら動きました。
無事に問題解決できそうです。回答いただきありがとうございました！