Split a json data into two separate jsons and add them in code

Question

I have a json file coming as:

{
              "rID": "1",
              "rFI": "01",
              "rTN": "0011",
              "rAN": "11",
              "sID": "2",
              "sFI": "004",
              "sTN": "1002",
              "sAN": "03402"
}

I am using Vue JS.

Currently if I have no API file, I am doing this as an array of objects in data as:

return 
rItems: [
                 { label: 'r', value: '01' },
                 { label: 'rFN', value: '001' },
                 { label: 'rTN', value: '00011' },
                 { label: 'rAN', value: '11255' }
            ],
             sItems: [
                 { label: 's', value: '01' },
                 { label: 'sFN', value: '001' },
                 { label: 'sTN', value: '00011' },
                 { label: 'sAN', value: '11255' }
             ],

and using a loop to display data, both rItems and sItems are in separate divs.

like this

<div class=" v-for="item in sItems">
                                <span class="label">
                                    {{ item.label}}
                                </span>
                                <span class="value">
                                    {{ item.value }}
                                </span>
                            </div>

same for rItems I have a separate div.

Now I have created an API file and I want this code to be computed so I can split the json into two and create an array of objects and loop over them.

Sounds like a job for Object.entries(). Let me know if you want a full answer or you'd like to fiddle yourself with that. — Gaëtan Boyals, Commented Oct 28, 2022 at 16:58
if you show me how this can be achieved, that would be a great — Noah, Commented Oct 28, 2022 at 17:04

Gaëtan Boyals · Accepted Answer · 2022-10-28 17:24:43Z

0

Assuming you already know how to fetch your data from your API, the final result would be something like this :

const getDataAndSplit = async () => {
  const myData = await fetch(URL, etc etc); // get your data from your API
  const rItems = []; // declaring empty array to fill it later
  const sItems = []; // same
  // looping over array of key/values
  Object.entries(myData).forEach(([key, val]) => {
    if (val.startsWith('r'))
      rItems.push({label: key, value: val});
    else
      sItems.push({label: key, value: val});

  }
  return {rItems, sItems};
}

edited Oct 28, 2022 at 17:24

answered Oct 28, 2022 at 17:12

Gaëtan Boyals

1,2281 gold badge8 silver badges22 bronze badges

and this will put in computed
– Noah
Commented Oct 28, 2022 at 17:13
in my methods, i am already doing this; ...mapActions('store', ['fetchBDetails']), fetchData() { this.fetchBDetails(); }
– Noah
Commented Oct 28, 2022 at 17:15
so all i need is to use the method in computed
– Noah
Commented Oct 28, 2022 at 17:17
please update your answer
– Noah
Commented Oct 28, 2022 at 17:17
I did. If it still doesn't help, then you will have to edit your question to be more precise and clear, as it isn't in this state.
– Gaëtan Boyals
Commented Oct 28, 2022 at 17:26

| Show 3 more comments

Collectives™ on Stack Overflow

Split a json data into two separate jsons and add them in code

1 Answer 1

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Related