0

Mi pregunta es,: ¿Cómo podría mapear un JSON con una estructura complicada, obtener sus propiedades y mostrar estas propiedades en una vista desde angular?

Es decir tengo esta respuesta de una API x

{
  count: 0,
  next: null,
  result: [
    0: {
      amount: 000,
      unique_reference: "OHIYFD",
      amount_quote: "12089.54000000",
      pair: {
          name: "XMRDOGE",
          base: {
              code: "XMR",
              name: "monero"
      },
      address: {
         address: 'xxx',
         name: ''
      },
      refeal_code: [
           {
              length: 23,
              init: 'xxxx'
           },
           {
              length: 13,
              init: 'xxxx'
           }
      ]
    }
  ]
}

quiero obtener esta estructura o un equivalente

[
    count,
    next,
    result [
        amount,
        unique_reference,
        amount_quote,
        pair [
            name,
            base [
                code,
                name
            ]
        ],
        address [
            address,
            name
        ],
        refeal_code [
            length,
            init
        ]
    ]
]

para mostrarlo así desde una pantalla en mi app de angular

introducir la descripción de la imagen aquí

Cabe indicar que los items que se seleccionen harán que recorra nuevamente el JSON y sólo de esos valores obtenga su data.

de antemano gracias.

3
  • 1
    Osea... pero entiendes que un array no funciona como un objeto cierto?, es decir, esto si es valido: {count: x}, pero esto NO: [count: x]
    – Layer
    el 19 mar. 2021 a las 19:02
  • Tal como te comenta @Riven, ¿qué debes mostrar en caso de que el campo result (es un Array) contenga más de un elemento? Lo mismo pasa con refeal_code, tal como se ve en la imagen, sólo muestras uno de los 2 elementos de dicho Array. ¿Cuál y porqué? el 19 mar. 2021 a las 19:59
  • Si lo entiendo, más bien ahí me falto indicar que lo que espero es el arreglo para llenar la lista de checkboxes, es decir: [ "nombre0", "nombre1", [ "nombre1-0", "nombre1-1 ] ] etc... (¿Ésto si se puede, no?)
    – razadi
    el 19 mar. 2021 a las 22:57

2 respuestas 2

1

Quizá esto te sirva de guía y te ayude, me tope con algo similar pero si no hay algo que te impida usar materal-design, puedes usar el mat-tree que te da un diseño de estilo árbol para mostrar los datos de una manera jerárquica, aunque es un poco extenso es bastante dinámico así te llegue la información con varios arrays y objetos.

.HTML

<mat-tree [dataSource]="dataSource" [treeControl]="treeControl">
  <mat-tree-node *matTreeNodeDef="let node" matTreeNodeToggle matTreeNodePadding>
    <button mat-icon-button disabled></button>
    <mat-checkbox class="checklist-leaf-node"
                  [checked]="checklistSelection.isSelected(node)"
                  (change)="checklistSelection.toggle(node);">{{node.item}}</mat-checkbox>
  </mat-tree-node>
  <mat-tree-node *matTreeNodeDef="let node; when: conHijo" matTreeNodePadding>
    <button mat-icon-button matTreeNodeToggle [attr.aria-label]="'toggle ' + node.filename">
      <mat-icon class="mat-icon-rtl-mirror">
        {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
      </mat-icon>
    </button>
    <mat-checkbox [checked]="descendienteTodos(node)"
                  [indeterminate]="descendienteParcial(node)">{{node.item}}</mat-checkbox>
  </mat-tree-node>
</mat-tree>

.TS

export class AllItemNode {
  children: AllItemNode[];
  item: string;
}

export class AllItemFlatNode {
  item: string;
  level: number;
  expandable: boolean;
}

const data_api = {
  count: null,
  next: null,
  result: [
    {
      amount: null,
      unique_reference: null,
      amount_quote: null,
      pair: {
        name: null,
        base: {
          code: null,
          name: null
        },
        address: {
          address: null,
          name: null
        },
        refeal_code: [
          {
            length: null,
            init: null
          },
          {
            length: null,
            init: null
          }
        ]
      }
    }
  ]
};

@Injectable()
export class ChecklistDatabase {
  dataChange: BehaviorSubject<AllItemNode[]> = new BehaviorSubject<AllItemNode[]>([]);

  get data(): AllItemNode[] {
    return this.dataChange.value;
  }

  constructor() {
    this.initialize();
  }

  initialize() {
    /*Construye los nodos del árbol a partir del objeto Json. El resultado es una lista de `TodoItemNode` con anidado archivar el nodo como hijos.*/
    const data = this.construirArbol(data_api, 0);
    //Notifica el cambio.
    this.dataChange.next(data);
  }

  /*Construye el árbol de estructura de archivos. El "valor" es el objeto Json, o un subárbol de un objeto Json. * Entonces el valor de retorno es la lista de `TodoItem Node`.*/

  construirArbol(value: any, level: number) {
    let data: any[] = [];
    for (let k in value) {
      let v = value[k];
      let node = new AllItemNode();
      node.item = `${k}`;
      if (v === null || v === undefined) {
        // ninguna acción
      } else if (typeof v === "object") {
        node.children = this.construirArbol(v, level + 1);
      } else {
        node.item = v;
      }
      data.push(node);
    }
    return data;
  }
}

/*@árbol de títulos con casillas de verificación*/
@Component({
  selector: "tree-checklist-example",
  templateUrl: "tree-checklist-example.html",
  providers: [ChecklistDatabase]
})
export class TreeChecklistExample {
  /*Asignar de nodo plano a nodo anidado. Esto nos ayuda a encontrar el nodo anidado que se va a modificar.*/
  flatNodeMap: Map<AllItemFlatNode, AllItemNode> = new Map<AllItemFlatNode,AllItemNode>();

  /*Asignar de nodo anidado a nodo aplanar. Esto nos ayuda a mantener el mismo objeto para la selección.*/
  nestedNodeMap: Map<AllItemNode, AllItemFlatNode> = new Map<AllItemNode,AllItemFlatNode>();

  /*Un nodo principal seleccionado para ser insertado*/
  selectedParent: AllItemFlatNode | null = null;

  /*El nombre de los nuevos elementos*/
  newItemName: string = "";
  treeControl: FlatTreeControl<AllItemFlatNode>;
  treeFlattener: MatTreeFlattener<AllItemNode, AllItemFlatNode>;
  dataSource: MatTreeFlatDataSource<AllItemNode, AllItemFlatNode>;

  /*La selección para la lista de verificación*/
  checklistSelection = new SelectionModel<AllItemFlatNode>(
    true 
  );

  constructor(private database: ChecklistDatabase) {
    this.treeFlattener = new MatTreeFlattener(
      this.transformar,
      this.getLevel,
      this.isExpandible,
      this.getChildren
    );
    this.treeControl = new FlatTreeControl<AllItemFlatNode>(
      this.getLevel,
      this.isExpandible
    );
    this.dataSource = new MatTreeFlatDataSource(
      this.treeControl,
      this.treeFlattener
    );
    database.dataChange.subscribe(data => {
      this.dataSource.data = data;
    });
  }

  getLevel = (node: AllItemFlatNode) => {
    return node.level;
  };
  isExpandible = (node: AllItemFlatNode) => {
    return node.expandable;
  };
  getChildren = (node: AllItemNode): Observable<AllItemNode[]> => {
    return ofObservable(node.children);
  };
  conHijo = (_: number, _nodeData: AllItemFlatNode) => {
    return _nodeData.expandable;
  };

  /*Transformador para convertir un nodo anidado en un nodo plano. Registre los nodos en mapas para su uso posterior.*/
  transformar = (node: AllItemNode, level: number) => {
    let flatNode =
      this.nestedNodeMap.has(node) &&
      this.nestedNodeMap.get(node)!.item === node.item
        ? this.nestedNodeMap.get(node)!
        : new AllItemFlatNode();
    flatNode.item = node.item;
    flatNode.level = level;
    flatNode.expandable = !!node.children;
    this.flatNodeMap.set(flatNode, node);
    this.nestedNodeMap.set(node, flatNode);
    return flatNode;
  };

  /*Si se seleccionan todos los descendientes del nodo*/
  descendienteTodos(node: AllItemFlatNode): boolean {
    const descendants = this.treeControl.getDescendants(node);
    return descendants.every(child =>
      this.checklistSelection.isSelected(child)
    );
  }

  /*Si se selecciona parte de los descendientes*/
  descendienteParcial(node: AllItemFlatNode): boolean {
    const descendants = this.treeControl.getDescendants(node);
    const result = descendants.some(child =>
      this.checklistSelection.isSelected(child)
    );
    return result && !this.descendienteTodos(node);
  }
}

Para ver la demo en stackbliz demo

1
  • Muy interesante, deja revisarlo, gracias por contestar
    – razadi
    el 20 mar. 2021 a las 14:42
1

Con una función recursiva:

function recorre( json, e, ruta='' ){
    //console.log('recorre '+ruta, json);

    if( Array.isArray(json) && json.length )
        recorre(json[0], e, ruta);
    else
        for( nombre in json ){
            let valor = Reflect.get(json,nombre);
            // console.log('   '+nombre,valor);
            let div = document.createElement('div');

            let input = document.createElement('input');
            input.type = 'checkbox';
            input.name = ruta+'/'+nombre;
            div.appendChild( input );

            let label = document.createElement('label');
            label.appendChild( document.createTextNode(nombre) );               
            div.appendChild( label );

            e.appendChild( div );

            if( valor !== null && ( Array.isArray(valor) || typeof valor === 'object' ) )
                recorre(valor, div, ruta+'/'+nombre);
        }
};

var json =  { count: 0
            , next: null
            , result:   [   { amount: 000
                            , unique_reference: "OHIYFD"
                            , amount_quote: "12089.54000000"
                            , pair: { name: "XMRDOGE"
                                    , base: { code: "XMR"
                                            , name: "monero"
                                            }
                                    , address:  { address: 'xxx'
                                                , name: ''
                                                }
                                    , refeal_code:  [   { length: 23
                                                        , init: 'xxxx'
                                                        }
                                                    ,   { length: 13
                                                    ,   init: 'xxxx'
                                                    }
                                                    ]
                                    }
                            }
                        ]
            };
recorre( json, document.getElementById('arbol') );
<html>
<head>
    <style type="text/css">
        content div{ margin-left: 16px; }
    </style>
</head>
<body>
    <content id="arbol"/>
</body>
</html>

El principal detalle es saltarse los índices de los arreglos para no tener checkboxes con 0, 1, etc., eso lo hace el primer if().

El resto es recorrer dinámicamente las propiedades del objeto y obtener por reflexión cada uno de los valores y así determinar la recursion, la cual será únicamente con objetos y arreglos no nulos/vacíos.

Para el posterior manejo de las selecciones, durante la creación de los checkboxes he agregado en name -puede ser otro atributo- la ruta al objeto. Dependiendo de lo vayas a hacer, podrías hacer algo como JsonPath.

1
  • Excelente, lo reviso, gracias por contestar
    – razadi
    el 21 mar. 2021 a las 13:01

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.