Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

willwalker

Angular Cli, TypeScript, como utilizar um get json

Recommended Posts

Estou desenvolvendo uma aplicação com Angular Cli, estou acompanhado um curso onde ele cria os arrays e cadastra no localStorage do naveador.

 

Mas eu queria fazer diferente, quero chamar uma api, ler esse json e alimentar meu HTML.

 

No app.module.ts importei o HttpClientModule e no meu component.ts coloquei o seguinte:

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-listar',
  templateUrl: './listar.component.html',
  styleUrls: ['./listar.component.css']
})
export class ListarComponent implements OnInit {
  itensJson: string[];

  constructor(private http: HttpClient) { }

  ngOnInit() {
    const Key = "2hKjRWO84XXPqnffl8lPZW1WCXbSyQj8q5VDpECf";

    this.http.get('https://api.com?api_key='+Key).subscribe(data => {
      this.itensJson = data['itensJson'];
    });
  }
}

Só que agora eu não sei como manipular isso. No HTML no tr eu coloquei assim:

<tr *ngFor="let itensJson of itens">
  <td>{{ itens.nome }}</td>
</tr>

Mas não exibe nada e eu não sei como eu poderia debugar o retorno do Json, estou estudando as sintaxe do Angular, mas não tenho dificuldades em Javascript. Só quero aprender de forma correta a usar o Angular.

 

Abraços e obrigado!

Compartilhar este post


Link para o post
Compartilhar em outros sites

  • Conteúdo Similar

    • Por eiwes
      Eu tenho esse código, mas preciso retornar funções puras em vez de funções mutáveis.
       
      É possível? Talvez usando OOP? Não sei como melhorar isso.
       
      Tentei retornar os valores de cada função, mas não obtive sucesso.
       
      import { AssetStatusType } from '@domain/interfaces/common' import { BothComponentType, ComponentsType, GroupFiltersType, OperationType, OverviewModelType, PendenciesOverviewType, PendenciesType, StructurePendenciesCount, StructureStatusCount } from '../../types' const updateStatusCount = ( statusCount: StructureStatusCount, status: AssetStatusType ) => { statusCount[status] = (statusCount[status] || 0) + 1 } const updatePendenciesCount = ( pendenciesCount: StructurePendenciesCount, key: AssetStatusType, subKey: OperationType | PendenciesOverviewType ) => { pendenciesCount[key] = pendenciesCount[key] ?? {} pendenciesCount[key][subKey] = (pendenciesCount[key]?.[subKey] || 0) + 1 } const processOverviewPendencies = ( pendencies: PendenciesType[] | null | undefined, pendenciesCount: StructurePendenciesCount, countedIds: Set<string>, id: string ) => { if (pendencies?.length) { for (const { state, pendencyType } of pendencies) { const uniqueId = `${state}-${pendencyType}-${id}` if (!countedIds.has(uniqueId)) { updatePendenciesCount(pendenciesCount, state, pendencyType) countedIds.add(uniqueId) } } } } const processOverviewComponents = ( components: ComponentsType[], isGroupByTree: boolean, statusCount: StructureStatusCount, pendenciesCount: StructurePendenciesCount, countedIds: Set<string>, id: string, type: BothComponentType ) => { for (const { pendencies, status, operationType } of components) { if (isGroupByTree && type === 'location') { updateStatusCount(statusCount, status) if (operationType) { updatePendenciesCount(pendenciesCount, status, operationType) } } processOverviewPendencies(pendencies, pendenciesCount, countedIds, id) } } const processOverviewData = ( data: OverviewModelType[], groupBy: GroupFiltersType, statusCount: StructureStatusCount, pendenciesCount: StructurePendenciesCount, countedIds: Set<string> ) => { const isGroupByTree = groupBy === 'tree' const isGroupByAsset = groupBy === 'asset' for (const { id, status, components, operationType, type } of data) { if (isGroupByAsset || type === 'asset') { updateStatusCount(statusCount, status) if (operationType) { updatePendenciesCount(pendenciesCount, status, operationType) } } processOverviewComponents( components, isGroupByTree, statusCount, pendenciesCount, countedIds, id, type ) } } export const calculateOverviewCounts = ( data: OverviewModelType[], groupBy: GroupFiltersType ) => { const statusCount: StructureStatusCount = {} as StructureStatusCount const pendenciesCount: StructurePendenciesCount = {} as StructurePendenciesCount const countedIds = new Set<string>() processOverviewData(data, groupBy, statusCount, pendenciesCount, countedIds) return { ...statusCount, pendencies: pendenciesCount } } Existe uma maneira mais limpa e elegante de fazer isso? Preciso retornar um objeto como este:
      // calculateOverviewCounts return this { pendencies: StructurePendenciesCount; working: number; inAlert: number; warning: number; stopped: number; off: number; } StructurePendenciesCount é:

    • Por clovis.sardinha
      Estou em um impasse pois sei pouco de javascript. Estou fazendo um autocomplete com CI4 e Javascript.
      Consigo gerar, através do controllers/model do CI4 um arquivo em json, mas não consigo retorná-lo para o javascript para poder mostrar as opções para consulta. 
      O console.log mostra que estou obtendo o  json() { [native code] }.
      Segue os dois arquivos para ver se alguém me ajuda.
      //arquivo cidade.js async function carregar_cidade(valor) { if (valor.length >= 3) { //console.log("Pesquisar:" + valor); const dados = fetch('Testes/?cidade='+valor, { method: "get", headers: { "Content-Type": "application/json", "X-Requested-With": "XMLHttpRequest" } }); const resposta = (await dados).json; console.log(resposta); var html = "<ul class='list-group position-fixed'>"; html += "<li class='list-group-item'>" + resposta['cid_nome'] + "</li>"; html += "</ul>"; } } <?php //arquivo Testes.php namespace App\Controllers; use App\Models\CidadeModel; /** NÃO MANDAR PARA O SERVIDOR - APENAS TESTES DE FUNÇÕES E OUTROS ELEMENTOS DO CI4 */ class Testes extends BaseController{ protected $tbCidades; public function __construct(){ $this->tbCidades = new CidadeModel(); } public function index(){ $request = \Config\Services::request(); $client = \Config\Services::curlrequest(); $cidades=[]; if($get=$request->getGet()){ $cities=$get['cidade']; $cidadeFiltrada=$this->tbCidades->getCidByName($cities); $cidades= json_encode($cidadeFiltrada); //dd($cidades); } echo view('Testes/testes'); } public function salvar(){ $request = \Config\Services::request(); if($post=$request->getPost()){ dd($post); } } } <!doctype html> <html lang="pt-br"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Bootstrap CSS --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> <title>Autocomplete</title> </head> <body> <div class="container"> <h1 class="mt-4 mb-4">Formulário</h1> <form class="row g-3"> <div class="col-12"> <label for="cidade" class="form-label">Cidade</label> <input type="text" name="cidade" class="form-control" id="cidade" placeholder="Pesquisar cidade" onkeyup="carregar_cidade(this.value)"> </div> <span ></span> </form> </div> <!-- Optional JavaScript; choose one of the two! --> <!-- Option 1: Bootstrap Bundle with Popper --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script> <script src="assets/js/cidade.js"></script> </body> </html>
    • Por FabianoSouza
      Olá pessoal.
      Eu já utilizo o FOR JSON PATH para retornar o o resultado de uma consulta com JSON. Isso eu já sei fazer.
       
      O que preciso é criar uma função que receba um SELECT como parâmetro e retorne o resultado desse SELECT já formatado como JSON.
      Estou tentando isso, mas sem sucesso.
       
      A function dbo.fn_retornaJsonPath :
      (@String NVARCHAR(MAX)) RETURNS NVARCHAR(MAX) AS BEGIN BEGIN IF @String <> NULL SET @String = (SELECT @String AS jsonPath FOR JSON PATH) END BEGIN IF @String IS NULL SET @String = '[]' END RETURN @String END Forma de executar:
      SET @sql = 'SELECT ' SET @sql = @sql + ' dbo.fn_retornaJsonPath ((SELECT TT.tema FROM dbo.tabela AS TT WHERE TT.cd = CTT.id)) AS ''temas'' ' SET @sql = @sql + ' FROM dbo.minhaTab AS CTT ' EXEC(@sql) Mas não está rolando....
    • Por PresleyMenezes
      Olá pessoal, gostaria de saber como copiar o conteúdo de um campo json com muitos pais e filhos e colar em outro campo de pais e filhos do mesmo arquivo json?
       
      agradeço a ajuda de vocês.
      em anexo o arquivo json e o codigo que estou tentando fazer

       

       

       
       
       
       

       

       
    • Por Giovanird
      Olá a todos!
      Tenho uma api  Sala de Aula e dentro dela o id de cada aluno. Em outra api, API ALUNO,  tenho os dados de cada aluno:  nome, foto, endereço.
      Estou fazendo o foreach da api Sala de Aula e preciso também retornar os dados de cada aluno.
      Segue o código que não estou conseguindo desenvolver
      $sala = file_get_contents("https://api/sala?id=987"); $sala = json_decode($sala, true); $sala = $sala['data']; foreach ($sala as $resulsala){ $codigoaluno = $resulsala['idaluno']; $alunos = file_get_contents("https://api/alunos?id=$codigoaluno"); $alunos = json_decode($alunos, true); $alunos = $alunos['data']; foreach ($alunos as $resulalunos){ echo $resulalunos['nome']; echo $resulalunos['foto']; echo $resulalunos['rua']; } }  
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.