How to fetch value from json object in angular 6?

Question

I have one json file which contains multiple objects inside another object. I want to fetch data but not using key of that value. I want to iterate there key and values and want to print them dynamically in angular 6.

{
  "name" : "abc",
  "tags" : "def",
  "updated-by" : "ijk",
  "property" : {
    "description" : "abcd",
    "type" : "string"
  },
  "sources" : {
    "input" : {
      "type" : "lmn",
      "properties" : {
        "key" : "opq"
      }
    }
  }
}

Can we iterate objects like we iterates array. If anyone can help?

Abhishek Sharma · Accepted Answer · 2019-02-19T07:08:21.560

I would suggest referring this StackOverflow question,

As far as I know, *ngFor can be used not only for arrays but also for Objects.

Hope the above link helps.

Also for the keys whose values contain objects, you could check if the corresponding value of the key is an object.

For instance,

if( (typeof A === "object") && (A !== null) )

where A is the corresponding value of the key. If A is indeed an object, use *ngFor again to iterate over the object.

I haven't tested the following code but I hope you get an overview of what I am trying to say,

@Component({
  selector: 'app-myview',
  template: 
  `<div *ngFor="let key of objectKeys(items)">{{key + ' : ' + items[key]}}
    <div *ngIf="checkFunction(items[key])">
      <div *ngFor="let key2 of objectKeys(items[key])">            
         {{key2 + ' :' + items[key][key2]}}
      </div>
    </div>
  
  </div>`
})

export class MyComponent {
  objectKeys = Object.keys;
  items = { keyOne: 'value 1', keyTwo: 'value 2', keyThree: 'value 3' };
  constructor(){}
  
  checkFunction(obj){
    if( (typeof obj === "object") && (obj !== null) )
    {
      return true;
    }
    else{
      return false;
    }
  }
}

This is working perfectly fine.Thank you Abhishek for your help. — Swapnali Pode, Feb 19 '19 at 09:45
Hi Abhishek, I told u that it is working but it is working only till one object inside a object but it is not working for again nested objects.How to make them dynamic ,can u please help. — Swapnali Pode, Feb 20 '19 at 13:23

score 0 · Answer 2 · answered Feb 19 '19 at 06:52

var temp = {
  "name" : "abc",
  "tags" : "def",
  "updated-by" : "ijk",
  "property" : {
    "description" : "abcd",
    "type" : "string"
  },
  "sources" : {
    "input" : {
      "type" : "lmn",
      "properties" : {
        "key" : "opq"
      }
    }
  }
};

flatten the object

var flattenObject = function(ob) {
        var toReturn = {};

        for (var i in ob) {
            if (!ob.hasOwnProperty(i)) continue;

            if ((typeof ob[i]) == 'object') {
                var flatObject = flattenObject(ob[i]);
                for (var x in flatObject) {
                    if (!flatObject.hasOwnProperty(x)) continue;

                    toReturn[i + '.' + x] = flatObject[x];
                }
            } else {
                toReturn[i] = ob[i];
            }
        }
        return toReturn;
    };

    var flat = flattenObject(temp)

Iterate over object just like array

Object.entries(flat).forEach(entry => {
    console.log(entry[0] + " => " + entry[1])
})

How to fetch value from json object in angular 6?

2 Answers2

Linked