unable to get the data from dynamic json

Question

here below is my json

[{
    "_hits": 2.163,
    "_type": "data",
    "_id": "11138",
    "_source": {
      "urls": "http://localhost:9618/info?data_id=11138",
      "host": "max",
      "roll": "11138",
      "information": {
        "type": "image/jpeg",
        "data_id": "11138",
        "data_size": 186497,
        "creation_utctime": "1494831805258",
      },
      "subhost": "sample"
    },
    "_index": "max"
  }
];

by using the above i want to store in a variable and want to use that for other purpose. So on button click on im processing the data

<button type="button"(click)="getData()" >get Data</button>

 getData(){
  this.rows = [];
   for (var res in this.info){
    var row = {};
    for (var key in this.info[res]['_source']){
 for (var k in this.info[res]['_source'][key]){
let temp = key + "." + k;
row[temp] = this.info[res]['_source'][key][k];
 }
 row['_id'] = this.info[res]['_id'];
    }
 this.rows.push(row);
 console.log(this.rows);

   }
}

Requrired out put is :

host:"max"
information.creation_utctime: "1494831805258"
information.data_id: "11138"
information.data_size: 186497
information.type: "image/jpeg"
roll:"11138"
subhost:"sample"

urls:"http://localhost:9618/info?data_id=11138"
_id: "11138"

the out put i am getting is :

host.0: "m"
host.1: "a"
host.2: "x"
information.creation_utctime: "1494831805258"
information.data_id: "11138"
information.data_size: 186497
information.type: "image/jpeg"
roll.0: "1"
roll.1: "1"
roll.2: "1"
roll.3: "3"
roll.4: "8"
subhost.0: "s"
subhost.1: "a"
subhost.2: "m"
subhost.3: "p"
subhost.4: "l"
subhost.5: "e"
urls.0: "h"
urls.1: "t"
urls.10: "a"
urls.11: "l"
urls.12: "h"
urls.13: "o"
urls.14: "s"
urls.15: "t"
urls.16: ":"
urls.17: "9"
urls.18: "6"
urls.19: "1"
urls.2: "t"
urls.20: "8"
urls.21: "/"
urls.22: "i"
urls.23: "n"
urls.24: "f"
urls.25: "o"
urls.26: "?"
urls.27: "d"
urls.28: "a"
urls.29: "t"
urls.3: "p"
urls.30: "a"
urls.31: "_"
urls.32: "i"
urls.33: "d"
urls.34: "="
urls.35: "1"
urls.36: "1"
urls.37: "1"
urls.38: "3"
urls.39: "8"
urls.4: ":"
urls.5: "/"
urls.6: "/"
urls.7: "l"
urls.8: "o"
urls.9: "c"
_id: "11138"

below is my stackblitzurl

https://stackblitz.com/edit/angular-d7mnpz

so here i want the data the in above require output and i am getting the above output

Answer 1

Your getData() is puting the '.k' in the name of the attribute.
You have to do only if it's an object.
Here's the correct code:

    getData() {
    this.rows = [];
    for (var res in this.info) {
      var row = {};
      for (var key in this.info[res]['_source']) {
        if (typeof this.info[res]['_source'][key] === 'object') {
          for (var k in this.info[res]['_source'][key]) {
            let temp = key + "." + k;
            row[temp] = this.info[res]['_source'][key][k];
          }
        } else {
          row[key] = this.info[res]['_source'][key]
        }
        row['_id'] = this.info[res]['_id'];
      }
    }
    this.rows.push(row);
    console.log(this.rows);
  }

Answer 2

Try this:

getData(){
      this.rows = [];

      const nodeToFlat = '_source';

      this.info.forEach( (info,index) => {
        let tmpRowStr = {};
        for( let x in info[nodeToFlat]){
          if(info[nodeToFlat][x].constructor === Object){
            for (let z in info[nodeToFlat][x] ) {
              tmpRowStr[`${x}.${z}`] = info[nodeToFlat][x][z];
            }

          } else {
            tmpRowStr[`${x}`] = info[nodeToFlat][x];
          }
        }

        this.rows.push(tmpRowStr);
      }
     )

     console.log('======>' ,this.rows);


    }