What is the best way to transform a List<Pair<String, String>> to a List<String> using JavaScript?

Question

What is the best way to transform a List<Pair<String, String>> to a List<String> using JavaScript?

Here is the data output structure:

Map<String, List<Pair<String, String>>>

    "testdata": [
        {
            "1.0": "True"
        },
        {
            "1.1": "False"
        }
]

I now need to present this data on the UI in the format

"testdata":["1.0","1.1","1.2"]

, where I specifically want to fetch only the first elements from each Pair and place them in the structure

Map<String, List<String>>

Can you provide me with a javascript code snippet that accomplishes this task?

this.previousData = versions.filter(v => v !== this.version).map(item => ({ text: item, value: item }))

How can I adjust this code to achieve the desired output of

"testdata":["1.0","1.1","1.2"]

?

javascript vue.js

Answer 1

Answer №1

If you want to achieve a similar outcome, consider implementing the following approach:


// The assumption is that each array item contains only one key, or the first key indicates the version

this.previousData = 
    versions
     .filter(v => v !== this.version)
     .map(item => Object.keys(item)[0])

// Alternatively, as recommended by MikeT, if the data structure adheres to the following format:
// [
//  { "v1": "some value 1" },
//  { "v2": "some value 2" },
//  ... generally --> { "version": "some value" }
// ]
// You may also try this method
this.previousData = 
    versions
     .filter(v => v !== this.version)
     .map(item => Object.keys(item))
     .flat()

Answer 2

If you want to achieve a similar outcome, consider implementing the following approach:


// The assumption is that each array item contains only one key, or the first key indicates the version

this.previousData = 
    versions
     .filter(v => v !== this.version)
     .map(item => Object.keys(item)[0])

// Alternatively, as recommended by MikeT, if the data structure adheres to the following format:
// [
//  { "v1": "some value 1" },
//  { "v2": "some value 2" },
//  ... generally --> { "version": "some value" }
// ]
// You may also try this method
this.previousData = 
    versions
     .filter(v => v !== this.version)
     .map(item => Object.keys(item))
     .flat()

Answer 3

Answer №2

It seems like your question is a bit vague in terms of the element you're struggling with.

If you want to retrieve the data:

async fetchData()
{
    const response = await fetch("<<insert URL from your Java service here>>")
    return await response.json();
}

To customize the format of the data:

formatData(json){
    return json.testdata.map((item) => Object.entries(item).map(([key, value]) => key)).flat()
}

And for displaying in Vue:

<template>testdata:{{testdata}}</template>
<script>
...
     methods:{
        async loadData(){
            const temp = await fetchData()
            this.testdata = formatData(temp)
        }
     }
...
</script>

Using Object.entries will convert an object into a tuple array, so

{"1.0":"True", "1.1":"False"}

will transform into

[["1.0", "True"], ["1.1": "False"]]

, allowing you to extract the keys using tuple decomposition.

If you only need keys and not values, Object.keys() can also be used. However, as the context was unclear, I provided the more versatile option.

Answer 4

It seems like your question is a bit vague in terms of the element you're struggling with.

If you want to retrieve the data:

async fetchData()
{
    const response = await fetch("<<insert URL from your Java service here>>")
    return await response.json();
}

To customize the format of the data:

formatData(json){
    return json.testdata.map((item) => Object.entries(item).map(([key, value]) => key)).flat()
}

And for displaying in Vue:

<template>testdata:{{testdata}}</template>
<script>
...
     methods:{
        async loadData(){
            const temp = await fetchData()
            this.testdata = formatData(temp)
        }
     }
...
</script>

Using Object.entries will convert an object into a tuple array, so

{"1.0":"True", "1.1":"False"}

will transform into

[["1.0", "True"], ["1.1": "False"]]

, allowing you to extract the keys using tuple decomposition.

If you only need keys and not values, Object.keys() can also be used. However, as the context was unclear, I provided the more versatile option.

What is the best way to transform a List<Pair<String, String>> to a List<String> using JavaScript?

Answer №1

Answer №2

Similar questions

Sorting through mongoose information on the front end using EJS depending on a dropdown pick

What is the best way to extract "true" values from an array and store them in a new array during iteration?

Comparing JSON and JavaScript object arrays: Exploring the differences in outcomes and strategies for achieving desired results

The issue with Postman Express.js Response Body not displaying any content is quite common

The password reset feature using bcrypt is malfunctioning, as headers cannot be modified once they have been sent to the client

Can I change the name of an item in ngRepeat?

Flask Server produces a response with a considerable delay when accessed through AJAX

Tips for accessing data in Vue.js pug templates:

Vanishing Items - Three.js CanvasRenderer

Replicate the array multiple times and combine them into a single flat array

Utilizing a directive in contexts beyond a component

JavaScript - Issue arises when evaluating the sine of complex numbers of large magnitudes

Creating dynamically generated nested text inputs with individual v-model bindings upon the clicking of a button

Creating custom validation in Vuetify for password confirmation is essential in ensuring that

Verify if the v-dialog is currently active and pause the audio playback

Managing different authentication methods for a single user on Firebase: Tips and Strategies

Executing PHP Functions with Script Tags

Utilize Protractor to extract the text within a specified span element

Using Redux with Next.js to implement getStaticPaths

Flask is failing to display AJAX data