Split data JSON after data in VueJS

Question

How to split data in JSON if have array after array? This is my JSON format

{
    "status": "true",
    "error": "",
    "data": [
        {
            "id": 1,
            "sections": [
                {
                    "section_id": 1,
                    "position": []
                }
            ]
        }
     ]
}

So, I'm using AXIOS . This code AXIOS

const url = '/api/v1/form/'
            axios
                .get(url)
                .then(response => {
                    this.listing = response.data.data;
                })

How to call section using this response.data.data.sections ? I'm try but error undefined. Please help me thanks

well data is an array i doubt you can use it without indexing — Allan Banis
– Allan Banis, Commented Mar 6, 2020 at 19:47

Allan Banis · Accepted Answer · 2020-03-09 09:36:15Z

2

response.data.data[0].sections

data is an array according to your json so you cannot directly call sections you will have to iterate or select an instance within the array.

the following code should print all section ids //untested code

const url = '/api/v1/form/'
            axios
                .get(url)
                .then(response => {
                    response.data.data.foreach((listing)=>{
                        console.log(listing.sections.section_id)
                    })
                })

If you always will have only one entry under data or you want to access only the 1st entry of data you can use response.data.data[0].sections this is a bad way to access it though because if data is empty it will throw you an error . If the case is that you only have one entry under data you should just change your json to be

{
"status": "true",
"error": "",
"data":
    {
        "id": 1,
        "sections": [
            {
                "section_id": 1,
                "position": []
            }
        ]
    }

}

and you can then access it directly response.data.data.sections but as long as its an array you will have to treat it as such.

Iterate through sections and positions [as per comments]:

 const url = '/api/v1/form/'
            axios
                .get(url)
                .then(response => {
                    response.data.data.foreach((listing)=>{ //#this will get you each listing(parent object that contains sections array)
                        listing.sections.foreach((section)=>{//# this will get you each section(parent object that contains position array)
                           section.position.foreach((el)=>{//# this will get you each elment in the position array as `el`
                               console.log(el)
                           })
                        })

                    })
                })

edited Mar 9, 2020 at 9:36

answered Mar 6, 2020 at 20:06

Allan Banis

3864 silver badges19 bronze badges

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

3 Comments

Muhammad Wazexr Over a year ago

how to write if looping for section and position

Allan Banis Over a year ago

for within for would work. you can do a lot of things but for loops are Array.foreach(function)

Muhammad Wazexr Over a year ago

I'm not understand, can explain more to me. Thanks

julianstark999 · Accepted Answer · 2020-03-09 09:45:17Z

0

Try this:

const url = '/api/v1/form/'
axios
    .get(url)
    .then(response => {
        this.listing = response.data;
        console.log(this.listing.data) // <-------
    })

edited Mar 9, 2020 at 9:45

julianstark999

3,6241 gold badge30 silver badges42 bronze badges

answered Mar 6, 2020 at 17:50

Bardales

3241 gold badge4 silver badges14 bronze badges

1 Comment

Muhammad Wazexr Over a year ago

I know it, but how to call sections in data?

Collectives™ on Stack Overflow

Split data JSON after data in VueJS

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related