CODEWITHSUNDEEP
javascriptvue.jsquasar-framework
Uhney
Uhney

Reputation: 473

Quasar: How to get a value from an array object?

I would like to get the first value which has the key:name from an array object. The code quasar provides give me all the vlaue and keys when it's selected.

So from the data above, I wish to get only selected value.

Like this: enter image description here

I tried Object.value(), JSON.stringify(), and localStorage.setItem(), but did not see what I want.

Here is the basic sample from Quasar

template:

<template>
  <div class="q-pa-md">
    <q-table
      title="Treats"
      :data="data"
      :columns="columns"
      row-key="name"
      :selected-rows-label="getSelectedString"
      selection="multiple"
      :selected.sync="selected"
    />

    <div class="q-mt-md">
      Selected: {{ JSON.stringify(selected) }} 
      
      <!-- Original Result : 
      Selected: [{"name":"Ice cream sandwich", "calories":237, 
      "fat":9, "carbs":37, "protein":4.3, "sodium":129,
      "calcium":"8%", 
      -->
      
      <!--  Desired Result :
      Selected: *Value I Selected without [{}]*  
    -->
    </div>
  </div>
</template>

script:

<script>
export default {
  data () {
    return {
      selected: [],
      columns: [
        {
          name: 'desc',
          required: true,
          label: 'Dessert (100g serving)',
          align: 'left',
          field: row => row.name,
          format: val => `${val}`,
          sortable: true
        },
        { name: 'calories', align: 'center', label: 'Calories', field: 'calories', sortable: true },
      ],
      data: [
        {
          name: 'Frozen Yogurt',
          calories: 159,
          fat: 6.0,
          carbs: 24,
          protein: 4.0,
          sodium: 87,
          calcium: '14%',
          iron: '1%'
        },
        {
          name: 'Ice cream sandwich',
          calories: 237,
          fat: 9.0,
          carbs: 37,
          protein: 4.3,
          sodium: 129,
          calcium: '8%',
          iron: '1%'
        },
      
      ]
    }
  },
  methods: {
    getSelectedString () {
      // I also thought I may need to use this function,
      // but have no idea how to approach..
      return this.selected.length === 0 ? '' : `${this.selected.length} record${this.selected.length > 1 ? 's' : ''} selected of ${this.data.length}`
    }
  }
}
</script>

It feels like this is such a minor thing, but sadly I have spent few hours on this.. It would be so grateful if you let me know how to solve this!

Upvotes: 1

Views: 2225

Answers (2)

Just Mohit
Just Mohit

Reputation: 141

You could use the map method

data.map(dessert => dessert.name)[0]

Explanation: data.map() returns a list with the return value of its callback, of which the first parameter is the iterated value in the source (data here)

Then we could select the first value of the iterated list (that is ice creame sandwich)

Edit: I saw the comment and accordingly edited the question. All you need to do is to get the object from the array by selecting the first index like array[0], then select the name like array[0].name

This is what you exactly need:

Selected: {{ selected[0].name }}

PS: I hope you're a beginner. I would suggest you to take at least a JavaScript course on w3schools, and learn more about arrays and objects (I think you already know HTML and CSS). For future reference, you could have searched

how to get javascript array nested object value

Would have saved you a question...

Upvotes: 2

Benedikt Kromer
Benedikt Kromer

Reputation: 731

do you want to map?

var data = [ {name: "AA"}, {name: "BB"}]:
var result =  data.map( (ob) => { return ob.name; });
// result contains ["AA", "BB"]
var result2 =  result.join(", ")
// result2 contains "AA, BB"

data[0].name // returns AA

Upvotes: 0

Related Questions