Aprenda JSON com objetos e APIs JavaScript em 1 hora | Laurence Svekis | Skillshare

Velocidade de reprodução


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Aprenda JSON com objetos e APIs JavaScript em 1 hora

teacher avatar Laurence Svekis, Best Selling Course Instructor

Assista a este curso e milhares de outros

Tenha acesso ilimitado a todos os cursos
Oferecidos por líderes do setor e profissionais do mercado
Os temas incluem ilustração, design, fotografia e muito mais

Assista a este curso e milhares de outros

Tenha acesso ilimitado a todos os cursos
Oferecidos por líderes do setor e profissionais do mercado
Os temas incluem ilustração, design, fotografia e muito mais

Aulas neste curso

14 aulas (1 h 8 min)
    • 1. JSON1hr

      1:49
    • 2. 1 introdução de API JSON

      2:52
    • 3. 2 recursos para trabalhar com o JSON

      4:13
    • 4. 3 Criando dados JSON

      5:30
    • 5. 4 Armazenando objetos de mulitple no objeto de array

      3:13
    • 6. 5 Converter em cadeia e parse JSON

      4:07
    • 7. 6 Armazenando JSON como cadeia para recuperar e analisar quando necessário

      4:18
    • 8. 8 arrays JavaScript e JSON

      8:07
    • 9. 9 JavaScript loops de objetos dinâmicos

      6:35
    • 10. 11 Use AJAX para obter dados JSON em JavaScript

      5:47
    • 11. 12 loop cada item no JSON

      5:14
    • 12. 14 API de joke recupera resposta JSON

      5:49
    • 13. 16 obtendo dados de API

      7:35
    • 14. 18 Crie sua própria conexão JSON a uma API

      2:45
  • --
  • Nível iniciante
  • Nível intermediário
  • Nível avançado
  • Todos os níveis

Gerado pela comunidade

O nível é determinado pela opinião da maioria dos estudantes que avaliaram este curso. Mostramos a recomendação do professor até que sejam coletadas as respostas de pelo menos 5 estudantes.

610

Estudantes

2

Projetos

Sobre este curso

Aprenda jQuery AJAX em 1
hourGuide para começar a usar o jQuery para fazer conexões contínuas com fontes de dados externas
e
APIsAJAX pode carregar dados de arquivos externos e em JavaScript sem recargas de página. jQuery
torna fácil trabalhar com AJAX fornecendo métodos poderosos para chamadas AJAX. AJAX é uma habilidade essencial
para o desenvolvimento da web moderna.

AJAX (JavaScript assíncrono e XML)

Com o AJAX, aplicativos da web podem enviar dados e recuperar dados de um servidor em segundo plano.
AJAX permite que páginas da Web alterem o conteúdo dinamicamente.

Carregue conteúdo de arquivos externos, carregue dados JSON e use os dados dentro do JavaScript.


O JavaScript é usado para reunir essas tecnologias para criar experiências incríveis do usuário, com
dados JSON e elementos da web. O jQuery é ideal para fazer chamadas AJAX simplificando o código e facilitando a criação.

Este curso foi projetado para começar rapidamente com...

O código de código de fonte de
treinamento passo a passo, incluí-lo para si
yourselfresources e mais
vinculativo que você precisa para trazer AJAX para seus aplicativos da web
de um instrutor com mais de 18 anos de experiência de desenvolvimento da
experienceexplore dados JSON dentro da web
APIsAJAX é uma habilidade essencial para ter, aprender a usar AJAX vai trazer seus aplicativos da Web para o
próximo nível.

Estou aqui para ajudar você a aprender sobre AJAX e pronto para responder a quaisquer perguntas que você possa ter.

Comece com o AJAX agora e veja o que você pode fazer.

Conheça seu professor

Teacher Profile Image

Laurence Svekis

Best Selling Course Instructor

Professor

Web Design and Web Development Course Author - Teaching over 1,000,000 students Globally both in person and online.    Google Developer Expert since 2020 GDE

I'm here to help you learn, achieve your dreams, come join me on this amazing adventure today
Google Developers Expert - GSuite

Providing Web development courses and digital marketing strategy courses since 2002.

Innovative technology expert with a wide range of real world experience. Providing Smart digital solutions online for both small and enterprise level businesses.

"I have a passion for anything digital technology related, enjoy programming and the challenge of developing successful digital experiences. As an experienced developer, I create... Visualizar o perfil completo

Nota do curso

As expectativas foram atingidas?
    Superou!
  • 0%
  • Sim
  • 0%
  • Um pouco
  • 0%
  • Não
  • 0%
Arquivo de avaliações

Em outubro de 2018, atualizamos nosso sistema de avaliações para melhorar a forma como coletamos feedback. Abaixo estão as avaliações escritas antes dessa atualização.

Por que fazer parte da Skillshare?

Faça cursos premiados Skillshare Original

Cada curso possui cursos curtas e projetos práticos

Sua assinatura apoia os professores da Skillshare

Aprenda em qualquer lugar

Faça cursos em qualquer lugar com o aplicativo da Skillshare. Assista no avião, no metrô ou em qualquer lugar que funcione melhor para você, por streaming ou download.

Transcrições

1. JSON1hr: Jason é o formato mais popular para a troca de dados entre aplicativos. Se você está interessado em se conectar a um Web AP I chances são o formato de dados. Explore como o Jason funciona e como acessar dados contidos em um Jace na saída. Este curso mostra como trabalhar com dados Formatados pelo Jason. Coloque o conteúdo em loop através desse conteúdo e obter que Jason Data analisá-lo e muito mais Jason, que é abreviação para JavaScript Object notação é uma sintaxe para dados. Jason é mais fácil do que XML e também legível por humanos. A maioria dos olhos Web AP modernos, dados de saída e formatos Jason. Neste curso, você vai aprender como em que Jason são objetos e como você pode criá-los. Como os objetos JavaScript podem usar um dedo do pé levantado. Mantenha vários itens como as matrizes JavaScript funcionam e armazenam dados. Veja como os dados podem ser extraídos do Jason. Explorou diferentes métodos de trabalhar com Jason Data String. Se eu analisar, armazenar e recuperar dados Jason do armazenamento, usar Ajax para recuperar dados Jason externos para uso dentro JavaScript conectado a vários olhos Web P, e eu colocaria os dados de resposta em suas páginas da Web. Este curso inclui tudo o que você precisa para começar rapidamente o código-fonte e recursos para que você possa começar a criar seus próprios aplicativos Jason. Abrange o trabalho com Java, Parafusado para produzir funcionalidade dinâmica. Isto é de um instrutor com mais de 18 anos de experiência real na Web Felton. Aprender a trabalhar com Jason é uma habilidade chave no desenvolvimento moderno da Web. Jason e Relações Públicas estão por todo o lado. Uma vez que você começar a trabalhar com eles, você ficará surpreso com o que poderia ser feito com algumas linhas. Claro, estou aqui para ajudá-lo a aprender sobre Jason e pronto para responder a quaisquer perguntas que você possa ter se juntado agora e trazer alguns dados do Jason para seus aplicativos da Web hoje. 2. 1 introdução de API JSON: Bem-vindos ao nosso curso rápido sobre Jason e trabalhar com olhos P. Meu nome é Lawrence, que eu vou ser seu instrutor para este curso. E eu estou tão animado para ter esta oportunidade de apresentar esses tópicos incríveis para vocês hoje. Venho até você com mais de 18 anos de experiência em desenvolvimento na Web, e estou animado para ter a oportunidade de compartilhar meu conhecimento com você. Então, neste curso, ela está mostrando como você pode trabalhar com Jason Data. Então, Jason Data está rapidamente se tornando o padrão comum que é usado na transferência de dados diária. E com Jason, você pode fazer muito. Você pode essencialmente trocar dados de armazenamento e transferir dados entre aplicativos. Então, uma das coisas que vamos estar olhando no curso é como podemos criar objetos javascript e então como podemos trabalhar com esses objetos. Então esses objetos, normalmente eles podem conter vários itens dentro de informações. Então esta é uma matriz de objeto de script Java. Então você percebe que temos uma matriz com dois itens aqui, e temos um monte de informações contidas neste objeto e utilizando o acesso a este objeto dentro de um formato Jason. Torna muito fácil trabalhar agora. Uma das coisas que é ótimo sobre Jason é que ele é legível por humanos. Então, mesmo se você estiver olhando para um arquivo do Jason, na verdade faz sentido. Então, mesmo antes de trazermos JavaScript tar, podemos ter algum senso de compreensão do que esperar desse objeto de dados. Então eu estava mostrando a vocês como trabalhar com esses objetos de dados, como analisar através deles e como obter todos os itens que estão disponíveis dentro da taxa. Nós também vamos olhar para como podemos extrair informações de objetos de um arquivo externo. Então este é apenas um arquivo de piada onde podemos clicar e podemos obter um monte de informações dele. Este é outro. Então este é um jace no arquivo que criamos. É um arquivo on-line do Jason como este aqui, e nós somos capazes de retirar essa informação Vienna Ajax chamar e trazê-la para nossa página web e fazer tudo isso com o Ajax. Jason é uma excelente combinação juntos para um monte de funcionalidade. Então eu também vou mostrar a vocês como se conectar a vários olhos AP e como podemos extrairesses dados, puxá-los esses dados, puxá-los de volta para nossa página da Web e realmente utilizá-los dentro de nossa página da Web. Então tudo isso, e muito mais e novamente código-fonte está incluído, e eu encorajo você a experimentá-lo por si mesmo e verificar e ver o que você pode fazer acontecer com Jason e Ajax trabalhando juntos. Então, quando você estiver pronto, vamos começar a escrever e conectar-se a alguns olhos de AP, puxando esses dados para nossos aplicativos da Web e fazendo algumas coisas realmente legais e dinâmicas acontecerem dentro de nossas páginas da Web. 3. 2 recursos para trabalhar com o JSON: nesta lição. Quero dar-lhe uma breve visão geral sobre as ferramentas e recursos que vão estar usando e utilizar ao longo deste curso. Então a primeira coisa que vamos precisar é de um editor. Você pode usar qualquer editor que desejar. Se você estiver procurando usar o mesmo editor que estou usando, estou usando colchetes. Então este é um produto de adobe. Isso é, ah livre, editor de código aberto que você pode baixar Então não há custo para fora e isso é novamente. É um produto de adobe. É um editor muito bom. Ele tem um monte de grande funcionalidade, e eu vou estar utilizando-o dentro do curso. Outro recurso que estou usando é que tenho o servidor de exames em execução. Então isso está disponível no Apache amigos dot org. Isso está disponível no Windows Lin X e OS X. Então eu tenho que rodando aqui em segundo plano, e o que isso faz é isso me dá a capacidade de ir para o host local. Então essencialmente eu fico na opção dentro do meu computador para ser capaz Teoh, abrir Zampa e executar o painel de controle Samp, que me permite iniciar um servidor Apache, e eu também posso fazer alguma configuração aqui é bem, eu também posso executar um banco de dados sequela eso se eu precisasse desses ativos. Se eu precisar ter um servidor rodando no meu computador, Zampa é uma ótima opção, e é muito rápido de instalar. Basta baixá-lo. Você pode simplesmente passar pelos padrões. Então alguns dos outros recursos que eu estou usando o navegador que e, em seguida, abusando é cromado. E a razão pela qual eu gosto de usar cromo é porque ele tem essas ferramentas Deb aqui. Ferramentas surdas Eso vem com todas as versões do cromo e com ferramentas surdas. Você obtém algumas informações de comunicação aqui você pode ver elementos a quebra de informações madrugada e dom, CSS e muito mais diz um monte de informações contidas dentro de ferramentas surdas. E essencialmente, ele me dá uma maneira de me comunicar entre meu aplicativo e meu navegador e ver informações visualmente. Alguns dos outros recursos que também vou usar são o meu Jason Dot com. Então este é um site que nos permite armazenar arquivos do Jason online. Então criamos o arquivo Jason aqui. Então podemos obter um URL seu, e podemos ver isso e acessá-lo para ter acesso ao Jason File vivo. Há também Jason Lint. Então isso também me dá a capacidade de lint e ter certeza de que eu tenho formatação válida do Jason , e isso vai ser útil à medida que avançamos através das lições, lições, e então aqui, eu tenho Tenho um gerador Jason. Então, se você está curioso para saber como Jason se parece, este é um bom exemplo de Jason Data. E como você pode ver os dados em si, a razão pela qual nós gostamos de usar Jason é porque ele é realmente legível por humanos. Então, ao contrário de Teoh um Note XML, que é a principal alternativa para Jason e armazenar e trocar e transferir dados. Esta é uma das principais razões pelas quais usamos Jason. E como você pode ver aqui neste exemplo, podemos ver claramente todas essas informações do Jason. Podemos ver o I D. Podemos ver e-mail da empresa, endereço de telefone, e podemos realmente facilmente escolher os valores. E quando olhamos para Jason, é uma combinação de chaves e valores, então eles são armazenados valores emparelhados, então cada valor aqui tem uma chave, então espere, identifique-a e então um valor associado a ela. Então isso é logo aqui no lado direito, e é tudo separado por vírgula, e pode ser agrupado em pedaços maiores com os colchetes encaracolados. E podemos ter vários objetos Jason múltiplos dentro de cada pai aqui. Então você vê aqui, temos aparente aqui. Temos um contêiner do objeto separado por vírgula. Temos outro aqui e outro e outro, e assim por diante. Então, muita informação está contida aqui dentro. E a coisa realmente legal sobre trabalhar com Jason é que nós realmente temos acesso a todos esses dados. Podemos retirá-lo para o nosso código HTML, e é realmente a maneira ideal para transferir dados entre aplicativos. Então, a próxima lição vamos começar a criar alguns arquivos do Jason. 4. 3 Criando dados JSON: nesta lição. Quero apresentá-los à criação de alguns dados do Jason. Então primeiro que nós realmente queremos olhar para nós queremos olhar para como ele é liberado para JavaScript porque dentro deste curso, nós vamos estar olhando para Jason e sua relação com JavaScript, trazê-lo e JavaScript e trabalhar com Jason dados dentro do JavaScript. Então Jason é baixinho. Então J s O N é abreviação para notação de objeto JavaScript. E a razão é que ele realmente toma suas propriedades. E é estrutura essencial do que fazemos com objetos javascript. Então criamos um objeto javascript que algum cara cria em um objeto javascript rápido. Vemos que temos esses valores emparelhados. Então, se temos algo como um primeiro nome e com dentro javascript, nós realmente temos que ter aspas em torno da chave e, em seguida, também o valor. Então temos um valor para o primeiro nome. E agora o conteúdo do meu objeto vai conter essa informação contida aqui dentro. Então, se eu fizer um log de console e é assim que você pode enviar informações javascript em seu console fazendo um registro de cônsul se eu for para a página da Web. Refresque-o. Posso ver isso dentro do meu console. Eu tenho meu objeto aqui, e eu tenho o primeiro nome Florence. Então, eu também posso produzir essas informações de objeto agora dentro do meu console, bem como, ou eu não posso colocá-lo dentro do meu HTML. Então eu vou apenas configurar rapidamente um recipiente aqui dentro HTML, a fim de colocar algum conteúdo nele, e nós vamos apenas documentos E você obtém elemento por i d, a fim de acessar este elemento de nossa página HTML e nós só precisamos fazê-lo por i d Então nós identificá-lo e podemos fazer html interno. E agora vamos igualar que Inter html Teoh, meu objeto e primeiro nome. E isto é tudo o que temos de fazer. Teoh recupera de volta essa informação contida dentro desse objeto javascript. Então, quando eu atualizá-lo, eu vejo que eu tenho o primeiro nome lá, e isso é porque eu tenho acesso a todos esses dados de objeto. Então, e a coisa realmente legal sobre Jason é tipicamente, você não usaria isso apenas para manter um pedaço de dados. Você pode ter vários pedaços de dados e tudo que você tem que fazer é vírgula separada para que possamos ter sobrenome em inchar e manter o mesmo formato para que possamos fazer um sobrenome. E também podemos envelhecer, se quisermos, para podermos fazer um número. Há muitas opções aqui sobre como conter informações dentro do formato Jason para que possamos ter strings. Podemos ter números que podemos igualar objetos, matrizes, e podemos ter literal, como valores booleanos verdadeiros ou falsos. Não, e assim por diante diz um monte de opções dos diferentes tipos de dados que podemos manter em nosso objeto JavaScript. E quando o atualizo, vemos que temos um belo objeto. Todo o conteúdo está aqui, e eu posso acessar qualquer um desses qualquer um desses objetos aqui que estão contidos dentro deste objeto JavaScript apenas referenciando a chave para seguir em vez de First team, eu quero fazer sobrenome ou deixar é dizer que eu quero fazer o primeiro e último nome para que eu poderia apenas inventar Nate isso juntos. E eu posso apenas chamar para o objeto em particular que eu estou olhando para referenciar e retirar de volta. Então, agora, quando eu atualizá-lo, vemos que estamos acessando que as informações do objeto foram capazes de interagir com isso e produzi-lo em nossa página da Web. Quando olhamos para os nossos dados, faz sentido. É de uma forma legível. Então o que vamos fazer na próxima lição é que vamos realmente convertê-lo em um Jace no arquivo. Então o que temos aqui na nossa frente se eu fosse copiar e colar isso em nosso validador só para mostrar o que acontece e, em seguida, na próxima lição, vamos dar um passo adiante e vamos ter certeza de que temos alguns Jason válido. Então, quando vemos sempre que estamos configurando isso dentro deste tipo de formato, e eu acredito que eu esqueci que citações em torno de lá, então isso provavelmente é esperar que falhou lá. Então, dentro do objeto javascript, ele realmente pode trabalhar com ambos estavam com as aspas ou sem as aspas. Então eu vou apenas copiar isso em fazer um válido e vemos que nosso conteúdo é realmente, de fato válido Jason formatado dados. Então você provavelmente está olhando para isso e dizendo. Certo, bem, como fazemos referência a isso? Porque normalmente com Jason, você vê que você tem faz apenas diferentes chaves de referência e, em seguida, Jason dentro de Jason e dados dentro de um dado. Então, a próxima lição vamos analisar como podemos, como podemos desenvolver isso ainda mais e ter vários valores armazenados dentro do nosso Jason e como também podemos identificar esses valores. Assim como o que fazemos quando olhamos para aquele gerador Jason aqui que temos certos dados aqui. E então temos dados dentro de dados. Vamos fazer algo semelhante na próxima lição. 5. 4 Armazenando objetos de mulitple no objeto de array: nesta lição. Quero mostrar-lhe como podemos manter até mesmo dados mawr dentro do formato RJ Sohn. Então, antes, tínhamos olhado para o nosso objeto Jason e sabemos que sempre que temos esses colchetes que a informação contida aqui é como acessamos e como configuramos nossos dados do Jason. Por isso, também podemos dar um passo adiante. Então, normalmente, você pode não ter apenas uma pessoa. Você pode ter toda uma série de informações que você deseja armazenar dentro de um objeto Jason. Então você pode ter vários agrupamentos diferentes de nomes, sobrenomes e idades, então você pode ter algo que talvez possamos chamar de pessoas. E o que estou fazendo agora é que estou criando uma chave que vai ficar do lado de fora do resto do Jason. Então, precisamos também sempre envolvê-lo nos colchetes. Então eu estou apenas embrulhando este agora nos colchetes e eu vou mostrar a vocês como podemos criar essencialmente uma matriz de objetos. Agora, isso vai funcionar da mesma forma que um array típico funcionaria onde agora temos nossos colchetes de matriz e temos itens lá, Ray, temos o primeiro item, o segundo item. Então, mesmo que estes são objetos aqui que estávamos olhando anteriormente lá realmente item de matriz , então é em um objeto de raio. E agora, sempre que eu console logout meu objeto apenas vai mostrar o que acontece quando eu atualizá-lo . Eu tenho um array chamado para que eu possa me identificar como pessoas e eu tenho dois itens dentro da matriz. Eu tenho dois objetos e, em seguida, todas as informações do objeto ainda estão lá, e é facilmente acessível dentro do nosso JavaScript. Então agora, se quisermos realmente acessar o primeiro nome, podemos fazer algo onde precisamos nos referir à chave pai aqui. Então, são pessoas. Então estamos nos referindo às pessoas. E se você quiser acessar o 1º 1 nós poderíamos fazê-lo dentro deste tipo de formato, e nós só precisamos especificar agora qual pessoa nós realmente queremos que ele tenha acesso e extrair esses dados. E eu só vou atualizar os nomes aqui para que eles sejam diferentes. Então eu vou salvar esse aqui e agora nós vamos atualizá-lo e nós vemos que nós temos Smith, John foram capazes de ter acesso a todas essas informações contidas neste objeto formatado Jason onde nós temos um re com dois objetos diferentes. E então temos acesso a todas as informações do objeto. E isso basicamente significa que é uma maneira muito bem estruturada de manter vários itens dentro de um objeto e realmente obter acesso a todas essas informações. Então, na próxima lição, vamos olhar para como podemos percorrer essa informação de objeto, eu vou colocá-lo dentro do nosso JavaScript. E então vamos olhar para como podemos tirar isso do nosso JavaScript e usá-lo na verdade como um jace no arquivo e extrair essa informação e utilizá-la dentro de nosso aplicativo. Então tudo isso está chegando no próximo conjunto de lições. 6. 5 Converter em cadeia e parse JSON: A coisa realmente legal de trabalhar com objetos JavaScript é que temos a capacidade atualizar facilmente os dados que estão contidos em seus Então, por exemplo, se quisermos adicionar algo novo, um novo objeto sob as pessoas e eu vou selecionar sob o 1º 1 aqui e eu queria que Teoh dissesse algo como meses conhecidos. Então, por exemplo, talvez esta seja uma lista de quanto tempo conhecemos pessoas e dentro do nosso objeto. E nós não incluímos originalmente em nossos dados do Jason, e agora queremos adicionar isso. Então agora eu posso facilmente fazer algo assim. Então isso pode ser um número também. E agora quando eu voltar para o meu JavaScript e eu listar isso, nós vemos que o primeiro objeto e há o segundo objeto e esse segundo objeto agora tem os meses conhecidos dentro de seus valores-chave lá. E isso é realmente fundamental para entender que temos a capacidade de realmente ser flexível com o conteúdo uma vez que criamos esse objeto, temos muita flexibilidade Agora, interagir com esse objeto é muito que podemos fazer com aqueles e também JavaScript fornece um monte de realmente construído, cozido em funcionalidade que você pode utilizar a fim de acessar seu JavaScript. Então, por exemplo, se quiséssemos trabalhar com uma string de modo que vamos apenas fazer uma versão string dela Então string e pessoas, eu poderia realmente facilmente fazer uma conversão de Jason Teoh String String se eu essa é a função . Essencialmente, isso converte Aggies no valor em um valor de string. Então vamos dar uma olhada em como essa saída vai se parecer. E há uma razão para fazer isso. A razão pela qual você faria isso é que talvez se você quiser armazená-lo, se você quiser armazená-lo localmente em seu armazenamento em e você não quer ter um monte inteiro dessas informações de objetos você pode string se eu como uma string e eu não soletrar string se eu bem lá então eu acho que Tito certifique-se de que eu soletrar string se eu bem lá, mas podemos string se eu ele e ver como ele vai olhar dentro do console. Então, quando nós string, se eu sair essa informação, nós obtemos um valor de string de tudo isso Jesus na informação e agora podemos passar isso como um valor de string. Então isso significa basicamente que isso é apenas uma corda em seu equipamento em direção a uma peça de informação. E agora, se queremos passá-lo ou armazená-lo, esta é a melhor maneira de armazenar este tipo de informação por string, desafiando-o e então temos acesso a ela. E o local oposto é se realmente quisermos colocá-lo e convertê-lo de volta em Jason. Então, mostre a você como fazer isso também. Então vamos fazer outra variável aqui e vamos chamá-la de meus amigos. E desta vez vamos fazer o oposto da corda. Se eu assim temos um valor de string que é formatado como Jason e queremos colocá-lo de volta para o objeto. Então temos que fazer é colocar isso aqui dentro dentro desta análise. E agora, sempre que fizermos isso, meus amigos, vocês verão que a saída está de volta a um formato de objeto e podemos voltar interagir com ele como fizemos originalmente quando era um objeto JavaScript. Então você vê quanta flexibilidade isso realmente é para tudo isso e podemos trazer um valor de string e convertê-lo de volta em um objeto. Na próxima lição, vamos dar uma olhada em mais de, ah use para realmente converter em uma string. E eu vou mostrar a vocês como armazená-lo dentro do armazenamento local e, em seguida, novamente acessá-lo e pegar essa informação porque há definitivamente um benefício em ser capaz de armazená-lo como uma string. E eu vou te mostrar isso na próxima lição. 7. 6 Armazenando JSON como cadeia para recuperar e analisar quando necessário: Então, a lição anterior que olhamos, como podemos encadear se eu e como podemos analisar. Então esta lição eu quero mostrar a vocês como podemos usar string se eu e analisar quando armazenamos valores . Então, idealmente, sempre que estivermos usando nosso armazenamento de sessões. Então, a fim de configurar que o armazenamento de sessão e nós definimos um item para sete itens dentro do armazenamento de sessão de sessão e nós vamos chamá-lo de amigo. E se quisermos colocar e armazenar todo esse objeto, vou mostrar o que acontece. E então, se tentarmos recuperar essa informação, então estamos armazenando aqui e aqui, vamos simplesmente tentar recuperá-la. Então vamos dar a ela uma variável e chamá-la de minha lista. Então esta será idealmente a lista de amigos que queremos ver. Então, armazenamento de sessão novamente. E desta vez vamos usar obter a história do item e recuperar o item que está contido no amigo. E então nós vamos colocar isso no console e nós vamos listar a minha lista, e eu vou me livrar de todas essas outras mensagens do cônsul aqui para evitar confusão. Então, basicamente, o que estamos fazendo agora é levar este meu objeto, que é um objeto formatado pelo Jason. Estamos adicionando atualizações para que possamos deixar isso. E então o que estamos fazendo é fazer um armazenamento de sessão. Então vamos armazená-lo dentro do navegador. Eso que informações objeto sob um item chamado Amigo e, em seguida, estamos usando sessão, obter que estamos pegando o item, obter substituição na variável minha lista e estamos colocando minha lista. Então vamos dar uma olhada e ver o que acontece. Então vemos que temos esse objeto e não podemos trabalhar conosco porque não temos nenhum conteúdo dos objetos. Tudo o que diz é “objeto”. Objeto. Então este é um dos problemas. Sempre que estamos armazenando no objeto como um item real aqui, só podemos armazenar esse valor de uma string. E é aqui que se eu entrar. E se fôssemos realmente string se eu esse objeto então isso realmente faria mais sentido. Então vamos atualizá-lo novamente. E agora estamos tratando de volta o que nos parece familiar de antes é essa cadeia de valores e agora, mesmo que eu remova isso, se meu comentário isso, vemos que ainda temos esse valor armazenado lá. E agora podemos usar o oposto, que é Jason Parse. E podemos analisá-lo. Essa informação que estamos captando dentro dessa lista e podemos realmente analisá-la e utilizá-la. Então tudo o que precisamos fazer é Jason Parse, e vamos enrolar na minha lista aqui e voltar aqui e atualizá-la. E, novamente, temos acesso às pessoas e podemos fazer atualizações mais uma vez. E isso é frequentemente utilizado sempre que armazenamos informações. Então estamos armazenando dentro de um carrinho de compras. Se nós temos um número de itens aqui que nós temos um carrinho de compras crescente, então esta é uma ótima maneira de armazenar informações e armazenados no armazenamento de sessão sem ter que definir um monte de itens para pegar todas essas informações. Porque você pode imaginar que poderíamos potencialmente fazer isso, mas seria preciso um monte de itens de conjunto e assim por diante. Considerando que agora se nós string se eu ele, nós transformá-lo em um valor string. Nós só temos que definir esse valor que coincide com a chave de amigo e então nós pegamos amigo do que podemos analisá-lo e então nós temos acesso a ele mais uma vez. E é assim que você poderia usar string se eu e analisarmos Jason analisarmos a fim de trabalhar com um monte de dados quando você só tem uma chave para armazená-la. E isso funcionará bem dentro de bancos de dados e assim por diante. Então, se você tem alguns dados do Jason ou se você tem um monte de dados que você deseja armazenar, você pode convertê-lo em um valor de string e, em seguida, analisá-lo para fora depois. 8. 8 arrays JavaScript e JSON: nesta lição. Eu quero olhar para JavaScript, um raise e como eles relacionam Teoh Javascript objetos e também como podemos relacioná-los todos juntos com Jason. Então vamos criar uma matriz. Vou chamar-lhe “amigos”. Então isso vai ser apenas um ary em branco dentro do javascript. Compreender um aumento também é importante para entender como trabalho objetos JavaScript funcionam e, finalmente , Jason, porque ter uma boa base sólida e trabalhar com objetos JavaScript realmente lhe dará um monte de . Quando tentares suportar, começa a trabalhar mais com o Jason. Então, em primeiro lugar, com javascript, sabemos que podemos definir com os Raios. Podemos definir vários itens de matriz para que possamos começar com zero e podemos fazer algo como definir um valor de um. E depois temos amigos. Então nós temos um valor rave e este é igual a dois e assim por diante. Eso também, quando estamos configurando nosso raise, sabemos que tínhamos realmente ignorado valores e também podemos usar nomes em vez de apenas as chaves numéricas. Então, vamos ah, vamos consola Sair disto. No momento em diante, vemos que estamos registrando cônsul sobre que Amigos entrar no navegador e vemos que temos um formato diferente do que fazemos Veja com os objetos onde temos uma matriz para ver que temos um também. Então nós temos uma divisão aqui com os Raios e nós poderíamos potencialmente adicionar em um objeto em cada um deles também são formatados como um objeto e assim por diante. Então, eu também quero ver como podemos usar Jason para corda se eu isso Então, e daí? O que acontece quando nós string Se eu este valor particular de amigos Então, se nós string se eu uma matriz em primeiro lugar, somos capazes de string? Se eu n ary e se assim for, então o que vai parecer quando nós realmente colocá-lo dentro do console e podemos realmente usá-lo como um objeto? Então Jay viu corda Se eu Então nós estamos usando a cadeia de Fi construído em função e nós vamos cadeia se eu a matriz de amigos e assim também então nós vamos cônsul, logout amigos primeiro e então nós vamos lei cabra. , Na verdade,não vai ser J filho, mas vamos chamá-lo de Jason por enquanto. Então nós vemos que nós temos esta string ified versão de sua taxa. Temos o um e os dois e assim por diante. Então vimos também que se algo se parece com o objeto Jason real, podemos analisá-lo. Então, o que aconteceria se fizéssemos uma análise do Jason nesta nova série de luta? Então vamos ver o que acontece. E acho que preciso de outro suporte. Então vamos voltar e ver o que acontece. Então, quando nós cordamos, se eu estivesse realmente transformando de volta em nossa matriz. E esta é a parte interessante sobre Jason e sua relação com JavaScript, objetos e raios e tudo isso, porque nós temos a capacidade de transformá-lo em e Ray. Mas agora temos a habilidade de transformá-lo de volta no que originalmente waas. Então, o que acontece se sim, o que acontece se tentarmos adicionar a este objeto? Então, tratamos isso como um objeto? E vimos anteriormente que podemos ter algum conteúdo para ele para objetos. Então você acha que isso vai funcionar, que nós somos capazes de adicionar um novo objeto em seu ou você acha que ele está tratando como um objeto? E nós vemos o interessante aqui é que ele tipo de deleites. É semelhante a um objeto onde temos um ataque com dois itens aqui que vamos re com dois. Mas quando nós adicionamos primeiro, nós realmente obtivemos um valor recuperado de primeiro. E sabemos que sempre que estamos criando um aumento no JavaScript, não precisamos fazê-los sequencialmente. Então eu poderia fazer algo assim e ter três itens na matriz. E agora isso vai ficar interessante porque temos alguns lugares reservados. Então, quando nós trazê-lo de volta para fora da versão ified string, então nós string se eu inicialmente nós manter todos esses Knowles e nós manter todo o posicionamento. Então agora nós temos uma taxa com seis itens, mas nós realmente temos sete lá porque nós temos um item nomeado, então nós não temos um na América um, e isso é algo que nós realmente não seríamos capazes de percorrer qualquer um. Então agora vamos dar uma olhada nisso ainda mais porque sabemos que com JavaScript um aumento , também podemos definir o valor do índice. Então, se eu quisesse ter algo assim e eu igualá-lo também, nome do teste, nós obtemos isso e o que acontece aqui se eu fizer primeiro e eu faço nome do teste. Então vamos verificar isso agora. E agora vemos que estamos jogando um ar lá. Isso é porque esquecemos algo depois dos cinco. Esqueci os tribunais de lá. Então vamos voltar atrás e tentar de novo. Então, agora, sempre que entramos no console, vemos que somos capazes de atualizá-lo. Então nós temos o primeiro nós temos o segundo. Mas quando voltarmos para cá, vamos cair o primeiro e os segundos. Não é pegar esses valores. Na verdade, está deixando cair esses valores nomeados. Então até que nós realmente tentemos adicionar um de volta e nós não vê-lo sempre que nós cordas, se eu e essas coisas são importantes para lembrar que esta é a maneira que ele vai se comportar . Então, mesmo que nossa matriz inicial tenha um primeiro tem um segundo sempre que transformá-lo e nós string, se eu e nós trazê-lo de volta, nós perdemos esses valores de nomes. Então isso é apenas algumas informações sobre matrizes javascript. E quando você tenta analisá-lo como Jason e string, se eu ele não funciona exatamente, Aziz, você gostaria que ele s o. Isso é apenas algo que tenha em mente que quando você faz algumas atualizações dentro destes matrizes e assim por diante, que você deseja certificar-se de que você está formatando as coisas corretamente. Então, outra pergunta que você pode ter é que o que acontece se você remover Estes são levantados e apenas desses valores nomeados na pressa. Então, você acha que vai acontecer? Aqui está, então temos uma primeira. Nós temos um segundo, nós temos um comprimento, mas nós não temos itens e que uma vez que nós encadear ified e isso é porque ele está procurando a seqüência numérica de valores desta chave realmente tem que ser no valor América para que ele propagar e ficar dentro uma vez que cadeia de multa. Uma vez que analisá-lo, é para que possamos dar uma olhada mais de perto no que acontece com eles string se eu também, onde quando nós string, se eu que matriz, vemos que ainda temos. Isso é oh, nós temos quando nós amarrar, se eu for aqui, nós realmente não vemos nada lá. Então isso é completamente em branco. E é por isso que não somos capazes de passar nada além de que o valor da matriz ainda está contendo os valores da primeira e segunda chave. Mas quando a convertemos de volta, acabamos com a mesma coisa que a corda. Então, essencialmente, a quebra aqui está acontecendo dentro da string. Se eu que não somos capazes de string se eu uma matriz com valores nomeados dentro dessas chaves . Então, na próxima lição, vou mostrar um pouco mais com JavaScript e como podemos usar o JavaScript, percorrer o JavaScript, um número de itens ou um número de objetos que temos. Então, criamos uma matriz de objetos na próxima lição irá mostrar-lhe como podemos percorrer esses valores que estão chegando 9. 9 JavaScript loops de objetos dinâmicos: Então, esta lição. Vamos em frente e criar um objeto. Então meu objeto e vai dar-lhe alguns valores aqui. Então este objeto essencialmente vai ser amigo. Vamos ter uma lista de amigos e fazer um carvão lá dentro, e isso vai ser uma série de objetos. Então vamos ter vários valores que estão contidos aqui dentro. E então quando você vê os colchetes e vamos indicar então este vai ser o primeiro 1 vai ser o primeiro nome, e eu esqueci uma dessas citações lá. Então só precisamos de uma citação e separados pelo cólon. E vamos dar a essa pessoa o primeiro nome de Mike. E também, vamos dar a eles algumas informações adicionais aqui dentro deste objeto. Então tire o sobrenome do Jones, e vamos separá-lo. E agora podemos adicionar outros também. Então, se eu vou apenas copiar este formato, eso nós convencemos a cópia separá-lo, e eu vou apenas atualizar os nomes. Então talvez mude este para John Smith agora, que isso possa embelezá-lo. Então é um pouco mais legível também. Então aqui temos o nosso Jason ou JavaScript objeto, e está pronto para ir para ser formatado. Então, agora, se nós console logout e eu vou mostrar a vocês como podemos fazer loop através dele dentro do JavaScript para que nós não precisamos de nenhum g quit toe loop through. É assim que este é o nosso objecto. Então Deus, Ari, os dois itens aqui dentro do nosso objeto. Torri Então agora estamos prontos para passar por ela. Então, com , uh, com JavaScript para que não precisamos trazer a Biblioteca de Consulta J para que possamos fazer algo assim onde precisamos especificar para que possamos fazer meu objeto So x em meus amigos objeto. E então aqui é onde nós realmente vamos loop através de cada um desses itens lá para possamos console log, e nós podemos registrar sobre o valor de X, e nós podemos igualá-lo a e, em seguida, adicionar algo mais aqui também. Então nós podemos simplificar isso provavelmente uma maneira melhor em vez de continuamente listar que meus amigos objeto. Por isso, às vezes é uma boa idéia para simplificar para que possamos criar um recipiente para essa variável tão que irá conter as informações do usuário. E eu esqueci que em assim em usuários. E aqui vamos especificar. Primeiro de tudo, talvez, vamos apenas especificar para usuários de log do console. E então o que você acha que vai ficar logado aqui quando nós consolarmos usuários de log? Porque reparem que temos o meu objecto. Nós temos usuários aqui, e eu vou apenas para minúsculas esta causa que provavelmente é melhor formato. Há Oh, temos dois itens aqui dentro desse objeto. Torri, estamos olhando para a raiz disso como amigos. Então, meu amigo objeto vai nos trazer para esta rota, e nós temos dois itens lá. Então, para os usuários, o que você acha que vai ser contido quando nós Cônsul registramos usuários? E então também enquanto olhamos através dos usuários Podemos fazer algo assim? Então X e podemos especificar o primeiro nome para obter os usuários primeiro. Nome s O. Você acha que isso vai funcionar, ou você acha que precisamos atualizar algumas das formatações s O? O que acha que vai acontecer aqui? Vamos lançar alguns erros ou tudo vai sair corretamente. Eso vemos que temos aquela matriz de amigos originais. Mas uma vez que olhamos para o eso, olhamos para a raiz aqui. Temos os amigos. Então você tem os dois objetos estão essencialmente movendo nossa agulha sobre a raiz da taxa onde temos os dois objetos aqui. Então objeto um objeto para Nós temos um comprimento do número de objetos ou o número de itens dentro desta matriz. E cada array é item é um objeto em si mesmo, e então nós só precisamos chamar para eles. E então, medida que passávamos dentro desse JavaScript de quatro Lupin, estamos listando o primeiro nome de cada um deles, e poderíamos facilmente listar o sobrenome também. Então, apenas para adicionar isso e apenas para tornar as coisas diferentes, então com nossos objetos aqui nós temos algumas opções também. Então, quando fazemos algo dinamicamente, também podemos atualizá-los dentro deste tipo de formato. Então, se tivéssemos o último e quiséssemos ter um valor dinâmico aqui atualizando, poderíamos fazer isso também. Então eu poderia fazer algo como variável. Por que é igual a um, ou talvez apenas para trapacear um pouco? Variável. , Então,em vez de último, eu poderia fazer isso, mais por quê? E eu poderia ter algo dinâmico acontecendo aqui. Então, o que acha que vai acontecer agora? Então agora eu confundi um pouco aqui. Criei uma maneira diferente de extrair essa informação do objeto. E você acha que isso ainda vai funcionar? Porque olhando para o código-fonte, você pode ver isso. Por que é igual pé S t. E se fizermos l A mais Esti, vamos ficar por último. E este estar contido dentro destes colchetes deve ler o dedo do pé por último e deve relacionar-se de volta ao sobrenome dos amigos. Então vamos ver se isso funciona. Então você acha que isso vai funcionar? E se você disse correto, vai funcionar sua taxa. Nós temos a capacidade de trazer conteúdo dinamicamente para nossos nomes de objetos. E este é realmente um grande passo em frente, porque isso nos dá a habilidade. Se tivéssemos um monte de nomes diferentes aqui, poderíamos passar por eles onde poderíamos realmente fazer essa dinâmica. Eso Há um monte de opções aqui como trabalhamos através das diferentes variações de como podemos extrair essas informações de objeto e, em seguida, a mesma coisa como se estivéssemos trabalhando com o arquivo Jason . Podemos extrair essa informação dentro desses tipos de formatos. 10. 11 Use AJAX para obter dados JSON em JavaScript: nesta lição. Quero trazer Jake Worry e G Creek. Isso nos dará a capacidade de realmente pegar e fazer chamadas Ajax. E é realmente fácil fazer chamadas Ajax com uma consulta. Então, primeiro de tudo, vamos abrir nosso navegador, ir para as bibliotecas hospedadas. Desenvolvedor de Eso para começar o Google Dot com tem alguns fins decadentes e eu vou trazer preocupação nerd para o nosso projeto. Então basta copiar colar a biblioteca G Corey. Certifique-se de tê-lo acima da tag de script. E agora você está pronto para fazer algumas ligações do Ajax. E também, eu vou adicionar em outra div aqui, dado o meu d de botão para que nós realmente temos um botão que pode desencadear algo dedo acontecer dentro da nossa página web. E eu provavelmente deveria estilizar este botão também. Então eu vou adicionar em algum estilo rápido aqui em fazer borda preta e botão para talvez alguns potting ao redor. É oh, agora ele vai se destacar um pouco mais e eu vou chamá-lo de Clique em mim para que sempre funciona para que as pessoas venham e clique em seus botões. Certo s. Então agora, quando eu atualizá-lo Então eu tenho o meu clique me botão e eu estou tudo pronto para ir para inicializar e realmente fazer algo com o meu código. Então, agora que eu trouxe Jake se preocupar com Jake preocupação, nós geralmente gostamos de manter o enrolado em torno dele, então certifique-se de que o objeto do documento foi carregado, é por isso. Fazer documento Pronto? Isso deve estar pronto. Então documento pronto. E, em seguida, executamos a funcionalidade sempre que o documento está ativo e em execução. E então este é o lugar onde temos o nosso conteúdo de consulta RJ para que eu possa quase remover este Meu objeto aqui s oh, Eu queria ligar um ouvinte de eventos para o botão. Então btm E agora sempre que clicarmos em b t n vamos executar uma função. Então, seja o , sempre que clicarmos no botão, vamos executar uma função e eu vou apenas fazer logout console uma mensagem que diz clicado apenas para mostrar que tudo está funcionando e estamos prontos para seguir em frente para fazer nossa chamada Ajax e recuperar alguns dados Jason. Então agora sempre que eu vou até aqui e eu pressionei clicou em mim, nós vemos que nós temos esse Click me disparando. Tudo parece quebrado. Está pronto e funcionando. Então vamos tomar um café sobre nossos dados e copiá-lo para o arquivo adjacente. Copie tudo isso aqui, e criarei um arquivo online do Jason. Então, guardando isso e agora temos nosso arquivo online do Jason. Estamos prontos para ir com isso. Então agora eu posso tentar acessá-lo via get request. Então esta é a garota que estou tentando acessar. Então eu só vou notar comentar isso aqui e vamos construir o resto da nossa chamada Ajax . E com o G Curry, temos a habilidade de fazer uma ligação para pegar Jason Dina. Então, se você tem um A p i e on-line um p I que você deseja acessar, você tem É um E p I. aberto Então você pode acessá-lo neste tipo de formato para que você pode simplesmente fazer obter Jason e primeiro precisa especificar a URL, e então nós executar nossa função e podemos chamar algo como dados. E então o que vai resultar aqui é que nós vamos realmente obter essas informações de dados de volta em vez de clicado. Vai dizer dados. Posso remover toda essa informação agora e agora. Vamos experimentar o traje e ver o que acontece sempre que clicamos no botão. Então agora eu o atualizo. Eu cliquei nele e estava recuperando essa informação do nosso arquivo on-line. Então, qualquer informação que temos contido e aqui estavam recuperando através do Jason Call. E é assim que podemos fazer qualquer chamada do Jack. Essencialmente, Jason Data é ideal para transferir dados dentro deste tipo de formato devido ao fato de que é realmente fácil de analisar isso de volta e torná-lo utilizável novamente. Eso Este foi outro exemplo de usar Jason via J Query e quando podemos puxar aqueles endpoints on-line on-line e pegar alguns dados e, em seguida, poderíamos utilizar esses dados e informações dentro de nossos aplicativos JavaScript para que pudéssemos tão facilmente como antes que pudéssemos fazer. Poderíamos fazer as pessoas. Podemos fazer zero e obter os primeiros nomes. Eu só te mostro isso muito rápido. Então nós temos dados e dentro dos dados. Então nós estamos olhando para as pessoas, e então nós queremos obter o primeiro e primeiro nome, então isso vai ser as pessoas zero e primeiro nome. Então agora estamos recuperando isso daquele arquivo on-line onde você o tem como um objeto chamado dados. Então, quando foi, fomos recebidos a resposta de volta deste URL nós obtê-lo dentro de um recipiente de dados, e isso realmente vai ser uma matriz de objetos para que possamos fazer loop através dele. Temos pessoas, temos o primeiro item, e depois vamos pegar o primeiro nome. Então, agora, sempre que clicamos no botão, temos o primeiro nome lá. Então isso vem daqui. Na próxima lição, vou mostrar a vocês como podemos fazer um loop através da informação recuperada e podemos loop e enfraquecer a saída. Toda essa informação de uma serra J no arquivo. Então isso está chegando na próxima lição. 11. 12 loop cada item no JSON: A última lição que vimos como ele pode recuperar algumas informações de um arquivo do Jason que está online. E agora vamos utilizá-lo dentro do nosso JavaScript. Então o que queremos fazer é que queremos realmente fazer loop através deste objeto de dados e extrair todos os resultados. Vamos fazer algum uso desses dados e para fazer isso. Então eu já conectei uma biblioteca de consulta G, e J coury vem com uma função chamada cada, que nos permite realmente loop através de cada item aqui que está disponível dentro deste objeto retornado, e então podemos fazer uso dentro do nosso casaco. Então nós precisamos também especificar que o objeto que queremos um loop através Então isso vai ser dados, e na verdade nós vamos loop através de dados e nós temos um contêiner para isso. Então pessoas de dados é o que queremos até o dedo do pé através, e vamos construir uma função aqui. Então a função, essencialmente, nós podemos puxar para trás esse valor de índice e nós podemos puxar para trás o valor da chave, bem como nós olhamos através aqui. Então deixe-me mostrar agora o que realmente vai estar acontecendo enquanto nós estamos looping através, pegar e olhar através do valor chave lá. O que estamos fazendo aqui apenas para esclarecer isso, que onde estamos enviando sobre solicitação Ajax foi um pedido assíncrono que vai, é feito a consulta nervosa. Então ele só envia um pedido para essa garota, e pega a informação de resposta sobre você, Earl, Earl, e recupera de volta, como nos dados do contêiner. Então esta é apenas uma função regular com um argumento. Esse argumento são dados, e é aí que obtemos esses dados. Mas nós queremos realmente fazer loop através de todas as pessoas para que nós não queremos retirar apenas dados porque nós temos apenas um valor inicial dentro dos dados, então isso seria apenas pessoas eso Nós queremos ir mais fundo do que isso e nós queremos puxar para trás Todas as pessoas. É por isso que são pessoas de dados. E então aqui, temos alguns parâmetros aqui que estão sendo enviados de volta dentro deste loop e vemos que temos um índice e temos uma chave. Sochi é essencialmente o conteúdo de cada objeto. Então, essencialmente, o que vamos ter de volta dentro do console vai ser dois objetos e ambos os objetos vão conter todas essas informações de cada pessoa. Então vamos chegar aos objetos de volta e conteúdo de cada pessoa. Então vamos verificar o terno, atualizá-lo, dar um clique aqui e ali. Temos a primeira pessoa como objeto e a segunda pessoa como objeto. Então, basicamente, o que isso significa é que se eu realmente quiser ver o primeiro nome da chave e voltar e atualizá-la então o que você acha que é ou o que ela é. Então agora o que está aparecendo aqui na verdade vai perguntar o que você acha que vai aparecer. Mas eu já cliquei nele. Então nós estamos listando o primeiro nome e o sobrenome, e isso é novamente tudo vindo do a p i meu Jason ponto com. Então nós temos o primeiro nome e eu poderia facilmente adicionar esse sobrenome na saída do cônsul lá para que eu pudesse fazer algo como o sobrenome dele, porque agora ele tem todas as informações do objeto que queremos pegar e usar. Então eu também poderia fazer uma chave. E acredito que a última foi a idade. Então vamos tentar isso e ver como isso se parece dentro do console. Então, atualizando isso e voltando clicando no botão e nós obtemos todas as informações e nós poderíamos realmente formatá-lo. quisermos, podemos até mesmo produzi-lo dentro da nossa saída aqui para que pudéssemos fazer algo como sinal de dólar e pegar que objetos tão saída ou que eu i d saída e podemos upend. E enquanto olhamos através dele, podemos mudar dentro de todos esses valores lá em, então toda vez que clicarmos nele, vamos continuar subindo. E eu deveria realmente e incluir uma quebra de linha lá para que possamos diferenciar entre cada vez que estamos fazendo o pedido. Vamos tentar de novo. Agora, quando clicamos em mim, estamos pegando toda essa informação e isso é a mesma coisa, mesmo que tivéssemos um monte de gente aqui. Então, se nós voltarmos e fizermos um monte de pessoas, então eu vou apenas copiar e colar. Sei que todos vão ser a cena aqui, mas isto é apenas dar-nos um monte de gente aqui. Então, agora, se eu pegar esse arquivo e em vez daquele, eu o substituo por este e voltar e atualizá-lo e fazer o clique em mim. Então agora nós temos todos aqueles usuários que ar lá. Então eu sei que eles são todos iguais. Mas eles poderiam muito bem ser diferentes. E podemos pegar toda a informação contida nessa garota. E agora podemos trabalhar com ele e utilizá-lo dentro do nosso código JavaScript. 12. 14 API de joke recupera resposta JSON: a lição anterior. Mostramos como você pode recuperar alguns dados de uma Web. AP I. Agora há um monte de olhos Web BP lá fora, e há uma realmente boa lista de Get hub dot com Todd Moto Public AP olhos. Então eles têm uma lista completa de um monte de olhos AP. Alguns deles você precisa se inscrever para um pouco da carne no alto e assim por diante. Alguns de vocês não precisam de um “O”. Então eu vou pegar alguns deles aqui e dar uma olhada em um, e eu vou te mostrar como configurar isso. Digamos que, por exemplo, por exemplo, queiramos fazer piadas de base de dados do Chuck Norris. Então este parece interessante. Então vamos falar sobre isso e aqui temos algumas informações. Então as piadas estão disponíveis aqui para que possamos ver que sempre que vamos ao site, então não há nada lá, então não há nenhum ponto final. Então precisamos especificar algo dentro da chamada de volta. Então nós temos algo aqui chamado piadas aleatórias, e nós temos alguns parâmetros aqui. Então mudando o nome do personagem principal que podemos atualizar. Então, vamos levar este aqui e vamos criar uma piada com isso. Ou acessar isso e ver, na verdade, quais dados estavam retirando? Então temos o nosso primeiro nome, John. O sobrenome faz. Na verdade, estamos enviando alguns parâmetros. Nós vamos recuperar algumas informações, e você pode dar uma olhada em qualquer um desses olhos AP dentro da U. R L. E podemos ver aqui que, enquanto carregamos, estes são dados formatados pelo Jason. E isso significa que podemos fazer uso dele dentro do nosso JavaScript muito facilmente. Então, toda vez que eu atualizar e parece que há uma nova piada que está chegando, não camisas mesmo utilizando esses valores, talvez talvez isso é apenas eso manter lá dentro e vamos ligar para isso inteiramente. Então guarde isso ali. E agora, sempre que vamos ao nosso anfitrião local, vemos que conseguimos recuperar essa informação. Então eu tenho um valor de objeto. Tenho categorias. Eu tenho um I D, e eu tenho meu trabalho contido dentro deles Então vamos pegar o valor da piada e talvez enviá-lo em nossa página toda vez que o usuário clica no botão. Então dê uma olhada na forma como o objeto é estruturado. Vemos que temos o objeto. Eso, essa é a rota. Temos um valor aqui e, em seguida, dentro do valor há piada. Então, como você acha que podemos puxar isso para o nosso JavaScript? Então você acha que é piada de valor de dados de piada? Você acha que isso vai funcionar? Vamos lá para fora e tentar isso. E agora vemos que somos capazes de puxar para trás essa piada toda vez que clicamos em mim tão perfeito. E agora tudo o que precisamos fazer é colocá-lo em nossa área de saída. E Jake Preocupações torna isso super fácil. Então saída e vamos fazer isso onde poderíamos upend também. É o que estamos fazendo. Antes de estarmos pendentes dessa informação de piada. Então agora toda vez que clicamos no botão, recebemos uma nova piada, e na verdade devemos adicionar uma quebra de linha ou talvez Adamson. Então dê uma aula e dê uma aula de piada. Feche isso fora Can Capitão oito. Isso juntos para que tenhamos a nossa saída de piada lá. Nós também temos que pegar essa citação lá. Então def feche esse fora. E agora vamos ter um pouco de estilo rapidamente para a piada. Então, o que queremos fazer com piadas? Queremos exibir Bloco e vamos dar-lhe alguma separação e dar-lhe uma margem e dar-lhe uma margem no topo. Então talvez algo simples assim. Então, agora, quando atualizamos e clicamos, recebemos nossas piadas, vemos que temos toda uma produção de piadas. Muitas vezes estamos clicando em cada vez que estamos fazendo uma viagem completa para o A P I pegando o conteúdo que está disponível no A P I. E estamos simplesmente analisando isso e não analisando através dele, mas apenas passando por ele e pegando essa informação do objeto. E agora nós temos toda a lista de piadas através de um P eu ouço que está disponível a partir de um p i dot eu vejo e db dot com, e nós podemos utilizar completamente isso. Nós também temos habilidade, apenas fazer piadas aleatórias. Então aqui tem alguns parâmetros diferentes que podemos passar. Há um monte de coisas muito legais aqui que você pode fazer. E realmente, nós também podemos buscar uma série de piadas. Aparentemente. Vamos tentar isso também, onde podemos listar as categorias de piadas. Eso Vamos tentar e ver o número de piadas aqui. Então isso está nos dizendo quantas piadas estão disponíveis. Então é isso que é quantas piadas estão disponíveis no A P I S O. Na verdade, não estava nos dando mais de uma piada. O Eso. Às vezes você tem que brincar com ele e ver o que está sendo respondido aqui atrás e ver se estamos realmente recebendo alguma mudança nisso um p I. Mas este funcionou muito bem e havia uma lista completa de todos esses diferentes olhos AP e todas essas coisas diferentes que você pode puxar automaticamente para o seu site realmente facilmente em apenas usando alguns simples Jason e JavaScript 13. 16 obtendo dados de API: Então, nesta lição, eu quero mostrar a vocês como podemos acessar outro ap I Então eu encontrei outro aqui que também retira os dados formatados pelo Jason e podemos ver um monte de informações aqui. Então, se você quiser pesquisar, mostrar, enfraquecer, pesquisar tags de usuário Então há muitas opções diferentes aqui pelas quais podemos pesquisar. Então, se clicarmos especificamente em um show aqui, então obtemos toda essa informação voltando, e agora podemos utilizá-la simplesmente conectando-a através do nosso arquivo Jason. Então vamos atualizar isso novamente. Normalmente, eu gosto de começar fazendo um registro do cônsul dos dados apenas para ver o que estamos puxando e o que temos acesso e apenas para ter certeza de que tudo está funcionando. E então, uma vez que eu recebo o registro do console desses dados, sempre que eu clicar em mim. Então agora temos todas essas informações e novamente, este é o objeto de rota. Então, se eu quiser pegar essa descrição, eu posso pegar a descrição aqui. Então agora eu sei que eu tenho uma taxa de descrição aqui na rota, e eu vou mantê-lo como piadas e não há necessidade de atualizar isso. Então, agora, quando eu atualizá-lo, vemos que eu posso pegar todas essas descrições lá. Eu tenho a minha contagem favorita criada de cada vez e um monte inteiro aqui. Então eu tenho minhas etiquetas U.R L e assim por diante. Então também podemos ser mais específicos aqui com os diferentes olhos AP. Então talvez, hum não tenho certeza se temos a hora da festa lá. Então temos outras opções que podemos pegar. Podemos, uh, o que é popular também e este em particular. Então nós temos um monte de objetos aqui dentro deles Então talvez este é um pouco mais interessante onde nós temos nossos dados e nós podemos olhar através dos dados. Então, vamos fazer este em vez disso. Então vimos como podemos colocar isso realmente fácil e direto lá. Então, novamente, começando tirando esses dados e utilizando-os em um p I. Então, agora, quando eu clico nele, vejo que eu tenho esse objeto, mas eu tenho uma matriz de dados de 20. Então isso é o que nós olhamos antes porque nós temos a habilidade realmente toe loop através e obter cada valor. Então, isto é o que tínhamos feito anteriormente nas lições anteriores. Vamos tentar isso e adicionaremos R. J Coury de novo. Então isso é para cada um e estavam procurando os resultados dos dados. E nós temos nossa função aqui para que possamos fazer nosso valor de índice. Podemos fazer o nosso valor chave também. E agora só precisamos especificar o que vamos fazer dentro dessa função. Eso Vamos primeiro tentar consola, registrá-lo essa informação. Então, ao percorrermos todos os valores aqui, vamos listá-lo, as chaves, voltar para o quintal aqui e atualizá-lo. E agora vemos que temos todos esses objetos aqui. Então temos essencialmente maneira. Na verdade, precisamos passar pelos dados para que eu acredite que foram dados. Era chamado de dados como Wells, temos os nossos chamados dados de dados e agora vemos que temos todos esses objetos lá. Então números de raio e assim por diante. E agora podemos extrair qualquer informação que quisermos. Então temos uma lesma e talvez queiramos fazer o nome ou até temos fotos aqui. Então, as imagens são interessantes. Eso Vamos Ah, Líbia. Vamos colocar algumas fotos aqui também e dentro do nosso feed de saída. Então faça algumas fotos e faremos algumas informações e assim por diante. Então vamos voltar para aqui. E é por isso que eu gosto de usar o console porque isso me dá algumas informações muito boas aqui que eu posso obter o nome aqui. Então, isso torna muito mais fácil passar por essa, uh, essa informação. Então, em vez de dados, Nowitzki, porque novamente estamos fazendo loop. Estamos recebendo todos os valores chave, então vamos manter isso em piada. Então, agora vamos atualizá-lo e obtemos todos esses e vamos pegar e colocar a imagem lá eso sob as imagens que temos. Talvez peguemos este aqui. Então imagens, então sob o nome da chave aqui ou para uma fonte de imagem e igual a essa fonte, e eu tenho que corrigir isso em um segundo. Então nós temos algumas citações acontecendo aqui, então eu tenho o único para sair da minha string e o duplo que eu estou embrulhando minha fonte de imagem e eu acredito que esta foi a fonte. Eu acredito que foram fotos, mas eu poderia querer verificar isso duas vezes. E eu preciso fechar minhas imagens. Vamos, uh, sim , foram fotos. Então vamos esperar que tenhamos um token inválido lá. Então havia algo que deu errado lá. Eu adicionei na casa decimal em vez de eso. Então este aqui, nós temos um problema aqui porque estamos tentando pegá-lo como valor aqui, mas ele está começando com um valor numérico e os dados do objeto Então é realmente uma coisa boa que nós olhamos para isso porque este é um não, não podemos iniciá-lo com um valor numérico. E é por isso que o JavaScript é realmente flexível porque também nos dá a capacidade Teoh pegar essa chave de objeto aqui dentro dos colchetes e as aspas. Então este é um bom caso de uso, e normalmente isso vai ser a mesma coisa. Poderíamos até fazer isso por esses, se quiséssemos. Nós poderíamos fazer isso colchetes e fazer nome, e nós vamos pegar isso dentro do mesmo formato também. Então, esses são intercambiáveis dentro do JavaScript. Então agora vamos mostrar como isso funciona. Então, quando eu atualizá-lo, então agora nós obtemos todas essas informações de nome para fora, todas essas fotos e tudo aparecendo e aparecendo como esperávamos . Então eu estou realmente indo para fazer as imagens menores aqui porque eles parecem ser Farley bastante grande, alguns boi com e o inimigo voltar rápido de 100 fotos apenas para que pareça um pouco melhor quando eu puxá-los para fora para que possamos ainda vemos essa informação que vemos. Nós temos todas as imagens e, essencialmente, você pode obter uma informação p I. E quando você corre para cenários como esse, ou se você tem valores dinâmicos que estão mudando, você sempre pode fazer os colchetes em torno deles, e você pode utilizar esses objetos dentro dessa mesma maneira. Então comece a notar aqui, isso é a mesma coisa que ele. Então, zig quibbling dentro desse objeto JavaScript. Esta é apenas uma outra maneira de escrevê-lo, e quando nos deparamos com esses cenários, quando começamos com um número aqui, em seguida, enfraquecer formatá-lo dentro deste tipo de formato, 14. 18 Crie sua própria conexão JSON a uma API: Na lição anterior, vimos como podemos usar Jason e Ajax e G Query para acessar alguns a p I alguns Web AP ice. Então, nesta lição, eu quero mostrar a vocês como você também, pode praticar e trabalhar com os vários olhos AP, então você pode puxá-los em sua máquina local, copiar e colar o código-fonte tentando para si mesmo, confira alguns olhos de AP diferentes e também trabalhe com aqueles que analisamos neste curso, e veja quais informações você pode extrair dentro do seu código HTML. E se você quiser apenas trabalhar online, há um recurso muito bom na caneta de código, que lhe dá a capacidade de baixar o conteúdo e acessá-lo diretamente dentro dessa área de exibição . Então você pode ver que se você quiser carregar em um arquivo de pedreira G para tentar que oito você pode simplesmente copiar e colar o arquivo de script. Você pode adicionar Jake Worry no menu suspenso aqui dentro desse painel. Então eu só fui para essa, uh, esta roda giratória aqui, e ele abre a configuração Js para que possamos adicionar em bibliotecas que queremos utilizar. Eu também posso copiar e colar meu CSS aqui também. E então, é claro, precisamos obter algum HTML lá, então copie e cole esse HTML. Podemos arrumá-lo, e por muito tempo. E agora, sempre que eu clico, vemos que estamos recebendo a mesma informação. E este é um recurso muito bom por causa da capacidade de realmente virar e ver todos esses diferentes olhos AP e se você tem, especialmente se você está consultando-os. Se você tem alguns recursos dinâmicos, você pode fazer algumas atualizações para eles e realmente obter algumas informações realmente boas e puxar isso de volta para sua página da Web. E, claro, você também pode estilizá-lo. Então, se eu quiser centralizar texto, ver que sempre que eu vejo que vemos que ele aparece automaticamente aqui dentro da área de exibição . Então, mesmo que eu fosse fazer uma cor de fundo, e eu sei que isso é CSS, mas nós vemos que o que eu estou digitando e aqui ele aparece no lado direito para que você também pode mudar sua área de visualização de vídeo de exibição para que você possa ir Editor Lee para fora. Você pode ir para cima ou para a direita. Você também pode ocultar, thes e minimizá-los e apenas olhar para o JavaScript e assim por diante. Portanto, é um recurso muito bom, e eu encorajo você a experimentar todos os diferentes código-fonte que fornecemos dentro do curso. Confira por si mesmo e veja o que você pode fazer com Jason e olhos AP.