1

Как во 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
3
  • не пробовали сначала распарсить код выше? :)
    – letUser
    Commented 27 февр. 2020 в 7:27
  • Пробовал JSON.parse(). Смотрел сюда developer.mozilla.org/ru/docs/Web/JavaScript/Reference/…
    – Dip
    Commented 27 февр. 2020 в 7:45
  • Если реализовывать подобную запись JSON.parse('{"1": 1, "2": 2, "3": {"4": 4, "5": {"6": 6}}}', function(k, v) {return v;}); То как ее вызвать в теле vue без v-for и т.п.?
    – Dip
    Commented 27 февр. 2020 в 7:49

1 ответ 1

0

Если я вас правильно понимаю и вам нужен на выходе массив [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>

4
  • Да Вы все правильно поняли. Спасибо, попробовал Ваш вариант, все работает. Если позволите, еще один вопрос. Если передавать массив, допустим в комбобокс мультиселект (выпадающий список), то необходимо ставить наименование функции (test). Как передать именно (arr)?
    – Dip
    Commented 28 февр. 2020 в 4:04
  • Если допустим скопировать функцию и назвать по другому id поменять на role, то массив не выдается, скорее всего из-за смещения в массиве?
    – Dip
    Commented 28 февр. 2020 в 5:46
  • Переносите эту функцию в computed (дословно, "вычислено") и из шаблона работаете с ней как с обычной переменной. В данном случае, раз возвращается массив, вы можете в select проитерировать <option> с помощью v-for с соответствующими значениями. Commented 28 февр. 2020 в 7:27
  • v-for="(arr, i) in test" :key="i" items="test.role" Вы имеете ввиду данную реализацию?
    – Dip
    Commented 28 февр. 2020 в 8:07

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.