Getting Nested JSON data using VueJS

Question

I want to get a nested JSON data using VueJS, but I'm having trouble understanding how to do that (I'm new to VueJS). The data is as follows:

{
"title": "Editor",
"key": "Editor_one",
"attributes": {
    "holder",
},
"properties": [
    {
        "title": "Date :",
        "attributes": {
            "Path": "0/9",
        }
    },
    {
        "title": "2000/06/17",
        "key": "date_ident",
        "attributes": {
            "Path": "0/10",
        }
    },
    {
        "key": "zero_vector",
        "attributes": {
            "Path": "0/11",
        },
        "properties": [
            {
                "title": "File",
                "attributes": {
                    "Path": "0/11/0",
                },
    },
    {
        "key": "zero_date",
        "attributes": {
            "Path": "0/17",
        },
        "properties": [
            {
                "title": "2000/06/18",
            },

My current vueJS code attempt is as follows:

<div  v-for="editDate in vectors.slice(0,1)" v-bind:key="editDate.id" class="row-control">
<div v-if="editDate.title = '2000/06/2018'">
  <label style="margin-right: 10px" v-bind="response">{{editDate.title}}</label>
  <input
    type="text"
    v-model="date"
    name="date"
    placeholder="Add Date"
  />
</div>

async created() {
try {
  const response = await axios.get('http://localhost:8080/');
  this.vectors = response.data.properties; //assign data from response to 'vectors'
} catch (e){
  console.error(e);
}

},

I want to get the data: "title": "2000/06/18" from the key: "zero_date" and bind it to the 'input' tag. Thanks!

Are you able to change this data structure? I'm confused about why you'd have an array containing objects each with a "key" field, instead of just using an object with those keys (which would let you just do response.data.properties.zero_date.title instead of having to search through the array) — Daniel Beck
– Daniel Beck, Commented Dec 14, 2021 at 16:57
@DanielBeck I'm getting it from an API from someone else who compiled that data, so I don't think I could ( I would since that's how I would go about it and it'll be so much easier to parse). But that's where I'm stuck at right now — SecureEntrepeneur
– SecureEntrepeneur, Commented Dec 14, 2021 at 17:14
Well, it was worth a shot :) Taking a closer look at your sample data, I'm not sure whether the various properties arrays are supposed to be nested inside each other? If so, is the array you're looking for at a known location within that tree, or do we need to be doing a search of the whole tree to find it? — Daniel Beck
– Daniel Beck, Commented Dec 14, 2021 at 18:19
@DanielBeck Yes, the various properties arrays are supposed to be nested inside each other (weird, I know). And no, there could be varying amounts of data between the one I'm looking for. I was thinking of having editDate.title = 2000/06/2018 condition and looking at the properties array when it finds it, but I'm not sure how to do that in Vue. I have it vectors.slice(0,1) because it's continuously looping and printing the same data. — SecureEntrepeneur
– SecureEntrepeneur, Commented Dec 14, 2021 at 18:29

shaedrich · Accepted Answer · 2021-12-15 14:54:32Z

1

Does that help? Can properties inside "zero_date" have more than one item?

{
    async created() {
        try {
            const response = await axios.get('http://localhost:8080/');
            this.vectors = response.data.properties; //assign data from response to 'vectors'
        } catch (e){
            console.error(e);
        }
    },
    computed: {
        zeroDate: {
            get() {
                return this.vectors.find(vector => vector.key === 'zero_date').properties[0].title
            },
            set(newValue) {
                this.vectors.find(vector => vector.key === 'zero_date').properties[0].title = newValue
            }
        }
    }
}

edited Dec 15, 2021 at 14:54

answered Dec 15, 2021 at 8:36

shaedrich

5,7633 gold badges31 silver badges47 bronze badges

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

6 Comments

SecureEntrepeneur Over a year ago

Properties inside "zero_date" can have more than one item.

SecureEntrepeneur Over a year ago

Yes thank you! If I wanted to bind zeroDate()'s returned value to an HTML's input element, would you know how to go about doing that?

shaedrich Over a year ago

Since "zero_date" can have multiple items inside its properties, how do you know, which to use?

shaedrich Over a year ago

If you want to use it in an input how about this: <input v-model="zeroDate" />? Since it's a computed property, I added the setter to my above code.

shaedrich Over a year ago

If it's always at index 0, my could should work :)

|

Collectives™ on Stack Overflow

Getting Nested JSON data using VueJS

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related