How to iterate through the subscribed observable data in typescript angular

Question

This is my service method where i am returning observables.

getAllProperties() {
    return this.http.get("./assets/data/properties.json");
  }

This is my JSON file which i am storing locally in assets folder and using HttpClient to get data

[
    {
        "id": 1,
        "name": "Real Estate Bldg",
        "type": "House",
        "price": 12000
    },
    {
        "id": 2,
        "name": "Blue Crown",
        "type": "House",
        "price": 11000
    },
    {
        "id": 3,
        "name": "Empire State",
        "type": "House",
        "price": 19000
    },
    {
        "id": 4,
        "name": "Nile Realtor",
        "type": "House",
        "price": 10000
    },
    {
        "id": 5,
        "name": "Benzamin House",
        "type": "House",
        "price": 21000
    },
    {
        "id": 6,
        "name": "Nizel State",
        "type": "House",
        "price": 45000
    }
]

when I am subscribing the service method I can not iterate through data

this.propertyService.getAllProperties().subscribe(data => {
      // want to iterate through "data"  but it is giving me error Element implicitly has an 'any' type because expression of type 'string' can't be used to index type 'Object'.No index signature with a parameter of type 'string' was found on type 'Object'.

// if i assign the data to globally declared variable  properties:any; and then iterate i can . but what is the problem to iterate through "data" here
      for (const key in data) {
        if (data.hasOwnProperty(key)) {
          console.log(data[key]);    // this line is giving red squigly marks
// [solution may be] 
//Object.values(data).forEach(element => {
  //      console.log(element);
  //    });

        }
      }
    });

Does this answer your question? [For-each over an array in JavaScript](https://stackoverflow.com/questions/9329446/for-each-over-an-array-in-javascript) — Heretic Monkey, Apr 16 '21 at 13:27

score 0 · Answer 1 · 2021-04-16T13:25:29.970

0

You have list of objects here. Try it this way to see the objects itself:

this.propertyService.getAllProperties().subscribe(data =>
    
     let json: any;

     if (data) {
         json = JSON.parse(data);   
     } else {
         return;
     }

     for (const obj of json) {
          if (obj) {
               console.log(obj);
          }
     }
});

And this way to access each field:

this.propertyService.getAllProperties().subscribe(data =>
     let json: any;

     if (data) {
         json = JSON.parse(data);   
     } else {
         return;
     }

      for (const obj of json) {
          if (obj) {
              for (const key in obj) {
                 if (obj.hasOwnProperty(key)) {
                    console.log(obj[key]); 
                 }
              }
          }
     }
});

edited Apr 16 '21 at 13:25

answered Apr 16 '21 at 07:45

Thank you for responding. Both the cases giving me this error "Type 'Object' must have a '[Symbol.iterator]()' method that returns an iterator. " – Kishore Kumer Apr 16 '21 at 12:43
I adjusted the code. I forgot that you do not get the plain object from the server. you have to parse it to JSON-object first. – Apr 16 '21 at 13:26
Hello . this time it is saying like Argument of type 'Object' is not assignable to parameter of type 'string' in the parse – Kishore Kumer Apr 16 '21 at 15:29
Okay. Let's get back to square one. Let's have a look at what type of object data is. Please `console.log()` your `data` object and post it here. Something like this: `this.propertyService.getAllProperties().subscribe(data => console.log(data));` --- Then we'll see how to access the JSON properly. – Apr 16 '21 at 17:15
when i console.log() data it comes like this [ {}, {}, {} ] . when i do typeof(data) it comes object – Kishore Kumer Apr 17 '21 at 03:18
Object.values(data).forEach(element => { console.log(element); }); this solved my problem i guess – Kishore Kumer Apr 17 '21 at 03:48
What I see else is, that you receive a list of empty objects. This is why you got the error with the string in the first place. --- However, glad to see that it works now. – Apr 17 '21 at 05:57

How to iterate through the subscribed observable data in typescript angular

1 Answers1