Как отобразить текст в HTML из массива?

У меня есть проект, над которым я работаю. Я вызываю свой Django API и получаю обратно массив ManyToMany, как показано ниже.

[
{"interest_name":"Money"},
{"interest_name":"Django"},
{"interest_name":"Test"}
]

Каким образом лучше всего отобразить нижеприведенное в HTML в виде:

Money
Django
Test

Вместо

[
{"interest_name":"Money"},
{"interest_name":"Django"},
{"interest_name":"Test"}
]

Я пытаюсь передать вышеуказанное в элемент HTML и отобразить на фронтенде. Любая помощь будет принята с благодарностью!

По сути, цикл.

var obj = [
  {"interest_name":"Money"},
  {"interest_name":"Django"},
  {"interest_name":"Test"}
]

document.querySelector("pre").innerText = Object.values(obj).map(i => i.interest_name) .join("\n")
<pre></pre>

Если я правильно вас понял, попробуйте с внутренним v-for:

new Vue({
  el: '#demo',
  data() {
    return {
      ProjectsAPI: [{project_title: 'aa', project_description: 'desc', interest_category: [{"interest_name":"Money"}, {"interest_name":"Django"}, {"interest_name":"Test"}]}]
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
  <div v-for="projects in ProjectsAPI" :key="projects.id" class="container">
     <div class="card mt-2">
        <div class="card-header"><strong>Task Made By: {{ projects.project_title }}</strong></div>
        <div class="card-body d-flex flex-row justify-content-between">
          <div>
            <h5 class="card-title">{{projects.project_description}}</h5>
             <p v-for="(cat, i) in projects.interest_category" :key="i">{{ cat.interest_name }}</p>
          </div>
        </div>
    </div>
  </div>
</div>

Вернуться на верх