Iteration of arrays and objects

Question

I have the following data coming from the api:

{
"unidades": [{
    "row": {
        "0": {
            "titulo": "Unidade S\u00e3o Paulo",
            "url": "unidade-sao-paulo",
            "descricao": "Lorem ipsum dolor, sit amet consectetur adipisicing elit. Veritatis repellat necessitatibus voluptatem, id distinctio dolore praesentium molestias exercitationem cumque quae. Illum quam nostrum iure voluptatibus dignissimos blanditiis eius rem fugiat. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Fugit, esse. teste.",
            "mapa": "https:\/\/www.google.com\/maps\/embed?pb=!1m18!1m12!1m3!1d34814.407067189415!2d-46.464300200826266!3d-23.481601745424488!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x94ce5fdc7408f3b7%3A0x4bd6aaf16595e2f1!2sParque+Ecol%C3%B3gico+do+Tiet%C3%AA!5e0!3m2!1sen!2sbr!4v1533210424008",
            "galeria": ["\\assets\\images\\unidades\\unidade-sao-paulo\\bd06dd72fffd392ad69554ff04a5819b.jpg", "\\assets\\images\\unidades\\unidade-sao-paulo\\c28a8038364deb5b8ea01ed88ea40314.jpg"]
        },
        "3": {
            "titulo": "Unidade 3",
            "url": "unidade-3",
            "descricao": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Obcaecati provident adipisci cupiditate ea temporibus consequatur dolores magnam fugiat quisquam at velit voluptate deserunt, quasi amet. Molestiae aut dolor beatae quas! Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem nulla eaque.",
            "mapa": "https:\/\/www.google.com\/maps\/embed?pb=!1m18!1m12!1m3!1d123116.66013559673!2d-98.89025651822472!3d57.95896649207766!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x525d3e1c8cf1057d%3A0x3894f5a6e00235da!2sSand+Lakes+Provincial+Wilderness+Park!5e0!3m2!1sen!2sbr!4v1533858514847",
            "galeria": ["\\assets\\images\\unidades\\unidade-3\\fa87db6712e6e0518b1d7bd402230ca9.jpg", "\\assets\\images\\unidades\\unidade-3\\c82106d1b52dad5898524c1a3e29e270.jpg"]
        }
    }
}, {
    "row": {
        "1": {
            "titulo": "Unidade 1",
            "url": "unidade-1",
            "descricao": "cria\u00e7\u00e3o da unidade 1 de exemplo",
            "mapa": "https:\/\/www.google.com\/maps\/embed?pb=!1m18!1m12!1m3!1d243826.17580693625!2d-58.008067541334526!3d-17.27768204570092!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x93850fb366fa0f2f%3A0x352da546bf8209ff!2sState+of+Mato+Grosso!5e0!3m2!1sen!2sbr!4v1533858016289",
            "galeria": [
                "\\assets\\images\\unidades\\unidade-1\\8caed56b129c737f93efcbd5aba2b8a4.jpg", 
                "\\assets\\images\\unidades\\unidade-1\\d3e498aa3e303004d471757d17f95330.jpg", 
                "\\assets\\images\\unidades\\unidade-1\\1dfd285ce4480c8b3ec173e4b19b8c0e.jpg"
            ]
        },
        "4": {
            "titulo": "Unidade 4",
            "url": "unidade-4",
            "descricao": "descri\u00e7\u00e3o de teste unidade 4",
            "mapa": "https:\/\/www.google.com\/maps\/embed?pb=!1m18!1m12!1m3!1d7867.687634209555!2d-45.57934610711002!3d60.463011640048414!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4eaa4f969396ea09%3A0xd63558965b94e1a6!2sAlluitsup+Paa%2C+Greenland!5e0!3m2!1sen!2sbr!4v1533858440104",
            "galeria": [
                "\\assets\\images\\unidades\\unidade-4\\b84b5813aacefa9e7c8357379b208fd9.jpg",
                "\\assets\\images\\unidades\\unidade-4\\5535148b092fc381a5381bb51d25261d.jpg",
                "\\assets\\images\\unidades\\unidade-4\\f8870532520f1dbf3bdb45cce19c2f42.jpg",
                "\\assets\\images\\unidades\\unidade-4\\8298904c8ef69ecb5288eae42708b878.jpg"
            ]
        }
    }
}, {
    "row": {
        "2": {
            "titulo": "Unidade 2",
            "url": "unidade-2",
            "descricao": "unidade 2 teste",
            "mapa": "https:\/\/www.google.com\/maps\/embed?pb=!1m18!1m12!1m3!1d15336.03774711962!2d18.49229377920496!3d16.065000091055342!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x11476b40f9d760bd%3A0x8287051ddad8a038!2sKoro+Toro%2C+Chad!5e0!3m2!1sen!2sbr!4v1533858133835",
            "galeria": ["\\assets\\images\\unidades\\unidade-2\\bae42802dc43834615565a33aed780af.jpg"]
        }
    }
}]
}

I am trying to iterate this data but I get the error:

"Cannot find a differ supporting Object '[Object Object]' of type 'Object'. Ngfor only Supports Binding to Iterables such as Arrays."

thus:

<div class="row" *ngFor="let rows of unidades">         
        <div class="col-sm-6" *ngFor="let unidade of rows"> <!-- nessa linha -->

Answer 1

Your JSON is not in the format for you to run ngFor in this way.

As the error itself says:

"Cannot find a differ supporting Object '[Object Object]' of type 'Object'. Ngfor only Supports Binding to Iterables such as Arrays."

<div class="row" *ngFor="let rows of unidades">

this part works, because within unidades there is an array:

"unidades": [...]

but rows['row']

 "row": { ... }

is an object {} and not an array [] and the line below will not work

<div class="col-sm-6" *ngFor="let unidade of rows['row']">

The syntax waits *ngFor="let <Object> of <Array>"

You must transform the rows['row'] in an array before.

EDIT:

You can use this snipet

this.data.unidades.forEach((e)=>{
    let row = Object.values(e)[0];
    this.rows_transformed.push(Object.values(row));
});

this.rows_transformed = [].concat.apply([],this.rows_transformed);

Then do the ngFor in rows_transformed.

I made an example for Voce Here