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
    27 фев 2020 в 7:27
  • Пробовал JSON.parse(). Смотрел сюда developer.mozilla.org/ru/docs/Web/JavaScript/Reference/…
    – Dip
    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
    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
    28 фев 2020 в 4:04
  • Если допустим скопировать функцию и назвать по другому id поменять на role, то массив не выдается, скорее всего из-за смещения в массиве?
    – Dip
    28 фев 2020 в 5:46
  • Переносите эту функцию в computed (дословно, "вычислено") и из шаблона работаете с ней как с обычной переменной. В данном случае, раз возвращается массив, вы можете в select проитерировать <option> с помощью v-for с соответствующими значениями. 28 фев 2020 в 7:27
  • v-for="(arr, i) in test" :key="i" items="test.role" Вы имеете ввиду данную реализацию?
    – Dip
    28 фев 2020 в 8:07

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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