Grouping unique objects and their values from an array of objects in VueJs

Question

I have a API REST response as a JSON array and I would like to populate 1 select field in VueJs.

The response from API looks like this

    "unitList": [
      {
        "unitNumber": "100",
        "block": "1",
        "id": "9a16843a-7e59-11e9-8215-525400a02af1"
      },
      {
        "unitNumber": "101",
        "block": "1",
        "id": "59903bc0-e795-485f-890f-8c488ba9a6ca"
      },
      {
        "unitNumber": "200",
        "block": "2",
        "id": "46f8b6c2-80fe-11e9-b8c0-525400a02af1"
      },
      {
        "unitNumber": "201",
        "block": "2",
        "id": "2532a3b8-ad20-4878-8075-08832c0d7ec9"
      },
      {
        "unitNumber": "202",
        "block": "2",
        "id": "6e539ab3-8da2-4178-8a8e-9d56814a6b9f"
      },
      {
        "unitNumber": "301",
        "block": "3",
        "id": "8cfdc0d1-b39a-4866-9bdb-bf38e84ad338"
      },
      {
        "unitNumber": "302",
        "block": "3",
        "id": "c2cedc40-3292-4746-84bd-f2e563cf3c0e"
      },
      {
        "unitNumber": "303",
        "block": "3",
        "id": "6b7611f5-49c3-448f-920e-00332443698a"
      }
    ]

The output in vuejs template I wanted was a select dropdown like

    <block>-<unitNumber> with id as value

Thank you for the comment and I will review the answers there and update here — mrcasa bengaluru
– mrcasa bengaluru, Commented Jul 5, 2019 at 17:18

mrcasa bengaluru · Accepted Answer · 2019-07-06 08:01:49Z

0

A simple for loop in template solved it for me -

      <select name="block" v-model="block">
        <option
          v-for="blk in unitList"
          :key="blk.id"
          :value="blk.id"
        >{{ blk.block}} - {{ blk.unitNumber }}</option>
      </select>

answered Jul 6, 2019 at 8:01

mrcasa bengaluru

671 silver badge10 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Grouping unique objects and their values from an array of objects in VueJs

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related