1

Eu fiz uma requisição de um arquivo json e passei isso para uma função.

$.post('principal/json',minhaCallBack,'json'); //Requisição

function minhaCallBack(returnhtml){   //função

var json = returnhtml;

console.log('json', json);
return json;

};

no meu console, vejo perfeitamente o objeto que eu quero:

    Object {geral: "", home: Array[11], header: "", menu: Array[7], cadastro: Array[10]…}
            10+:Array[3]
            100+:Array[7]
            aovivo:Array[8]
            artistas:Array[11]
            cadastro:Array[10]
            confirmacao:Array[4]
            contato:Array[13]
            dilema:""
            download:""
            esqueceuModal:Array[5]
            formularioCadastro:Array[32]
            geral:""
            header:""
            home:Array[11]
            menu:Array[7]
            mfy:""
            music_check:""
            noticias:Array[12]
            programacao:""
            promoção:Array[12]
            quemSomos:Array[13]
            recomende:""
            redefinir:Array[7]

Agora vamos lá, o meu objetivo é pegar esse objeto(que é meu arquivo json) que está dentro da função e usa-lo da maneira que eu quiser, e onde eu quiser, como posso fazer algo parecido com o exemplo abaixo?

Exemplo:

<p> json.artistas[0]['atributoQualquerdoObjeto']</p>
2
  • Não percebo bem a tua pergunta mas se queres usar esse json depois de o receber, tens de usar dentro da tua função minhaCallBack ou em código chamado a partir dela.
    – Sergio
    Commented 20/06/2016 às 13:54
  • ola, é isso mesmo que gostaria de fazer, usar o json, nesse caso ali já o tenho dentro da minha função, o que não consigo é usa-lo . Em código a partir dela? seria acessando a função? Commented 20/06/2016 às 14:02

2 Respostas 2

1

A sua função callback deve executar a ação necessário com o JSON e não retorná-lo.

Então, se você tiver algum local da página onde queira mostrar um atributo, primeiro identifique a tag de alguma forma e depois faça o preenchimento de acordo.

Exemplo:

$.post('principal/json', preencheDados, 'json');
function preencheDados(json) {
    $('#campo-geral').text(json.geral);
};

HTML:

<p id="campo-geral"><p>
1
  • valeu amigo abriu minha mente, mas tenho uma duvida, e se esse "<p id="campo-geral"><p>" tivesse sido criado dinâmicamente?... Commented 22/06/2016 às 13:16
0

Robson, você também pode utilizar uma template engine para montar o seu HTML, abaixo segue um exemplo com Handlebars

vou utilizar o seguinte JSON no exemplo:

var model = {
    Data: new Date(),
    Pessoas: [
        {"firstName":"Meire","lastName":"Melo","jobTitle":"Direct Marketing Agent","title":"Product Branding Analyst"},
        {"firstName":"Júlio César","lastName":"Reis","jobTitle":"Dynamic Web Designer","title":"Global Usability Designer"},
        {"firstName":"Esther","lastName":"Silva","jobTitle":"Customer Marketing Technician","title":"International Metrics Director"},
        {"firstName":"Kléber","lastName":"Moreira","jobTitle":"Global Paradigm Engineer","title":"Investor Metrics Planner"},
        {"firstName":"Gúbio","lastName":"Macedo","jobTitle":"Dynamic Configuration Assistant","title":"Human Response Orchestrator"},
        {"firstName":"Norberto","lastName":"Albuquerque","jobTitle":"Central Optimization Planner","title":"Customer Optimization Manager"},
        {"firstName":"Dalila","lastName":"Oliveira","jobTitle":"Dynamic Data Producer","title":"Product Accountability Manager"},
        {"firstName":"Yuri","lastName":"Reis","jobTitle":"Dynamic Functionality Specialist","title":"Dynamic Usability Technician"},
        {"firstName":"Vicente","lastName":"Pereira","jobTitle":"Senior Optimization Strategist","title":"Central Accountability Producer"},
        {"firstName":"Elísio","lastName":"Saraiva","jobTitle":"Internal Division Producer","title":"Dynamic Interactions Engineer"},
        {"firstName":"Lorraine","lastName":"Braga","jobTitle":"Corporate Security Strategist","title":"Corporate Creative Coordinator"},
        {"firstName":"Guilherme","lastName":"Albuquerque","jobTitle":"Internal Accountability Agent","title":"Senior Research Developer"},
        {"firstName":"Rafaela","lastName":"Melo","jobTitle":"Corporate Paradigm Orchestrator","title":"National Division Manager"},
        {"firstName":"Heitor","lastName":"Reis","jobTitle":"Dynamic Integration Assistant","title":"Chief Brand Engineer"},
        {"firstName":"Sílvia","lastName":"Martins","jobTitle":"Principal Division Engineer","title":"Global Configuration Analyst"},
        {"firstName":"Alessandro","lastName":"Carvalho","jobTitle":"Direct Security Planner","title":"Direct Tactics Architect"},
        {"firstName":"Roberta","lastName":"Macedo","jobTitle":"Lead Metrics Orchestrator","title":"Dynamic Mobility Analyst"},
        {"firstName":"Silas","lastName":"Moreira","jobTitle":"Direct Communications Manager","title":"Regional Functionality Planner"},
        {"firstName":"Marli","lastName":"Moraes","jobTitle":"Lead Accounts Technician","title":"Senior Assurance Consultant"},
        {"firstName":"Meire","lastName":"Braga","jobTitle":"District Interactions Manager","title":"Forward Web Officer"}
    ]
};

o template será o seguinte:

<div>
    <label>
        Data:
        <input type="text" value="{{formatDate Data}}" />
    </label>
</div>
<div>
    <table>
        <thead>
            <tr>
                <th>Nome</th>
                <th>Sobrenome</th>
                <th>Profissão</th>
                <th>Titulo</th>
            </tr>
        </thead>
        <tbody>
        {{#each Pessoas}}
            <tr>
                <td>{{firstName}}</td>
                <td>{{lastName}}</td>
                <td>{{jobTitle}}</td>
                <td>{{title}}</td>
            </tr>
        {{/each}}
        </tbody>
    </table>
</div>

o markup acima você pode colocar dentro e uma tag <script type="text/x-handlebars-template"></script> ou de uma <template></template>

para montar o template e o html final, você pode fazer assim:

var source   = document.getElementById("id do templete").innerHTML;
var template = Handlebars.compile(source);
var html     = template(model);

Agora o exemplo completo:

Handlebars.registerHelper('formatDate', function(data, options) {
  return data.toISOString().substring(0, 10);
});

function createElement (html) {
  var template = document.createElement("template");
  template.innerHTML = html;
  return document.importNode(template.content, true);
}

var model = {
    Data: new Date(),
    Pessoas: [
        {"firstName":"Meire","lastName":"Melo","jobTitle":"Direct Marketing Agent","title":"Product Branding Analyst"},
        {"firstName":"Júlio César","lastName":"Reis","jobTitle":"Dynamic Web Designer","title":"Global Usability Designer"},
        {"firstName":"Esther","lastName":"Silva","jobTitle":"Customer Marketing Technician","title":"International Metrics Director"},
        {"firstName":"Kléber","lastName":"Moreira","jobTitle":"Global Paradigm Engineer","title":"Investor Metrics Planner"},
        {"firstName":"Gúbio","lastName":"Macedo","jobTitle":"Dynamic Configuration Assistant","title":"Human Response Orchestrator"},
        {"firstName":"Norberto","lastName":"Albuquerque","jobTitle":"Central Optimization Planner","title":"Customer Optimization Manager"},
        {"firstName":"Dalila","lastName":"Oliveira","jobTitle":"Dynamic Data Producer","title":"Product Accountability Manager"},
        {"firstName":"Yuri","lastName":"Reis","jobTitle":"Dynamic Functionality Specialist","title":"Dynamic Usability Technician"},
        {"firstName":"Vicente","lastName":"Pereira","jobTitle":"Senior Optimization Strategist","title":"Central Accountability Producer"},
        {"firstName":"Elísio","lastName":"Saraiva","jobTitle":"Internal Division Producer","title":"Dynamic Interactions Engineer"},
        {"firstName":"Lorraine","lastName":"Braga","jobTitle":"Corporate Security Strategist","title":"Corporate Creative Coordinator"},
        {"firstName":"Guilherme","lastName":"Albuquerque","jobTitle":"Internal Accountability Agent","title":"Senior Research Developer"},
        {"firstName":"Rafaela","lastName":"Melo","jobTitle":"Corporate Paradigm Orchestrator","title":"National Division Manager"},
        {"firstName":"Heitor","lastName":"Reis","jobTitle":"Dynamic Integration Assistant","title":"Chief Brand Engineer"},
        {"firstName":"Sílvia","lastName":"Martins","jobTitle":"Principal Division Engineer","title":"Global Configuration Analyst"},
        {"firstName":"Alessandro","lastName":"Carvalho","jobTitle":"Direct Security Planner","title":"Direct Tactics Architect"},
        {"firstName":"Roberta","lastName":"Macedo","jobTitle":"Lead Metrics Orchestrator","title":"Dynamic Mobility Analyst"},
        {"firstName":"Silas","lastName":"Moreira","jobTitle":"Direct Communications Manager","title":"Regional Functionality Planner"},
        {"firstName":"Marli","lastName":"Moraes","jobTitle":"Lead Accounts Technician","title":"Senior Assurance Consultant"},
        {"firstName":"Meire","lastName":"Braga","jobTitle":"District Interactions Manager","title":"Forward Web Officer"}
    ]
};

var source   = document.getElementById("tmpl").innerHTML;
var template = Handlebars.compile(source);
var html     = template(model); 
var elem     = createElement(html);
document.body.appendChild(elem);
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.js"></script>
<script id="tmpl" type="text/x-handlebars-template">
  <div>
    <label>
      Data:
      <input type="date" value="{{formatDate Data}}" />
    </label>
  </div>
  <div>
    <table>
      <thead>
        <tr>
          <th>Nome</th>
          <th>Sobrenome</th>
          <th>Profissão</th>
          <th>Titulo</th>
        </tr>
      </thead>
      <tbody>
        {{#each Pessoas}}
        <tr>
          <td>{{firstName}}</td>
          <td>{{lastName}}</td>
          <td>{{jobTitle}}</td>
          <td>{{title}}</td>
        </tr>
        {{/each}}
      </tbody>
    </table>
  </div>
</script>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .