3
I own a array from that JSON:
[{
"cod_recurso": 36,
"ativo": 1,
"nome": "Aceita Animais de Pequeno Porte",
"icone": null,
"ref_cod_categoria": 4,
"data_cadastro": "2018-11-19 10:44:19.24543",
"data_exclusao": null,
"ref_cod_usuario_cad": 1,
"ref_cod_usuario_exc": null,
"categoria": "Diferencial"
}, {
"cod_recurso": 5,
"ativo": 1,
"nome": "Aceita Reserva",
"icone": null,
"ref_cod_categoria": 1,
"data_cadastro": "2018-11-19 10:44:19.24543",
"data_exclusao": null,
"ref_cod_usuario_cad": 1,
"ref_cod_usuario_exc": null,
"categoria": "Estrutura"
}, {
"cod_recurso": 6,
"ativo": 1,
"nome": "Adega",
"icone": null,
"ref_cod_categoria": 1,
"data_cadastro": "2018-11-19 10:44:19.24543",
"data_exclusao": null,
"ref_cod_usuario_cad": 1,
"ref_cod_usuario_exc": null,
"categoria": "Estrutura"
}, {
"cod_recurso": 3,
"ativo": 1,
"nome": "Ambiente Climatizado",
"icone": null,
"ref_cod_categoria": 1,
"data_cadastro": "2018-11-19 10:44:19.24543",
"data_exclusao": null,
"ref_cod_usuario_cad": 1,
"ref_cod_usuario_exc": null,
"categoria": "Estrutura"
}, {
"cod_recurso": 20,
"ativo": 1,
"nome": "American Express",
"icone": null,
"ref_cod_categoria": 2,
"data_cadastro": "2018-11-19 10:44:19.24543",
"data_exclusao": null,
"ref_cod_usuario_cad": 1,
"ref_cod_usuario_exc": null,
"categoria": "Cart\u00e3o"
}, {
"cod_recurso": 35,
"ativo": 1,
"nome": "Apartamento com Facilidades para Dificientes F\u00edsicos",
"icone": null,
"ref_cod_categoria": 4,
"data_cadastro": "2018-11-19 10:44:19.24543",
"data_exclusao": null,
"ref_cod_usuario_cad": 1,
"ref_cod_usuario_exc": null,
"categoria": "Diferencial"
}, {
"cod_recurso": 40,
"ativo": 1,
"nome": "Ar condicionado",
"icone": "rec_5c1239d074457781207415.jpeg",
"ref_cod_categoria": 5,
"data_cadastro": "2018-11-19 10:44:19.24543",
"data_exclusao": "2018-12-13 08:52:00.457911",
"ref_cod_usuario_cad": 1,
"ref_cod_usuario_exc": 43,
"categoria": "Equipamento"
}, {
"cod_recurso": 9,
"ativo": 1,
"nome": "Atendimento Bil\u00edngue",
"icone": null,
"ref_cod_categoria": 1,
"data_cadastro": "2018-11-19 10:44:19.24543",
"data_exclusao": null,
"ref_cod_usuario_cad": 1,
"ref_cod_usuario_exc": null,
"categoria": "Estrutura"
}, {
"cod_recurso": 49,
"ativo": 1,
"nome": "Banheira de Hidromassagem",
"icone": null,
"ref_cod_categoria": 5,
"data_cadastro": "2018-11-19 10:44:19.24543",
"data_exclusao": null,
"ref_cod_usuario_cad": 1,
"ref_cod_usuario_exc": null,
"categoria": "Equipamento"
}, {
"cod_recurso": 26,
"ativo": 1,
"nome": "Banri Compras",
"icone": null,
"ref_cod_categoria": 2,
"data_cadastro": "2018-11-19 10:44:19.24543",
"data_exclusao": null,
"ref_cod_usuario_cad": 1,
"ref_cod_usuario_exc": null,
"categoria": "Cart\u00e3o"
}, {
"cod_recurso": 11,
"ativo": 1,
"nome": "Bar",
"icone": null,
"ref_cod_categoria": 1,
"data_cadastro": "2018-11-19 10:44:19.24543",
"data_exclusao": null,
"ref_cod_usuario_cad": 1,
"ref_cod_usuario_exc": null,
"categoria": "Estrutura"
}, {
"cod_recurso": 48,
"ativo": 1,
"nome": "Cama Box Springs",
"icone": null,
"ref_cod_categoria": 5,
"data_cadastro": "2018-11-19 10:44:19.24543",
"data_exclusao": null,
"ref_cod_usuario_cad": 1,
"ref_cod_usuario_exc": null,
"categoria": "Equipamento"
}, {
"cod_recurso": 25,
"ativo": 1,
"nome": "Cielo",
"icone": null,
"ref_cod_categoria": 2,
"data_cadastro": "2018-11-19 10:44:19.24543",
"data_exclusao": null,
"ref_cod_usuario_cad": 1,
"ref_cod_usuario_exc": null,
"categoria": "Cart\u00e3o"
}, {
"cod_recurso": 47,
"ativo": 1,
"nome": "Cofre",
"icone": null,
"ref_cod_categoria": 5,
"data_cadastro": "2018-11-19 10:44:19.24543",
"data_exclusao": null,
"ref_cod_usuario_cad": 1,
"ref_cod_usuario_exc": null,
"categoria": "Equipamento"
}, {
"cod_recurso": 1,
"ativo": 1,
"nome": "Com Acesso para Deficientes F\u00edsicos",
"icone": null,
"ref_cod_categoria": 1,
"data_cadastro": "2018-11-19 10:44:19.24543",
"data_exclusao": null,
"ref_cod_usuario_cad": 1,
"ref_cod_usuario_exc": null,
"categoria": "Estrutura"
}, {
"cod_recurso": 22,
"ativo": 1,
"nome": "Credicard",
"icone": null,
"ref_cod_categoria": 2,
"data_cadastro": "2018-11-19 10:44:19.24543",
"data_exclusao": null,
"ref_cod_usuario_cad": 1,
"ref_cod_usuario_exc": null,
"categoria": "Cart\u00e3o"
}, {
"cod_recurso": 39,
"ativo": 1,
"nome": "Delivery - Servi\u00e7o de Entrega",
"icone": null,
"ref_cod_categoria": 4,
"data_cadastro": "2018-11-19 10:44:19.24543",
"data_exclusao": null,
"ref_cod_usuario_cad": 1,
"ref_cod_usuario_exc": null,
"categoria": "Diferencial"
}, {
"cod_recurso": 21,
"ativo": 1,
"nome": "Diners",
"icone": null,
"ref_cod_categoria": 2,
"data_cadastro": "2018-11-19 10:44:19.24543",
"data_exclusao": null,
"ref_cod_usuario_cad": 1,
"ref_cod_usuario_exc": null,
"categoria": "Cart\u00e3o"
}, {
"cod_recurso": 27,
"ativo": 1,
"nome": "Elo",
"icone": null,
"ref_cod_categoria": 2,
"data_cadastro": "2018-11-19 10:44:19.24543",
"data_exclusao": null,
"ref_cod_usuario_cad": 1,
"ref_cod_usuario_exc": null,
"categoria": "Cart\u00e3o"
}, {
"cod_recurso": 7,
"ativo": 1,
"nome": "Espa\u00e7o para Eventos",
"icone": null,
"ref_cod_categoria": 1,
"data_cadastro": "2018-11-19 10:44:19.24543",
"data_exclusao": null,
"ref_cod_usuario_cad": 1,
"ref_cod_usuario_exc": null,
"categoria": "Estrutura"
}, {
"cod_recurso": 2,
"ativo": 1,
"nome": "Estacionamento Pr\u00f3prio",
"icone": null,
"ref_cod_categoria": 1,
"data_cadastro": "2018-11-19 10:44:19.24543",
"data_exclusao": null,
"ref_cod_usuario_cad": 1,
"ref_cod_usuario_exc": null,
"categoria": "Estrutura"
}, {
"cod_recurso": 32,
"ativo": 1,
"nome": "Green Card",
"icone": null,
"ref_cod_categoria": 3,
"data_cadastro": "2018-11-19 10:44:19.24543",
"data_exclusao": null,
"ref_cod_usuario_cad": 1,
"ref_cod_usuario_exc": null,
"categoria": "Vale Refei\u00e7\u00e3o"
}, {
"cod_recurso": 24,
"ativo": 1,
"nome": "Hipercard",
"icone": null,
"ref_cod_categoria": 2,
"data_cadastro": "2018-11-19 10:44:19.24543",
"data_exclusao": null,
"ref_cod_usuario_cad": 1,
"ref_cod_usuario_exc": null,
"categoria": "Cart\u00e3o"
}, {
"cod_recurso": 4,
"ativo": 1,
"nome": "Internet Sem Fio",
"icone": null,
"ref_cod_categoria": 1,
"data_cadastro": "2018-11-19 10:44:19.24543",
"data_exclusao": null,
"ref_cod_usuario_cad": 1,
"ref_cod_usuario_exc": null,
"categoria": "Estrutura"
}, {
"cod_recurso": 17,
"ativo": 1,
"nome": "Maestro",
"icone": null,
"ref_cod_categoria": 2,
"data_cadastro": "2018-11-19 10:44:19.24543",
"data_exclusao": null,
"ref_cod_usuario_cad": 1,
"ref_cod_usuario_exc": null,
"categoria": "Cart\u00e3o"
}, {
"cod_recurso": 18,
"ativo": 1,
"nome": "Master Card",
"icone": null,
"ref_cod_categoria": 2,
"data_cadastro": "2018-11-19 10:44:19.24543",
"data_exclusao": null,
"ref_cod_usuario_cad": 1,
"ref_cod_usuario_exc": null,
"categoria": "Cart\u00e3o"
}, {
"cod_recurso": 8,
"ativo": 1,
"nome": "Mesas ao Ar Livre",
"icone": null,
"ref_cod_categoria": 1,
"data_cadastro": "2018-11-19 10:44:19.24543",
"data_exclusao": null,
"ref_cod_usuario_cad": 1,
"ref_cod_usuario_exc": null,
"categoria": "Estrutura"
}, {
"cod_recurso": 51,
"ativo": 1,
"nome": "Mesas ao Ar Livre",
"icone": "rec_5c361f8b769fb423686765.jpeg",
"ref_cod_categoria": 4,
"data_cadastro": "2019-01-09 14:21:31.467237",
"data_exclusao": null,
"ref_cod_usuario_cad": 43,
"ref_cod_usuario_exc": null,
"categoria": "Diferencial"
}, {
"cod_recurso": 50,
"ativo": 1,
"nome": "Mini-bar",
"icone": null,
"ref_cod_categoria": 5,
"data_cadastro": "2018-11-19 10:44:19.24543",
"data_exclusao": null,
"ref_cod_usuario_cad": 1,
"ref_cod_usuario_exc": null,
"categoria": "Equipamento"
}, {
"cod_recurso": 38,
"ativo": 1,
"nome": "M\u00fasica ao Vivo",
"icone": null,
"ref_cod_categoria": 4,
"data_cadastro": "2018-11-19 10:44:19.24543",
"data_exclusao": null,
"ref_cod_usuario_cad": 1,
"ref_cod_usuario_exc": null,
"categoria": "Diferencial"
}, {
"cod_recurso": 33,
"ativo": 1,
"nome": "Personal Card",
"icone": null,
"ref_cod_categoria": 3,
"data_cadastro": "2018-11-19 10:44:19.24543",
"data_exclusao": null,
"ref_cod_usuario_cad": 1,
"ref_cod_usuario_exc": null,
"categoria": "Vale Refei\u00e7\u00e3o"
}, {
"cod_recurso": 15,
"ativo": 1,
"nome": "Piscina",
"icone": null,
"ref_cod_categoria": 1,
"data_cadastro": "2018-11-19 10:44:19.24543",
"data_exclusao": null,
"ref_cod_usuario_cad": 1,
"ref_cod_usuario_exc": null,
"categoria": "Estrutura"
}, {
"cod_recurso": 16,
"ativo": 1,
"nome": "Piscina T\u00e9rmica",
"icone": null,
"ref_cod_categoria": 1,
"data_cadastro": "2018-11-19 10:44:19.24543",
"data_exclusao": null,
"ref_cod_usuario_cad": 1,
"ref_cod_usuario_exc": null,
"categoria": "Estrutura"
}, {
"cod_recurso": 37,
"ativo": 1,
"nome": "Pr\u00f3ximo a Praia",
"icone": null,
"ref_cod_categoria": 4,
"data_cadastro": "2018-11-19 10:44:19.24543",
"data_exclusao": null,
"ref_cod_usuario_cad": 1,
"ref_cod_usuario_exc": null,
"categoria": "Diferencial"
}, {
"cod_recurso": 52,
"ativo": 1,
"nome": "Recurso para testar redimensionamento",
"icone": "rec_5c3637deb822d500021585.jpeg",
"ref_cod_categoria": 4,
"data_cadastro": "2019-01-09 15:10:27.906647",
"data_exclusao": "2019-01-09 16:05:18.726302",
"ref_cod_usuario_cad": 43,
"ref_cod_usuario_exc": 43,
"categoria": "Diferencial"
}, {
"cod_recurso": 23,
"ativo": 1,
"nome": "Rede Shop",
"icone": null,
"ref_cod_categoria": 2,
"data_cadastro": "2018-11-19 10:44:19.24543",
"data_exclusao": null,
"ref_cod_usuario_cad": 1,
"ref_cod_usuario_exc": null,
"categoria": "Cart\u00e3o"
}, {
"cod_recurso": 10,
"ativo": 1,
"nome": "Restaurante",
"icone": null,
"ref_cod_categoria": 1,
"data_cadastro": "2018-11-19 10:44:19.24543",
"data_exclusao": null,
"ref_cod_usuario_cad": 1,
"ref_cod_usuario_exc": null,
"categoria": "Estrutura"
}, {
"cod_recurso": 13,
"ativo": 1,
"nome": "Sala de Gin\u00e1stica",
"icone": null,
"ref_cod_categoria": 1,
"data_cadastro": "2018-11-19 10:44:19.24543",
"data_exclusao": null,
"ref_cod_usuario_cad": 1,
"ref_cod_usuario_exc": null,
"categoria": "Estrutura"
}, {
"cod_recurso": 12,
"ativo": 1,
"nome": "Sala de Jogos",
"icone": null,
"ref_cod_categoria": 1,
"data_cadastro": "2018-11-19 10:44:19.24543",
"data_exclusao": null,
"ref_cod_usuario_cad": 1,
"ref_cod_usuario_exc": null,
"categoria": "Estrutura"
}, {
"cod_recurso": 45,
"ativo": 1,
"nome": "Sala para Acesso Internet",
"icone": null,
"ref_cod_categoria": 5,
"data_cadastro": "2018-11-19 10:44:19.24543",
"data_exclusao": null,
"ref_cod_usuario_cad": 1,
"ref_cod_usuario_exc": null,
"categoria": "Equipamento"
}, {
"cod_recurso": 34,
"ativo": 1,
"nome": "Senff",
"icone": null,
"ref_cod_categoria": 3,
"data_cadastro": "2018-11-19 10:44:19.24543",
"data_exclusao": null,
"ref_cod_usuario_cad": 1,
"ref_cod_usuario_exc": null,
"categoria": "Vale Refei\u00e7\u00e3o"
}, {
"cod_recurso": 29,
"ativo": 1,
"nome": "Sodexo",
"icone": null,
"ref_cod_categoria": 3,
"data_cadastro": "2018-11-19 10:44:19.24543",
"data_exclusao": null,
"ref_cod_usuario_cad": 1,
"ref_cod_usuario_exc": null,
"categoria": "Vale Refei\u00e7\u00e3o"
}, {
"cod_recurso": 44,
"ativo": 1,
"nome": "Som",
"icone": null,
"ref_cod_categoria": 5,
"data_cadastro": "2018-11-19 10:44:19.24543",
"data_exclusao": null,
"ref_cod_usuario_cad": 1,
"ref_cod_usuario_exc": null,
"categoria": "Equipamento"
}, {
"cod_recurso": 42,
"ativo": 1,
"nome": "TV",
"icone": null,
"ref_cod_categoria": 5,
"data_cadastro": "2018-11-19 10:44:19.24543",
"data_exclusao": null,
"ref_cod_usuario_cad": 1,
"ref_cod_usuario_exc": null,
"categoria": "Equipamento"
}, {
"cod_recurso": 43,
"ativo": 1,
"nome": "TV a Cabo",
"icone": null,
"ref_cod_categoria": 5,
"data_cadastro": "2018-11-19 10:44:19.24543",
"data_exclusao": null,
"ref_cod_usuario_cad": 1,
"ref_cod_usuario_exc": null,
"categoria": "Equipamento"
}, {
"cod_recurso": 41,
"ativo": 1,
"nome": "Telefone",
"icone": null,
"ref_cod_categoria": 5,
"data_cadastro": "2018-11-19 10:44:19.24543",
"data_exclusao": null,
"ref_cod_usuario_cad": 1,
"ref_cod_usuario_exc": null,
"categoria": "Equipamento"
}, {
"cod_recurso": 31,
"ativo": 1,
"nome": "Ticket",
"icone": null,
"ref_cod_categoria": 3,
"data_cadastro": "2018-11-19 10:44:19.24543",
"data_exclusao": null,
"ref_cod_usuario_cad": 1,
"ref_cod_usuario_exc": null,
"categoria": "Vale Refei\u00e7\u00e3o"
}, {
"cod_recurso": 28,
"ativo": 1,
"nome": "VR Alimenta\u00e7\u00e3o",
"icone": null,
"ref_cod_categoria": 3,
"data_cadastro": "2018-11-19 10:44:19.24543",
"data_exclusao": null,
"ref_cod_usuario_cad": 1,
"ref_cod_usuario_exc": null,
"categoria": "Vale Refei\u00e7\u00e3o"
}, {
"cod_recurso": 19,
"ativo": 1,
"nome": "Visa",
"icone": null,
"ref_cod_categoria": 2,
"data_cadastro": "2018-11-19 10:44:19.24543",
"data_exclusao": null,
"ref_cod_usuario_cad": 1,
"ref_cod_usuario_exc": null,
"categoria": "Cart\u00e3o"
}, {
"cod_recurso": 30,
"ativo": 1,
"nome": "Visa Vale",
"icone": null,
"ref_cod_categoria": 3,
"data_cadastro": "2018-11-19 10:44:19.24543",
"data_exclusao": null,
"ref_cod_usuario_cad": 1,
"ref_cod_usuario_exc": null,
"categoria": "Vale Refei\u00e7\u00e3o"
}]
I need to print the index value nome in a list, separated by its respective category and without repeating it.
Example (image made as model and example):
My code, until then, that dynamically generates the categories and prints them:
<template>
<div v-if="place"
id='app-place-modal'
style='position: absolute; float: left; left: 30%; top: 10%; width: 40%; height: 40%; background-color: #FAFAFA; border-radius: 15px'
>
<button @click="closeModal()" type="button" class="close" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<br>
<p>Nome: {{ placeModal.nome }}</p>
<p>Descrição: {{ placeModal.descricao }}</p>
<p>Endereço: {{ placeModal.logradouro }} {{ placeModal.numero }}</p>
<p>Horário de atendimento: {{ placeModal.horario }}</p>
<p>Telefone: {{ placeModal.telefone_1 }}</p>
<p>Email: {{ placeModal.email }}</p>
<p>Site: {{ placeModal.site }}</p>
<div class="d-flex p-2">
<fieldset>
<legend>Recursos</legend>
<ul>
<li v-for='category in category'>
<h6> {{category}} </h6>
<li :key="(recurso.cod_estabelecimento, recurso.cod_categoria)"
v-for='recurso in recursos'>
</li>
</li>
</ul>
</fieldset>
</div>
<div class="d-flex p-2">
<fieldset>
<legend>Fotos</legend>
<img
:key='image'
style='width: 20%;'
v-for='image in placeModal.fotos'
:src='getImageURI(image)'
/>
</fieldset>
</div>
</div>
</template>
<script>
import Config from '@/config'
import Http from '@/services/Http'
import Bus from '@/bus'
import Axios from 'axios'
export default {
name: 'app-modal',
data () {
return {
placeModal: Array,
recursos: Array,
category: Array,
categoriaFilter: Array,
id: ''
}
},
props: {
place: Object
},
created () {
Http.getOne(this.place.cod_estabelecimento)
.then(response => {
this.placeModal = response.data
this.recursos = this.placeModal.recursos
this.id = this.placeModal.cod_estabelecimento
console.log(this.placeModal + ' created')
this.organizeCategory()
return this.$forceUpdate()
})
},
mounted () {
Bus.$on('make-modal', value => {
Http.getOne(value.cod_estabelecimento)
.then(response => {
this.placeModal = response.data
this.recursos = this.placeModal.recursos
this.id = this.placeModal.cod_estabelecimento
console.log(this.placeModal + ' mounted')
this.organizeCategory()
return this.$forceUpdate()
})
})
},
methods: {
getImageURI () {
return Config.API_BASE_PATH.concat('foto/estabelecimento?id=', this.id)
},
getRecurso () {
let recurso = this.placeModal.recursos[2].cod_recurso
this.recursos = Axios.get(Config.API_BASE_PATH.concat('recurso?id=', recurso))
console.log(this.recursos)
return this.recursos
},
closeModal () {
Bus.$emit('close-modal', true)
},
organizeCategory () {
var recursos = this.placeModal.recursos
var categoria = []
for (var i = 0; i < recursos.length;) {
categoria.push(recursos[i].ref_cod_categoria)
i++
}
var categoriaFilter = categoria.filter((elem, index, categoria) => categoria.indexOf(elem) === index)
this.categoriaFilter = categoriaFilter
var categories = []
for (i = 0; i < categoriaFilter.length;) {
if (categoriaFilter[i] === 1) {
categories.push('Estrutura')
}
if (categoriaFilter[i] === 2) {
categories.push('Cartão')
}
if (categoriaFilter[i] === 3) {
categories.push('Vale Benefício')
}
if (categoriaFilter[i] === 4) {
categories.push('Diferencial')
}
if (categoriaFilter[i] === 5) {
categories.push('Equipamento')
}
i++
}
this.category = categories
console.log(categories)
}
}
}
</script>
How to bring the index values nome and play in the right category, as if making a condition where?
