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-19 07:08:21Z

1

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

edited Feb 19, 2019 at 7:08

answered Feb 19, 2019 at 6:38

Abhishek Sharma

3392 silver badges8 bronze badges

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

2 Comments

Swapnali Pode Over a year ago

This is working perfectly fine.Thank you Abhishek for your help.

Swapnali Pode Over a year ago

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.

Hamza Ahmed · Accepted Answer · 2019-02-19 06:52:01Z

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

Collectives™ on Stack Overflow

How to fetch value from json object in angular 6?

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related