How to create a layout inside Jquery and popular with data within a JSON

Navigation
0

To create my image database and I have a page that CURRENTLY populates a list (C #), it follows the code: 

@{

List <ImageIndexer> imagesFoundList = LuceneSearch.Search((String)Request["search_input"]).ToList();
String imagesFoundJSON = LuceneSearch.Search((String)Request["search_input"],true,""); // IGNORAR POR ENQUANTO

double ResultsFound = imagesFoundList.Count();
double ImagesPerPage = 100;
double Quotient = ResultsFound / ImagesPerPage;
double PageNumber = Convert.ToInt32(Math.Ceiling(Quotient));
double CurrentPage = @ViewBag.CurrentPage;

ViewBag.SearchBar = true;
}

<div class="row search-content">
    <div class="col-md-12">
        <div class="flex-images">
            @for (int i = 0; i < ResultsFound && i < ImagesPerPage; i++)
            {
                <div onmouseover="ShowItemDetails(@imagesFoundList[i].Id)" id="@imagesFoundList[i].Id" onmouseout="HideItemDetails(@imagesFoundList[i].Id)" class="item" data-w="@imagesFoundList[i].Width" data-h="@imagesFoundList[i].Height">
                    @if (Request.Url.Host == "localhost")
                    {
                        <img src="@String.Format(@"../../ImageDataBase/thumb/{0}.jpeg", imagesFoundList[i].Id)" />
                    }
                    else
                    {
                        <img src="@String.Format(@"http://{0}{1}{2}.jpeg", Request.Url.Host, StaticRoots.serverMapPathTHUMBWebServer, imagesFoundList[i].Id)" />
                    }

                    <div class="item-box" style="display:none">
                        <a href="@Url.Action("Image", "Home", new { id = @imagesFoundList[i].Id })">
                            <div class=item-box-title>
                                <div class="item-title">
                                    <p>@imagesFoundList[i].FileName</p>
                                </div>
                            </div>
                        </a>
                    </div>
                </div>
            }
        </div>
    </div>  
</div>

However, an image bank has MILLIONS of photos and I value the performance, as a result

With this in mind I created another method that instead of returning a List <ImageIndexer> , returns me a JSON that is much less heavy, and some competitors use in their API's. I need to popular my page using this JSON and not the List anymore, but I'm pretty much lost on that. Example of an excerpt from JSON: 

[
   {
      "Id":2107209287,
      "Keywords":"sexton beetle;sexton;beetle;insect;burying beetle;animal;coleoptera;polyphaga;silphidae;nicrophorus;nicrophorus tomentosus",
      "Description":"Sexton beetle, (Nicrophorus tomentosus) are insects that specialize in burying dead rodents, snakes and other small animals.",
      "Headline":"Sexton Beetle",
      "orientation":"Horizontal",
      "FileName":"2107209287.jpg",
      "Width":"3794",
      "Height":"2632"
   },
   {
      "Id":2107209300,
      "Keywords":"animals;animal;platypus;mammal;mammals;flat tail;tail;fur;ornithorynchiadae;platypuses;ornithorhynchus;ornithorhynchus anatinus;monotreme;monotremes;fauna;wildlife;australia;australian;swimming;underwater;captive animal;zoo animal;duckbilled platypus;duck-billed platypus;duck billed platypus;duck bill;duck-bill;duckbill;living fossil",
      "Description":"Platypus (Ornithorhynchus anatinus), Taronga Zoo, Sydney, Australia. The body and the broad, flat tail of the Platypus are covered with dense brown fur that traps a layer of insulating air to keep the animal warm.",
      "Headline":"Platypus",
      "orientation":"Horizontal",
      "FileName":"2107209300.jpg",
      "Width":"3908",
      "Height":"2625"
   },
   {
      "Id":2107209324,
      "Keywords":"animal;animals;fauna;mammal;mammals;mammalia;rodent;rodents;rodentia;hutia;hutias;bahamian;bahamian hutia;bahamian hutias;geoccepromys ingrahami;geoccepromys;ingrahami",
      "Description":"The Bahamian hutia (Geoccepromys ingrahami) is a nocturnal animal found only on East Plana Cay, an island in the Atlantic Ocean.",
      "Headline":"Bahamian Hutia",
      "orientation":"Horizontal",
      "FileName":"2107209324.jpg",
      "Width":"5248",
      "Height":"3496"
   },
   {
      "Id":2107209373,
      "Keywords":"greater siren;siren;siren lacertina;lacertina;predator;carnivore;carnivorous;animal;fauna;aquatic;marine life;sea life;aquatic life;salamander;aquatic salamander;amphibian;wildlife",
      "Description":"The greater siren (Siren lacertina) is a predator of aquatic animals such as crayfish, aquatic insects, worms, snails and small fish.",
      "Headline":"Greater siren",
      "orientation":"Horizontal",
      "FileName":"2107209373.jpg",
      "Width":"3902",
      "Height":"2550"
   },
   {
      "Id":2107209235,
      "Keywords":"nature;natural;animal;mammal;camel;bactrian camel;bactrian camels;bactrian;camelus ferus;c. ferus;camelus;ferus;camelus bactrianus;bactrianus;c. bactrianus;desert;gobi;gobi desert;graze;grazing;grazes;mongolia;asia",
      "Description":"Bactrian camels (Camelus bactrianus) in the Gobi Desert, Mongolia.",
      "Headline":"Bactrian Camels",
      "orientation":"Quadrado",
      "FileName":"2107209235.jpg",
      "Width":"2916",
      "Height":"2784"
   },
   {
      "Id":2107209236,
      "Keywords":"polar bear;polar bears;ursus maritimus;thalarctos maritimus;maritimus;ursus;thalarctos;u. maritimus;t. maritimus;bear;bears;white bear;white bears;animal;animals;mammal;mammals;mammalia;animalia;weigh;weighs;weighing;weight;helicopter;helicopters;person;people;snow;arctic;arctic ocean;chukchi sea;alaska;ak;winter;nature;scientist;field scientist;field rsearch;research;animal protection;animal research",
      "Description":"Polar bear (Ursus maritimus) being weighed on the Chukchi Sea, Alaska.",
      "Headline":"Polar Bear",
      "orientation":"Vertical",
      "FileName":"2107209236.jpg",
      "Width":"2550",
      "Height":"3740"
   },
   {
      "Id":2107209237,
      "Keywords":"gaboon viper;bitis;bitis gabonica;animal;reptile;reptilia;squamata;squamate;herp;viperidae;viper;snake;africa wildlife;african fauna;nigerian animal;nigeria snake;poisonous;poisonous snake;venomous;venomous snake;rainforest fauna;camouflage",
      "Description":"Gaboon viper (Bitis gabonica) from Nigeria.",
      "Headline":"Gaboon Viper",
      "orientation":"Quadrado",
      "FileName":"2107209237.jpg",
      "Width":"2937",
      "Height":"2915"
   },
   {
      "Id":2107209238,
      "Keywords":"coqui;puerto rico wildlife;puerto rico fauna;animal;fauna;wildlife;frog;tree frog;native tree frog;eleutherodactylus;amphibian;calling;vocalizing",
      "Description":"Coqui, a native tree frog in Puerto Rico.",
      "Headline":"Coqui",
      "orientation":"Horizontal",
      "FileName":"2107209238.jpg",
      "Width":"3872",
      "Height":"2578"
   },
   {
      "Id":2107209239,
      "Keywords":"radiated tortoise;tortoise;turtle;geochelone;geochelone radiata;animal;reptile;testudines;testudinidae;fauna;wildlife;nature",
      "Description":"Radiated tortoise (Geochelone radiata).",
      "Headline":"Radiated Tortoise",
      "orientation":"Horizontal",
      "FileName":"2107209239.jpg",
      "Width":"3820",
      "Height":"2508"
   },
   {
      "Id":2107209240,
      "Keywords":"radiated tortoise;tortoise;turtle;geochelone;geochelone radiata;animal;reptile;testudines;testudinidae;fauna;wildlife;nature",
      "Description":"Radiated tortoise (Geochelone radiata).",
      "Headline":"Radiated Tortoise",
      "orientation":"Horizontal",
      "FileName":"2107209240.jpg",
      "Width":"3779",
      "Height":"2517"
   },
   {
      "Id":2107209241,
      "Keywords":"fauna;animal;animalia;chordata;chordate;vertebrata;vertebrate;wildlife;wild life;aves;bird;crow;common crow;corvus;corvus brachyrhynchos;american crow;corvid;corvidae;passeriformes;passerine;passerines;scavenger;squawking;calling;vocalizing;animal communication;open beak;two",
      "Description":"Common Crows (Corvus brachyrhynchos).",
      "Headline":"Common Crows",
      "orientation":"Horizontal",
      "FileName":"2107209241.jpg",
      "Width":"5334",
      "Height":"3533"
   },
   {
      "Id":2107209242,
      "Keywords":"animal;animals;fauna;bird;birds;aves;passeriformes;songbird;songbirds;song bird;perching;honeycreeper;honeycreepers;hawaiian;drepanididae;iiwi;iiwis;vestiaria;vestiaria coccinea;red;hawaii",
      "Description":"Iiwi (Vestiaria coccinea), Kauai, Hawaii.",
      "Headline":"Iiwi",
      "orientation":"Horizontal",
      "FileName":"2107209242.jpg",
      "Width":"3917",
      "Height":"2550"
   },
   {
      "Id":2107209243,
      "Keywords":"animal;mammal;anteater;ant eater;silky anteater;pygmy anteater;myrmecophagidae;cyclopes;cyclopes didactylus;cyclopes didactyla;feeding;eating;eating termites;termite mount;eats;feeds;amazon;tropical;rainforest fauna;rain forest fauna;brazil;lower amazon;black anteater",
      "Description":"A black anteater (Cyclopes didactylus) at termite mound, eating termites. Lower Amazon, Brazil.",
      "Headline":"Black Anteater eating termites",
      "orientation":"Horizontal",
      "FileName":"2107209243.jpg",
      "Width":"3517",
      "Height":"2347"
   },
   {
      "Id":2107209244,
      "Keywords":"fauna;animal;mammal;artiodactyla;bovidae;cow;cattle;longhorn;long horn;ankole;herd;ankoli;herder;shepherd;people;native;indigenous;tribe;tribesman;tribesmen;uganda;ugandan;africa;african;east africa;east african;domestic;domesticated;livestock;ruminant;bovine;horn;drinking;drink",
      "Description":"Ankole longhorn cattle led by an Ankoli herder. Uganda, East Africa.",
      "Headline":"Ankole longhorn cattle herd in Uganda",
      "orientation":"Horizontal",
      "FileName":"2107209244.jpg",
      "Width":"3883",
      "Height":"2550"
   },
   {
      "Id":2107209245,
      "Keywords":"plumed marmoset;marmoset;monkey;animal;mammal;mammalia;primate;cebidae;callithricidae;new world monkey;south american;brazil wildlife;brazilian fauna;callitrichidae",
      "Description":"Plumed marmoset, Pernambuco, Brazil.",
      "Headline":"Plumed Marmoset",
      "orientation":"Horizontal",
      "FileName":"2107209245.jpg",
      "Width":"3354",
      "Height":"2261"
   },
   {
      "Id":2107209246,
      "Keywords":"red-tailed wambenger;red tailed wambenger;red-tailed wambengers;red tailed wambengers;wambenger;wambengers;red tailed;red-tailed;redtailed;eat;eats;eating;eating a gecko;phascogale calura;phascogale;calura;mammal;mammals;animal;animals;endangered;endangered species;endangered animal;marsupial;marsupials;rodent;rodents;rodentia",
      "Description":"Red-tailed wambenger (Phascogale calura) eating a gecko.",
      "Headline":"Red-tailed wambenger",
      "orientation":"Vertical",
      "FileName":"2107209246.jpg",
      "Width":"3456",
      "Height":"5164"
   },
   {
      "Id":2107209247,
      "Keywords":"fauna;animal;mammal;rodentia;rodent;cricetidae;dicrostonyx;dicrostonyx sp.;dicrostonyx groenlandicus;lemming;collared lemming;northern collared lemming;lichen;mammalia;collared lemmings;greenland lemming;greenland lemmings;greenland collared lemming;greenland collared lemmings;northern collared lemmings",
      "Description":"Collared lemming (Dicrostonyx groenlandicus).",
      "Headline":"Collared Lemming",
      "orientation":"Horizontal",
      "FileName":"2107209247.jpg",
      "Width":"5232",
      "Height":"3468"
   },
   {
      "Id":2107209248,
      "Keywords":"mallard;mallards;mallard duck;mallard ducks;bird;aves;duck;anas platyrhynchos;anas;platyrhynchos;a. platyrhynchos;nest;nesting;egg;duck egg;duck eggs;female;female duck;female ducks;female mallard;female mallards;female mallard duck;female mallard ducks;bird egg;bird eggs;grass;grasses;protect;protects;protecting;protective;protection;animal;nature;natural",
      "Description":"Female mallard duck (Anas platyrhynchos) on nest with eggs.",
      "Headline":"Duck at Nest",
      "orientation":"Horizontal",
      "FileName":"2107209248.jpg",
      "Width":"4051",
      "Height":"2554"
   },
   {
      "Id":2107209249,
      "Keywords":"serval cat;serval cats;cat;cats;feline;felines;wild cat;wild cats;serval;servals;wildcat;wildcats;felis serval;felis;african animal;african animals;animal;animals;mammal;mammals;felidae",
      "Description":"Serval cat.",
      "Headline":"Serval cat",
      "orientation":"Horizontal",
      "FileName":"2107209249.jpg",
      "Width":"3934",
      "Height":"2550"
   },
   {
      "Id":2107209250,
      "Keywords":"animal;animals;fauna;mollusk;mollusks;mollusca;bivalve;bivalves;pearl oyster;pearl oysters;pearl;pearls;culturing pearls;cultured pearls;half pearl;half pearls;half-pearls;ready for harvest;harvesting;pearl industry",
      "Description":"Half pearls ready for harvest, Friday Island, Torres Straits, Queensland, Australia.",
      "Headline":"Pearls ready for harvest",
      "orientation":"Horizontal",
      "FileName":"2107209250.jpg",
      "Width":"3958",
      "Height":"2550"
   },
   {
      "Id":2107209251,
      "Keywords":"reindeer;norway fauna;norwegian fauna;animal;fauna;wildlife;herd;reindeer herd;caribou;capreolinae;cervidae;mammal;animal behavior;rangifer tarandus;rangifer;deer",
      "Description":"Reindeer (Rangifer tarandus) herd running by snow pine trees in Norway.",
      "Headline":"Reindeer",
      "orientation":"Vertical",
      "FileName":"2107209251.jpg",
      "Width":"4200",
      "Height":"4729"
   },
   {
      "Id":2107209254,
      "Keywords":"equestrians;traveling;chasing;healthy lifestyle;grass;young adult woman;sports;racing;Caucasian ethnicity;daytime;20-24 years;countryside;outdoors;skill;horse;expedition;environment;travel;interaction;women;female;adult;young adult;competition;20s adult;mammal;animals;three animals;eagerness;fun;horsemanship;exercising;three people;recreation;hoof;runner;galloping;enthusiasm;incentive;vitality;rural scene;leisure;jogger;speeding;warm-blooded;leading;rider;small group of animals;three;few;group of animals;group;enjoyment;horse riding;animal riding;riding;small group of people;group of people;people;athlete;running;motion;action;energy",
      "Description":"Three horseback riders racing across a field --- Image by © Corbis",
      "Headline":"Three horseback riders racing across a field",
      "orientation":"Horizontal",
      "FileName":"2107209254.jpg",
      "Width":"5279",
      "Height":"3533"
   },
   {
      "Id":2107209260,
      "Keywords":"polar bear;polar bears;ursus maritimus;thalarctos maritimus;maritimus;ursus;thalarctos;u. maritimus;t. maritimus;bear;bears;white bear;white bears;animal;animals;mammal;mammals;mammalia;animalia;weigh;weighs;weighing;weight;helicopter;helicopters;person;people;snow;arctic;arctic ocean;chukchi sea;alaska;ak;winter;nature;scientist;field scientist;field rsearch;research;animal protection;animal research",
      "Description":"Polar bear (Ursus maritimus) being weighed on the Chukchi Sea, Alaska.",
      "Headline":"Polar Bear",
      "orientation":"Vertical",
      "FileName":"2107209260.jpg",
      "Width":"2550",
      "Height":"3740"
   },
   {
      "Id":2107209261,
      "Keywords":"gaboon viper;bitis;bitis gabonica;animal;reptile;reptilia;squamata;squamate;herp;viperidae;viper;snake;africa wildlife;african fauna;nigerian animal;nigeria snake;poisonous;poisonous snake;venomous;venomous snake;rainforest fauna;camouflage",
      "Description":"Gaboon viper (Bitis gabonica) from Nigeria.",
      "Headline":"Gaboon Viper",
      "orientation":"Quadrado",
      "FileName":"2107209261.jpg",
      "Width":"2937",
      "Height":"2915"
   },
   {
      "Id":2107209262,
      "Keywords":"coqui;puerto rico wildlife;puerto rico fauna;animal;fauna;wildlife;frog;tree frog;native tree frog;eleutherodactylus;amphibian;calling;vocalizing",
      "Description":"Coqui, a native tree frog in Puerto Rico.",
      "Headline":"Coqui",
      "orientation":"Horizontal",
      "FileName":"2107209262.jpg",
      "Width":"3872",
      "Height":"2578"
   },
   {
      "Id":2107209263,
      "Keywords":"radiated tortoise;tortoise;turtle;geochelone;geochelone radiata;animal;reptile;testudines;testudinidae;fauna;wildlife;nature",
      "Description":"Radiated tortoise (Geochelone radiata).",
      "Headline":"Radiated Tortoise",
      "orientation":"Horizontal",
      "FileName":"2107209263.jpg",
      "Width":"3820",
      "Height":"2508"
   },
   {
      "Id":2107209264,
      "Keywords":"radiated tortoise;tortoise;turtle;geochelone;geochelone radiata;animal;reptile;testudines;testudinidae;fauna;wildlife;nature",
      "Description":"Radiated tortoise (Geochelone radiata).",
      "Headline":"Radiated Tortoise",
      "orientation":"Horizontal",
      "FileName":"2107209264.jpg",
      "Width":"3779",
      "Height":"2517"
   }
]

Is there any way I can create a layout that is easy to maintain in Jquery?

    
asked by anonymous 01.08.2017 / 20:34

1 answer

0

I was able to work with a library called Handlerbars that allows me to create layouts and insert variables into it through JS.

First I import the library: 

<script src="~/Scripts/ImageResult/ImageResultHandler.js"></script>

Then just create my template with the tag <script> 

<script id="entry-template" type="text/x-handlebars-template">
  <div class="entry">
    <h1>{{title}}</h1>
    <div class="body">
       {{body}}
    </div>
 </div>
</script>

Compile the template: 

var source   = $("#entry-template").html();
var template = Handlebars.compile(source);

I create the context and step the same for the template () method 

var context = {title: "Meu primeiro template", body: "Template criado para o stackoverflow :)"};
var html    = template(context);

As a result:

  

My first template

       Template created for stackoverflow :)   


In my case I passed the JSON values inside a loop that iterated over it: 

            context = { _id: JSON[contador].Id, _host: Host, _thumbPath: ThumbPath, _width: JSON[contador].Width, _height: JSON[contador].Height, _fileName: JSON[contador].FileName };
    
02.08.2017 / 21:20
'log' not meaningful for factors Retrieve contact list name list in an android edit