Change Object in vue3 typeScript

My original object is as follows (Object name is runOverview). I want to remove bold fields version, inputs, loads, products and project_name.

> {
"version": "1",
"inputs": [
{
"name": "input1",
"value": "1,827"
},
{
"name": "input2",
"value": "310"
}
],
"loads": [
{
"name": "loads1",
"value": "440"
},
{
"name": "loads2",
"value": "220"
},
{
"name": "loads3",
"value": "46"
}
],
"products": [
{
"name": "products1",
"value": "15,000"
},
{
"name": "products3",
"value": "4.8"
}
],
"project_name": "Test"
}

I want to change runOverview object as bellow (expected output).

>
{{
"name": "input1",
"value": "1,827"
},
{
"name": "input2",
"value": "310"
},
{
"name": "loads1",
"value": "440"
},
{
"name": "loads2",
"value": "220"
},
{
"name": "loads3",
"value": "46"
},
{
"name": "products1",
"value": "15,000"
},
{
"name": "products3",
"value": "4.8"
}}

I've tried as follows

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

const overviewDetails = computed(() => {
  const overviewArr = [];
    for ( var newdata in runOverview.value) {
      overviewArr.push(newdata)
    }
  return overviewArr
});

<!-- end snippet -->

Please help me to create new object array with only necessary properties

this is very powerful it will merge any property whose value is an array. I believe this is what you want:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

// </script><script type="module">
import { ref, computed } from "https://unpkg.com/vue@3.2.47/dist/vue.runtime.esm-browser.js"

const runOverview = ref({ "version": "1", "inputs": [ { "name": "input1", "value": "1,827" }, { "name": "input2", "value": "310" } ], "loads": [ { "name": "loads1", "value": "440" }, { "name": "loads2", "value": "220" }, { "name": "loads3", "value": "46" } ], "products": [ { "name": "products1", "value": "15,000" }, { "name": "products3", "value": "4.8" } ], "project_name": "Test" })

const overviewDetails = computed(() => {
  return Object.values(runOverview.value).reduce((r, item) => {
    if (Array.isArray(item)) r.push(...item)

    return r
  }, [])
})

console.log(overviewDetails.value)

<!-- end snippet -->

const arr = []
Object.values(runOverview).forEach(item => {
        if(Array.isArray(item)) {
            arr.push(...item)
        }
    })
console.log(arr)

You can use reduce and map methods. Try this:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-html -->

<script type="module">
import { ref, computed } from "https://unpkg.com/vue@3.2.47/dist/vue.runtime.esm-browser.js"

const runOverview = ref({version:"1",inputs:[{name:"input1",value:"1,827"},{name:"input2",value:"310"},],loads:[{name:"loads1",value:"440"},{name:"loads2",value:"220"},{name:"loads3",value:"46"},],products:[{name:"products1",value:"15,000"},{name:"products3",value:"4.8"},],project_name:"Test"});

 const overviewDetails = computed(() =>
  ["inputs", "loads", "products"].reduce(
    (acc, key) =>
      acc.concat(
        runOverview.value[key].map((item) => ({
          name: item.name,
          value: item.value,
        }))
      ),
    []
  )
);
console.log(overviewDetails.value)

</script>

<!-- end snippet -->