Перебор необходимых (сортировка) объектов, массивов во vue js

Question

Как во vue js сделать выборку только по ключу id и выдать только значения, без использования v-for, if и так далее. Только js в скрипте проекта vue js

{
"data": {
"status": 0,
"response": [
{
"id": "m",
"desc": "Ст 1",
"nodes": [
{
"id": "A",
"role": "AB",
"desc": "Бака 1",
"url": "http://1927"
},
{
"id": "A2",
"role": "AB",
"desc": "Ба 2",
"url": "1927"
},
{
"id": "RB",
"role": "RB",
"desc": "БО",
"url": "1927"
},
{
"id": "M1",
"role": "MЧ",
"desc": "MЧ 1",
"url": "1927"
},
{
"id": "M2",
"role": "MЧ",
"desc": "MЧ 2",
"url": "1927"
}
]
},
{
"id": "d",
"desc": "Ст",
"nodes": [
{
"id": "A1",
"role": "AB",
"desc": "Ба 1",
"url": "1927"
},
{
"id": "A2",
"role": "ABS",
"desc": "Ба 2",
"url": "1927"
},
{
"id": "RB",
"role": "RB",
"desc": "РБ",
"url": "1927"
},
{
"id": "MЧ",
"role": "MЧ",
"desc": "MЧ",
"url": "1927"
}
]
}
]
}

Необходимо получить результат в массив array: [],

По массиву "id": "m"

A
A2
RB
M1
M2

Answer 1

Если я вас правильно понимаю и вам нужен на выходе массив [A, A2, RB, M1, M2], то вот грубая реализация на Vue, (ваш изначальный объект в поле data: example), Если вам необходимо использовать отфильтрованный данные в шаблоне, переместите test() в computed.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
  <!-- DO NOT touch the following DIV -->
  <div id="app">
    <button @click="test()">Клик</button>
    <p></p>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    const app = new Vue({
        el: '#app',
        data: {
          example:
            {
              data: {
                status: 0,
                response: [
                  {
                    id: 'm',
                    desc: 'Ст 1',
                    nodes: [
                      {
                        id: 'A',
                        role: 'AB',
                        desc: 'Бака 1',
                        url: 'http://1927',
                      },
                      {
                        id: 'A2',
                        role: 'AB',
                        desc: 'Ба 2',
                        url: '1927',
                      },
                      {
                        id: 'RB',
                        role: 'RB',
                        desc: 'БО',
                        url: '1927',
                      },
                      {
                        id: 'M1',
                        role: 'MЧ',
                        desc: 'MЧ 1',
                        url: '1927',
                      },
                      {
                        id: 'M2',
                        role: 'MЧ',
                        desc: 'MЧ 2',
                        url: '1927',
                      },
                    ],
                  },
                  {
                    id: 'd',
                    desc: 'Ст',
                    nodes: [
                      {
                        id: 'A1',
                        role: 'AB',
                        desc: 'Ба 1',
                        url: '1927',
                      },
                      {
                        id: 'A2',
                        role: 'ABS',
                        desc: 'Ба 2',
                        url: '1927',
                      },
                      {
                        id: 'RB',
                        role: 'RB',
                        desc: 'РБ',
                        url: '1927',
                      },
                      {
                        id: 'MЧ',
                        role: 'MЧ',
                        desc: 'MЧ',
                        url: '1927',
                      },
                    ],
                  },
                ],
              },
            },
        },
        methods: {
          test:function () {
            const arr = [];
            const keys = Object.keys(this.example.data.response);
            const values = Object.values(this.example.data.response);
            for (let i = 0; i < keys.length; i += 1) {
              if (values[i].id === 'm') {
                for (let node = 0; node < values[i].nodes.length; node += 1) {
                  arr.push(values[i].nodes[node].id);
                }
              }
            }
            alert(arr);
            return arr;
          },
        }
    })
  </script>
  </body>
</html>

БЛОГ НА HUSL

Перебор необходимых (сортировка) объектов, массивов во vue js

Ответы (1 шт):