使用 JavaScript 映射和缩减 JSON 对象

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?

Answer 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 ?

Answer 2

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);
}

Answer 3

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

Answer 4

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);