0

Preciso pegar dados em JSON, exibi-los e fazer buscas, pra isso desenvolvi esse código, porém estou com problema para colocar esses dados em arquivo externo. Como posso colocar esse JSON em um arquivo externo, mantendo a mesma estrutura atual sem usar Jquery?

Código JavaScript:

var content = document.getElementById("content");
var tmplItem = document.getElementById("templatePost");
var search = document.getElementById("search"); 

var database = [
    {
        "id": 1,
        "nome_jogo": "Jogo 1",
        "url_jogo": "jogos/url_do_jogo",
        "img": "nome_do_jogo.jpg",
        "img_alt": "Carregando...",
        "tags": "tags de busca"
    },
    {
        "id": 2,
        "nome_jogo": "Jogo 2",
        "url_jogo": "jogos/url_do_jogo",
        "img": "nome_do_jogo.jpg",
        "img_alt": "Carregando...",
        "tags": "tags de busca"
    }
];

function showItems(search) {
    const filteredData = database.filter(item =>
        item.tags.toLowerCase().includes(search)
        || item.nome_jogo.toLowerCase().includes(search)
    );
    filteredData.forEach(function (dataItem, indice) {
        var item = document.importNode(tmplItem.content, true);
        item.querySelector(".url").setAttribute("href", dataItem.url_jogo);
        item.querySelector(".img").setAttribute("src", dataItem.img);
        item.querySelector(".img").setAttribute("alt", dataItem.img_alt);
        item.querySelector(".title").textContent = dataItem.nome_jogo;
        content.appendChild(item);
    });
}

function clearItems() {
    content.innerHTML = '';
}

search.addEventListener('input', function (e) {
    const valueInput = e.target.value.toLowerCase();
    clearItems();
    showItems(valueInput);
});

showItems('');

Código HTML:

<input type="text" placeholder="Busca" id="search">

<section>
    <div class="container">
        <div class="row" id="content"></div>
    </div>
</section>

<template id="templatePost">
    <div class="col-md-2">
        <article>
            <a href="" class="url">
                <img src="" alt="" class="img"/>
                <div><h4 class="title"></h4></div>
            </a>
        </article>
    </div>
</template>
3
  • 2
    Não é só criar um .js e colocar o JSON nele? E carregar com <script src="json.js"></script>
    – Meu ovo
    28/12/2018 às 18:13
  • 1
    Você quer em um arquivo .json e não um arquivo .js é isto?
    – LeAndrade
    28/12/2018 às 19:03
  • isso, tem que colocar em um arquivo JSON 28/12/2018 às 20:06

1 Resposta 1

0

Bom se o que quer é pegar este array de objetos e converte-lo em um arquivo .json válido, terá que fazer as seguintes mudanças, pois dados Json tem a formatação diferente de um dado em Javascript:

{"database": [
  {
    "id": 1,
    "nome_jogo": "Jogo 1",
    "url_jogo": "jogos/url_do_jogo",
    "img": "nome_do_jogo.jpg",
    "img_alt": "Carregando...",
    "tags": "tags de busca"
  },
  {
    "id": 2,
    "nome_jogo": "Jogo 2",
    "url_jogo": "jogos/url_do_jogo",
    "img": "nome_do_jogo.jpg",
    "img_alt": "Carregando...",
    "tags": "tags de busca"
  }
]}

Após realizar as mudanças salve o arquivo com a extensão .json e pode fazer o seu uso normalmente.

Uma boa ferramenta online para se testar formatos válidos de Json é esta aqui.

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 .