How to display text in HTML from an array?

ckcAdmin 0
Viewed 47

I have a project that I am working on. I call my Django API and I get a ManyToMany array back as seen below.

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

What is the best way to display the below in HTML as:

Money
Django
Test

Instead of

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

I am trying to pass the above into an HTML element and display on the front-end. Any and all help is appreciated! EDIT

Here is my full code.

<template>
  <div class="tasks">
    </div>
     <div class="column-12">
        <div class="col-12">
            <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>{{projects.interest_category}}</p>
            </div>
        </div>
        <div class="card-footer text-muted">
            Task Made At: {{projects.created_at}}
        </div>
    </div>
    </div>
        </div> 
     </div> 
</template>

<script>
import { getAPI } from '../../axios-api'

export default {
    name: 'ProjectDashboard',
    data () {
      return {
        ProjectsAPI: []
      }
    },
    created () {
      getAPI.get('api/v1/projects')
      .then(response => {
        this.ProjectsAPI = response.data
        console.log('API Data Received')
      })
      .catch(err => {
        console.log(err)
      })
    }
}
</script>

Since projects.interest_category is the only JSON array how would I get the

Money
Django
Test

To show instead of?:

[
{"interest_name":"Money"},
{"interest_name":"Django"},
{"interest_name":"Test"}
]
vuejs2 django vue.js javascript
2 Answers

If I understood you correctly try with inner 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>

Nikola Pavicevic0

Basically, a loop.

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>

IT goldman0
Related