Map and Reduce a JSON Object with JavaScript

Question

Consider this object below:

    {
    "_items": [
        {
            "_id": "player_1",
            "score": {
                "a": -4.74,
                "b": 0.71,
                "c": -4.04,
                "d": 3.37,
                "e": 0.22,
                "f": 1.09,
                "g": -2.17              
            }
        }
    ]
}

I would to Map and Reduce and generate a new object containing only the score object :

{
    "a": -4.74,
    "b": 0.71,
    "c": -4.04,
    "d": 3.37,
    "e": 0.22,
    "f": 1.09,
    "g": -2.17
}

I was thinking something like this might be moving in the right directions, but does not seem to do what I was expecting:

this.service.getscore()
  .map(res => res.json())
  .map(v => v._items[0].score)
  .subscribe(data => { this.sc = data });

console.log(this.sc); will give me the same result as the first json.

While I recognize that it is probably better and easier to do this on the server-side, it's not possible in my case. I am wondering if what I am trying to do can be done on the client side with JavaScript. Any suggestions?

thanks for the answer but I'm not sure what do you mean by json[..] — user2243952
– user2243952, Commented May 20, 2017 at 1:33
"console.log(this.sc); will give me the same result as the first json." And what are you expecting?? — developer033
– developer033, Commented May 20, 2017 at 2:15
this.service.getscore().map(res => res.json()).map(v => v._items[0].score).subscribe(data => { this.sc= data }); should give me the second result — user2243952
– user2243952, Commented May 20, 2017 at 2:16
You do know that this.sc will not be set until the subscription handler runs, and until then will have some previous value, right? — user663031
– user663031, Commented May 20, 2017 at 3:02

Toan Tran · Accepted Answer · 2017-05-20 02:18:11Z

1

Could you try my code below:

var item = {
  "_items": [{
      "_id": "player_1",
      "score": {
        "a": -4.74,
        "b": 0.71,
        "c": -4.04,
        "d": 3.37,
        "e": 0.22,
        "f": 1.09,
        "g": -2.17
      }
    },
    {
      "_id": "player_2",
      "score": {
        "a": -4.74,
        "b": 0.71,
        "c": -4.04,
        "d": 3.37,
        "e": 0.22,
        "f": 1.09,
        "g": -2.17
      }
    }
  ]
};
let arrayScores = item._items.map(el => el.score);
console.log(arrayScores);

There is the arrayScores value:

[{
  a: -4.74,
  b: 0.71,
  c: -4.04,
  d: 3.37,
  e: 0.22,
  f: 1.09,
  g: -2.17
}, {
  a: -4.74,
  b: 0.71,
  c: -4.04,
  d: 3.37,
  e: 0.22,
  f: 1.09,
  g: -2.17
}]

Does it make sense ?

answered May 20, 2017 at 2:18

Toan Tran

2,0573 gold badges25 silver badges38 bronze badges

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

3 Comments

user2243952 Over a year ago

i'm getting the json through a http request and then assigning an empty object to that json . I don't have any ._items defined.

Toan Tran Over a year ago

You mean that you received the result in string from HTTP response ?. Have you tried to convert it to JSON object by using JSON.parse(result_string)

user2243952 Over a year ago

no it's not a string. I'm using observables and mapping it into json : can striguify it but cannot parse it beacuse it's a json already : this.service.getscore() .map(res => res.json()) .map(v => v._items[0].score) .subscribe(data => { this.sc = data });

cpugourou · Accepted Answer · 2017-05-20 01:37:49Z

the simplier, the better ?:

    var json = [{
        "_items": [
            {
                "_id": "player_1",
                "score": {
                    "a": -4.74,
                    "b": 0.71,
                    "c": -4.04,
                    "d": 3.37,
                    "e": 0.22,
                    "f": 1.09,
                    "g": -2.17
                }
            }
        ]
    }, {
        "_items": [
            {
                "_id": "player_2",
                "score": {
                    "a": -4.74,
                    "b": 0.71,
                    "c": -4.04,
                    "d": 3.37,
                    "e": 0.22,
                    "f": 1.09,
                    "g": -2.17
                }
            }
        ]
    }];
var scores = [];
for (var i = 0, var j = json.length; i <= j; i++) {
    scores.push(json[i]._items[0].score);
}

json is an object that contains an array . it would have been easier if it was an array. also, I'm getting property .length does not exist on type {}.
I am getting the json from a web server with an angular service and then assigning an empty object sc={} to that json. I can't use dots to access it

AVJT82 · Accepted Answer · 2017-05-20 08:54:14Z

As Maria Ines Parnisari mentioned, you can extract exactly the data you want, by stepping into the JSON you are receiving. So we just extract the content of score and assign it to an object:

Service:

getscore() {
  return this.http.get('src/data.json')
    .map(res => res.json()._items[0].score) // let's get the content of 'score'
}

Component:

ngOnInit() {
  this.service.getscore()
    .subscribe(data => {
      this.sc = data;
    })
}

DEMO

Rohìt Jíndal · Accepted Answer · 2017-05-20 08:55:51Z

0

Working demo

this.sc = {
    "_items": [
        {
            "_id": "player_1",
            "score": {
                "a": -4.74,
                "b": 0.71,
                "c": -4.04,
                "d": 3.37,
                "e": 0.22,
                "f": 1.09,
                "g": -2.17              
            }
        }
    ]
};

console.log(this.sc._items[0].score);

answered May 20, 2017 at 8:55

Rohìt Jíndal

27.4k16 gold badges80 silver badges133 bronze badges

Collectives™ on Stack Overflow

Map and Reduce a JSON Object with JavaScript

4 Answers 4

3 Comments

2 Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

2 Comments

Comments

Comments

Related