mapping Json to form an array

Question

Below is my Json

"Issues": [
    {
        "Id": null,
        "Key": "Project20",
        "Values": [
            {
                "Key": "Display Name",
                "Value": "Rya"
            },
            {
                "Key": "UserName",
                "Value": "RH"
            },
            {
                "Key": "Count",
                "Value": "350"
            }
        ]
    },
    {
        "Id": null,
        "Key": "Project30",
        "Values": [
            {
                "Key": "Display Name",
                "Value": "Mike"
            },
            {
                "Key": "UserName",
                "Value": "ML"
            },
            {
                "Key": "Count",
                "Value": "90"
            }
        ]
    }
]

I need to map this Json to form the below array

{ "Display Name": 'Rya', "UserName" : "RH", value: 350, url: "Project20" },
{ "Display Name": 'Mike', "UserName" : "ML", value: 90, url:"Project30" }

Basically, I need to get the Key also in my array.

I tried

Issues.map(o => o.Values.reduce((acc, {Key, Value}) => (acc[Key] = Value, acc), {}));

this gives me

{ "Display Name": 'Rya', "UserName" : "RH", value: 350 },
{ "Display Name": 'Mike', "UserName" : "ML", value: 90 }

But I need the Key field also in the array

trincot · Accepted Answer · 2017-05-12 09:58:28Z

4

Use the initial value argument of reduce. So instead of {} pass { url: o.Key }:

Issues.map(o => o.Values.reduce((acc, {Key, Value}) => (acc[Key] = Value, acc),
                                { url: o.Key }));

For those on IE, you'll need to use the ES5-compatible syntax:

Issues.map(function (o) {
    return o.Values.reduce(function (acc, pair) {
        acc[pair.Key] = pair.Value;
        return acc;
    }, { url: o.Key });
});

var Issues = [
    {
        "Id": null,
        "Key": "Project20",
        "Values": [
            {
                "Key": "Display Name",
                "Value": "Rya"
            },
            {
                "Key": "UserName",
                "Value": "RH"
            },
            {
                "Key": "Count",
                "Value": "350"
            }
        ]
    },
    {
        "Id": null,
        "Key": "Project30",
        "Values": [
            {
                "Key": "Display Name",
                "Value": "Mike"
            },
            {
                "Key": "UserName",
                "Value": "ML"
            },
            {
                "Key": "Count",
                "Value": "90"
            }
        ]
    }
];

var result = Issues.map(function (o) {
    return o.Values.reduce(function (acc, pair) {
        acc[pair.Key] = pair.Value;
        return acc;
    }, { url: o.Key });
});

console.log(result);

edited May 12, 2017 at 9:58

answered May 8, 2017 at 20:16

trincot

357k38 gold badges282 silver badges338 bronze badges

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

7 Comments

indra257 Over a year ago

Does this work in IE? I couldn't able to test it. If it doesn't work, is there a tool to convert it, as I used similarly in many parts of my code

indra257 Over a year ago

Did you get a chance to see my comment

trincot Over a year ago

Since you had provided ES6 syntax in your question which gave you a result, I had assumed you had ES6 support. See update to my answer, which includes an ES5 version.

indra257 Over a year ago

Thanks trincot. I came to know that recently. Thanks for your help. Is there any tool where I can convert my other ES6 code.

trincot Over a year ago

Yes, there is: babeljs.io/repl Make sure in the presets drop-down you select ES2015.

|

Collectives™ on Stack Overflow

mapping Json to form an array

1 Answer 1

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related