Iteration of arrays and objects

Navigation
0

I have the following data coming from 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'm trying to iterate this data but I get the error:

  

"Can not find a differing supporting object."

this way: 

<div class="row" *ngFor="let rows of unidades">         
        <div class="col-sm-6" *ngFor="let unidade of rows"> <!-- nessa linha -->
    
asked by anonymous 10.08.2018 / 03:04

1 answer

1

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

As the error itself says:

  

"Can not find a 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 a {} 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 expects *ngFor="let <Object> of <Array>"

You should turn rows['row'] into an array first.

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 make ngFor into rows_transformed .

I've set an example for you Here

    
10.08.2018 / 03:50
Validate date in editfor How to treat an array with N rows and transform to a list to send to C #