I am sending a request which returns the following:
{
"title": "Recent Uploads",
"link": "http://www.flickr.com/photos/",
"description": "",
"generator": "http://www.flickr.com/",
"items": [
{
"title": "Title 1",
"link": "http://www.flickr.com/photos/123"
} ]
}
Yet when I try to access things within, I get a 'undefined' value:
xml.onreadystatechange = function () {
if (xml.readyState == 4 && xml.status == 200) {
var rsp = xml.rspTxt
console.log(rsp.title);
}
}
What am I doing wrong? As far as I can tell, this should work...
EDIT: Fiddle.
It's because your JSON is not a valid JSON at all..
var test = {
"title": "Recent Uploads",
"link": "http://www.flickr.com/photos/",
"description": "",
"generator": "http://www.flickr.com/",
"items": {
"title": "Title 1",
"link": "http://www.flickr.com/photos/123"
}
};
console.log(test.title);
This works fine and results in "Recent Uploads" in the console. You cannot have '[' there and ',' at the end.
As other people have stated before, the JSON response you get from that call is invalid.
{
"title": "Recent Uploads tagged potato",
"link": "https://www.flickr.com/photos/tags/potato/",
"description": "",
"modified": "2015-10-14T09:17:25Z",
"generator": "https://www.flickr.com/",
"items": [
{
"title": "French fries",
"link": "https://www.flickr.com/photos/87608453#N06/22159555595/",
"media": {"m":"https://farm1.staticflickr.com/758/22159555595_0a1ba32e44_m.jpg"},
"date_taken": "2008-06-18T16:50:34-08:00",
"description": " <p><a href=\"https://www.flickr.com/people/87608453#N06/\">Chulpa<\/a> posted a photo:<\/p> <p><a href=\"https://www.flickr.com/photos/87608453#N06/22159555595/\" title=\"French fries\"><img src=\"https://farm1.staticflickr.com/758/22159555595_0a1ba32e44_m.jpg\" width=\"240\" height=\"160\" alt=\"French fries\" /><\/a><\/p> <p>Heap of crisp French fries - detail<\/p>",
"published": "2015-10-14T09:17:25Z",
"author": "nobody#flickr.com (Chulpa)",
"author_id": "87608453#N06",
"tags": "hot detail macro closeup studio fastfood tasty sidedish frenchfries chips crisp potato snack junkfood takeaway portion sliced popular unhealthy baked roasted deepfried fattening accompaniment pommefrites takeoutfood"
},
{
"title": "potatowedges",
"link": "https://www.flickr.com/photos/64474673#N08/22131498326/",
"media": {"m":"https://farm1.staticflickr.com/700/22131498326_05d9f67dac_m.jpg"},
"date_taken": "2015-10-14T00:23:48-08:00",
"description": " <p><a href=\"https://www.flickr.com/people/64474673#N08/\">amandahar<\/a> posted a photo:<\/p> <p><a href=\"https://www.flickr.com/photos/64474673#N08/22131498326/\" title=\"potatowedges\"><img src=\"https://farm1.staticflickr.com/700/22131498326_05d9f67dac_m.jpg\" width=\"240\" height=\"240\" alt=\"potatowedges\" /><\/a><\/p> ",
"published": "2015-10-14T07:23:48Z",
"author": "nobody#flickr.com (amandahar)",
"author_id": "64474673#N08",
"tags": "potato potatowedges"
},
{
"title": "Shadows and Potato van in Preston",
"link": "https://www.flickr.com/photos/tonyworrall/21968606450/",
"media": {"m":"https://farm1.staticflickr.com/758/21968606450_3a9c70e5bc_m.jpg"},
"date_taken": "2015-09-30T13:12:20-08:00",
"description": " <p><a href=\"https://www.flickr.com/people/tonyworrall/\">Tony Worrall Foto<\/a> posted a photo:<\/p> <p><a href=\"https://www.flickr.com/photos/tonyworrall/21968606450/\" title=\"Shadows and Potato van in Preston\"><img src=\"https://farm1.staticflickr.com/758/21968606450_3a9c70e5bc_m.jpg\" width=\"240\" height=\"171\" alt=\"Shadows and Potato van in Preston\" /><\/a><\/p> <p>© 2015 Tony Worrall<\/p>",
"published": "2015-10-14T06:34:58Z",
"author": "nobody#flickr.com (Tony Worrall Foto)",
"author_id": "10089490#N06",
"tags": "county street uk england people urban food lunch stream tour shadows open place northwest unitedkingdom candid country north visit location lancashire eat potato queue area buy preston van northern update streetfood attraction lancs welovethenorth :copyright:2015tonyworrall"
},
{
"title": "thực phẩm giàu dinh dưỡng",
"link": "https://www.flickr.com/photos/134900096#N07/22156604725/",
"media": {"m":"https://farm6.staticflickr.com/5751/22156604725_882ca5642d_m.jpg"},
"date_taken": "2012-08-06T16:59:38-08:00",
"description": " <p><a href=\"https://www.flickr.com/people/134900096#N07/\">hoaithuong0115<\/a> posted a photo:<\/p> <p><a href=\"https://www.flickr.com/photos/134900096#N07/22156604725/\" title=\"thực phẩm giàu dinh dưỡng\"><img src=\"https://farm6.staticflickr.com/5751/22156604725_882ca5642d_m.jpg\" width=\"240\" height=\"160\" alt=\"thực phẩm giàu dinh dưỡng\" /><\/a><\/p> <p>Xem: <a href=\"http://emdep.vn/thuc-don-giam-can-s275.htm\" rel=\"nofollow\">emdep.vn/thuc-don-giam-can-s275.htm<\/a><\/p>",
"published": "2015-10-14T06:25:03Z",
"author": "nobody#flickr.com (hoaithuong0115)",
"author_id": "134900096#N07",
"tags": "red food orange green apple mushroom fruits vegetables tomato pepper healthy natural display market sweet tomatoes olive banana supermarket lettuce potato pineapple asparagus crop snack carrot pear cauliflower garlic produce onion feed organic grocery fiber eats edible goodies eatable groceries arrangement grape combination nutrition lowfat nourishment nutrients nonfat provision lowcalorie nutriment"
},
{
"title": "",
"link": "https://www.flickr.com/photos/underthetuliptree/21959671820/",
"media": {"m":"https://farm6.staticflickr.com/5803/21959671820_f60c0cd98f_m.jpg"},
"date_taken": "2012-07-12T14:22:38-08:00",
"description": " <p><a href=\"https://www.flickr.com/people/underthetuliptree/\">julianna smith<\/a> posted a photo:<\/p> <p><a href=\"https://www.flickr.com/photos/underthetuliptree/21959671820/\" title=\"\"><img src=\"https://farm6.staticflickr.com/5803/21959671820_f60c0cd98f_m.jpg\" width=\"160\" height=\"240\" alt=\"\" /><\/a><\/p> <p>Potato cakes with onions and spinach<\/p>",
"published": "2015-10-13T22:42:18Z",
"author": "nobody#flickr.com (julianna smith)",
"author_id": "34306073#N07",
"tags": "food cakes dinner vegan smith potato julianna"
},
{
"title": "Prague 14",
"link": "https://www.flickr.com/photos/131811220#N07/22106050326/",
"media": {"m":"https://farm6.staticflickr.com/5636/22106050326_67983e253b_m.jpg"},
"date_taken": "2015-10-04T14:44:43-08:00",
"description": " <p><a href=\"https://www.flickr.com/people/131811220#N07/\">MichaelWard82<\/a> posted a photo:<\/p> <p><a href=\"https://www.flickr.com/photos/131811220#N07/22106050326/\" title=\"Prague 14\"><img src=\"https://farm6.staticflickr.com/5636/22106050326_67983e253b_m.jpg\" width=\"240\" height=\"160\" alt=\"Prague 14\" /><\/a><\/p> ",
"published": "2015-10-13T10:46:54Z",
"author": "nobody#flickr.com (MichaelWard82)",
"author_id": "131811220#N07",
"tags": "food republic czech prague potato twirl"
},
{
"title": "My Dinner",
"link": "https://www.flickr.com/photos/sarahjdhue/21941657920/",
"media": {"m":"https://farm6.staticflickr.com/5701/21941657920_53387b668c_m.jpg"},
"date_taken": "2015-10-11T15:17:25-08:00",
"description": " <p><a href=\"https://www.flickr.com/people/sarahjdhue/\">SarahJDhue<\/a> posted a photo:<\/p> <p><a href=\"https://www.flickr.com/photos/sarahjdhue/21941657920/\" title=\"My Dinner\"><img src=\"https://farm6.staticflickr.com/5701/21941657920_53387b668c_m.jpg\" width=\"240\" height=\"181\" alt=\"My Dinner\" /><\/a><\/p> <p>Weinerschnitzel ala Holstein -Sarah J Dhue<\/p>",
"published": "2015-10-13T08:11:25Z",
"author": "nobody#flickr.com (SarahJDhue)",
"author_id": "92310074#N06",
"tags": "red food pancakes dinner restaurant illinois october yum egg cellphone samsung palace il potato german ala cabbage fried dreamland applesauce holstein veal weinerschnitzel galaxys6 sarahjdhuephotos sarahjdhue"
},
{
"title": "Open Faced at Old Vine Cafe",
"link": "https://www.flickr.com/photos/55017688#N00/22136102231/",
"media": {"m":"https://farm6.staticflickr.com/5651/22136102231_984461d378_m.jpg"},
"date_taken": "2015-09-19T22:02:02-08:00",
"description": " <p><a href=\"https://www.flickr.com/people/55017688#N00/\">deeeelish<\/a> posted a photo:<\/p> <p><a href=\"https://www.flickr.com/photos/55017688#N00/22136102231/\" title=\"Open Faced at Old Vine Cafe\"><img src=\"https://farm6.staticflickr.com/5651/22136102231_984461d378_m.jpg\" width=\"240\" height=\"149\" alt=\"Open Faced at Old Vine Cafe\" /><\/a><\/p> <p>Fresh Biscuit, Chicken Sausage, Scrambled Eggs, Chipotle Gravy & Queso Fresco with Potatoes <br /> <br /> Costa Mesa, CA<\/p>",
"published": "2015-10-13T04:30:52Z",
"author": "nobody#flickr.com (deeeelish)",
"author_id": "55017688#N00",
"tags": "gravy potato eggs quesofresno"
},
{
"title": "Omelette at Old Vine Cafe",
"link": "https://www.flickr.com/photos/55017688#N00/21938083198/",
"media": {"m":"https://farm1.staticflickr.com/593/21938083198_046a230259_m.jpg"},
"date_taken": "2015-09-19T22:02:47-08:00",
"description": " <p><a href=\"https://www.flickr.com/people/55017688#N00/\">deeeelish<\/a> posted a photo:<\/p> <p><a href=\"https://www.flickr.com/photos/55017688#N00/21938083198/\" title=\"Omelette at Old Vine Cafe\"><img src=\"https://farm1.staticflickr.com/593/21938083198_046a230259_m.jpg\" width=\"240\" height=\"156\" alt=\"Omelette at Old Vine Cafe\" /><\/a><\/p> <p>Costa Mesa, CA<\/p>",
"published": "2015-10-13T04:30:54Z",
"author": "nobody#flickr.com (deeeelish)",
"author_id": "55017688#N00",
"tags": "potato eggs omelette"
},
{
"title": "Chicken",
"link": "https://www.flickr.com/photos/jorkew/22106677661/",
"media": {"m":"https://farm6.staticflickr.com/5710/22106677661_00d43a64bc_m.jpg"},
"date_taken": "2015-09-05T00:00:00-08:00",
"description": " <p><a href=\"https://www.flickr.com/people/jorkew/\">Jorkew<\/a> posted a photo:<\/p> <p><a href=\"https://www.flickr.com/photos/jorkew/22106677661/\" title=\"Chicken\"><img src=\"https://farm6.staticflickr.com/5710/22106677661_00d43a64bc_m.jpg\" width=\"160\" height=\"240\" alt=\"Chicken\" /><\/a><\/p> <p>Kodak Ektar 100<br /> Canon eos 1<br /> Canon EF 24-70mm f/2.8 L USM<br /> <br /> A few test shots from the new camera. <br /> <br /> <a href=\"http://jorkew.com/\" rel=\"nofollow\">Website<\/a> | <a href=\"http://facebook.com/jorkewphotography\" rel=\"nofollow\">Facebook<\/a><\/p>",
"published": "2015-10-12T20:40:00Z",
"author": "nobody#flickr.com (Jorkew)",
"author_id": "28568131#N06",
"tags": "camera red food chicken film analog canon photography eos 1 potatoes oven kodak kip potato l produce 100 usm filmcamera 135 done canoneos f28 canonef2470mmf28lusm ef baked eos1 ektar foodphotography 2470mm analogcamera llens kodak100 filmisnotdead canoneos1 canonllens kodakektar canon2470mmf28 kodakcolorfilm canonef2470mm ektar100 canonanalogcamera staybrokeshootfilm canoneos1analog canoneos1filmcamera"
},
{
"title": "Alice in Wonderland Pitstop",
"link": "https://www.flickr.com/photos/magicattic88/21491271583/",
"media": {"m":"https://farm1.staticflickr.com/746/21491271583_5113d90565_m.jpg"},
"date_taken": "2015-10-07T00:00:00-08:00",
"description": " <p><a href=\"https://www.flickr.com/people/magicattic88/\">Darling Starlings<\/a> posted a photo:<\/p> <p><a href=\"https://www.flickr.com/photos/magicattic88/21491271583/\" title=\"Alice in Wonderland Pitstop\"><img src=\"https://farm1.staticflickr.com/746/21491271583_5113d90565_m.jpg\" width=\"240\" height=\"240\" alt=\"Alice in Wonderland Pitstop\" /><\/a><\/p> <p>After seeing Terry Wogan in the Waterstones tent - CheltLitFest 2015 - Jue [https://www.flickr.com/photos/pyride] and I wandered around a bit - we found this lovely little Alice in Wonderland themed café on the Festival site. It called for a Penelope Pitstop of crunchy lattice chips with dips and a coffee each - yum. Just what was needed :)).<\/p>",
"published": "2015-10-12T16:17:19Z",
"author": "nobody#flickr.com (Darling Starlings)",
"author_id": "8649118#N08",
"tags": "food coffee festival hearts town cafe penelope poinsettia hats literature chips potato pitstop cheltenham lattice aliceinwonderland dips imperialgardens 2015 candlebra bigteacup cheltlitfest"
},
{
"title": "Giant potatomobile",
"link": "https://www.flickr.com/photos/asciident/22079616896/",
"media": {"m":"https://farm6.staticflickr.com/5765/22079616896_c1bedd0a4a_m.jpg"},
"date_taken": "2015-10-04T17:10:42-08:00",
"description": " <p><a href=\"https://www.flickr.com/people/asciident/\">asciident<\/a> posted a photo:<\/p> <p><a href=\"https://www.flickr.com/photos/asciident/22079616896/\" title=\"Giant potatomobile\"><img src=\"https://farm6.staticflickr.com/5765/22079616896_c1bedd0a4a_m.jpg\" width=\"240\" height=\"202\" alt=\"Giant potatomobile\" /><\/a><\/p> <p>Near Wendell, Idaho<br /> <br /> Excuse the thumb, I was in a hurry to catch the potatomobile!<\/p>",
"published": "2015-10-12T06:59:23Z",
"author": "nobody#flickr.com (asciident)",
"author_id": "12616001#N00",
"tags": "idaho potato wendell potatomobile"
},
{
"title": "Giant potatomobile",
"link": "https://www.flickr.com/photos/asciident/22115860151/",
"media": {"m":"https://farm1.staticflickr.com/646/22115860151_c18609aa78_m.jpg"},
"date_taken": "2015-10-04T17:10:45-08:00",
"description": " <p><a href=\"https://www.flickr.com/people/asciident/\">asciident<\/a> posted a photo:<\/p> <p><a href=\"https://www.flickr.com/photos/asciident/22115860151/\" title=\"Giant potatomobile\"><img src=\"https://farm1.staticflickr.com/646/22115860151_c18609aa78_m.jpg\" width=\"186\" height=\"240\" alt=\"Giant potatomobile\" /><\/a><\/p> <p>Near Wendell, Idaho<\/p>",
"published": "2015-10-12T06:59:24Z",
"author": "nobody#flickr.com (asciident)",
"author_id": "12616001#N00",
"tags": "idaho potato wendell potatomobile"
},
{
"title": "Giant potatomobile",
"link": "https://www.flickr.com/photos/asciident/21917906328/",
"media": {"m":"https://farm1.staticflickr.com/684/21917906328_fb679fb950_m.jpg"},
"date_taken": "2015-10-04T17:10:44-08:00",
"description": " <p><a href=\"https://www.flickr.com/people/asciident/\">asciident<\/a> posted a photo:<\/p> <p><a href=\"https://www.flickr.com/photos/asciident/21917906328/\" title=\"Giant potatomobile\"><img src=\"https://farm1.staticflickr.com/684/21917906328_fb679fb950_m.jpg\" width=\"240\" height=\"180\" alt=\"Giant potatomobile\" /><\/a><\/p> <p>Near Wendell, Idaho<\/p>",
"published": "2015-10-12T06:59:24Z",
"author": "nobody#flickr.com (asciident)",
"author_id": "12616001#N00",
"tags": "idaho potato wendell potatomobile"
},
{
"title": "Giant potatomobile",
"link": "https://www.flickr.com/photos/asciident/22093267702/",
"media": {"m":"https://farm1.staticflickr.com/749/22093267702_5f51f6e60e_m.jpg"},
"date_taken": "2015-10-04T17:10:47-08:00",
"description": " <p><a href=\"https://www.flickr.com/people/asciident/\">asciident<\/a> posted a photo:<\/p> <p><a href=\"https://www.flickr.com/photos/asciident/22093267702/\" title=\"Giant potatomobile\"><img src=\"https://farm1.staticflickr.com/749/22093267702_5f51f6e60e_m.jpg\" width=\"240\" height=\"180\" alt=\"Giant potatomobile\" /><\/a><\/p> <p>Near Wendell, Idaho<\/p>",
"published": "2015-10-12T06:59:25Z",
"author": "nobody#flickr.com (asciident)",
"author_id": "12616001#N00",
"tags": "idaho potato wendell potatomobile"
},
{
"title": "Giant potatomobile",
"link": "https://www.flickr.com/photos/asciident/21917907758/",
"media": {"m":"https://farm6.staticflickr.com/5744/21917907758_f1130f8768_m.jpg"},
"date_taken": "2015-10-04T17:10:40-08:00",
"description": " <p><a href=\"https://www.flickr.com/people/asciident/\">asciident<\/a> posted a photo:<\/p> <p><a href=\"https://www.flickr.com/photos/asciident/21917907758/\" title=\"Giant potatomobile\"><img src=\"https://farm6.staticflickr.com/5744/21917907758_f1130f8768_m.jpg\" width=\"240\" height=\"200\" alt=\"Giant potatomobile\" /><\/a><\/p> <p>Near Jerome, Idaho<\/p>",
"published": "2015-10-12T06:59:23Z",
"author": "nobody#flickr.com (asciident)",
"author_id": "12616001#N00",
"tags": "idaho potato jerome potatomobile"
},
{
"title": "Twister Potato Chip",
"link": "https://www.flickr.com/photos/jimmychuah/22104255305/",
"media": {"m":"https://farm6.staticflickr.com/5714/22104255305_abe56671da_m.jpg"},
"date_taken": "2015-09-11T16:22:14-08:00",
"description": " <p><a href=\"https://www.flickr.com/people/jimmychuah/\">Jimmy Chuah<\/a> posted a photo:<\/p> <p><a href=\"https://www.flickr.com/photos/jimmychuah/22104255305/\" title=\"Twister Potato Chip\"><img src=\"https://farm6.staticflickr.com/5714/22104255305_abe56671da_m.jpg\" width=\"240\" height=\"160\" alt=\"Twister Potato Chip\" /><\/a><\/p> ",
"published": "2015-10-12T05:23:56Z",
"author": "nobody#flickr.com (Jimmy Chuah)",
"author_id": "67226751#N02",
"tags": "travel food holiday stall korea potato snack seoul koreanfood myeongdong 2015"
},
{
"title": "Potato Rolled Shrimp",
"link": "https://www.flickr.com/photos/jimmychuah/21917351019/",
"media": {"m":"https://farm1.staticflickr.com/694/21917351019_d93527d6d7_m.jpg"},
"date_taken": "2015-09-11T17:18:27-08:00",
"description": " <p><a href=\"https://www.flickr.com/people/jimmychuah/\">Jimmy Chuah<\/a> posted a photo:<\/p> <p><a href=\"https://www.flickr.com/photos/jimmychuah/21917351019/\" title=\"Potato Rolled Shrimp\"><img src=\"https://farm1.staticflickr.com/694/21917351019_d93527d6d7_m.jpg\" width=\"240\" height=\"160\" alt=\"Potato Rolled Shrimp\" /><\/a><\/p> ",
"published": "2015-10-12T05:24:05Z",
"author": "nobody#flickr.com (Jimmy Chuah)",
"author_id": "67226751#N02",
"tags": "travel food holiday stall shrimp korea potato snack seoul koreanfood myeongdong 2015"
},
{
"title": "fzk_188_28082015_09\'48",
"link": "https://www.flickr.com/photos/eduard_buerge-rafz/21901809028/",
"media": {"m":"https://farm1.staticflickr.com/619/21901809028_7637fa8cd4_m.jpg"},
"date_taken": "2015-08-28T09:48:46-08:00",
"description": " <p><a href=\"https://www.flickr.com/people/eduard_buerge-rafz/\">eduard43<\/a> posted a photo:<\/p> <p><a href=\"https://www.flickr.com/photos/eduard_buerge-rafz/21901809028/\" title=\"fzk_188_28082015_09\'48\"><img src=\"https://farm1.staticflickr.com/619/21901809028_7637fa8cd4_m.jpg\" width=\"240\" height=\"135\" alt=\"fzk_188_28082015_09\'48\" /><\/a><\/p> <p>Die Kartoffel (Solanum tuberosum).<br /> The potato (Solanum tuberosum).<\/p>",
"published": "2015-10-11T12:22:17Z",
"author": "nobody#flickr.com (eduard43)",
"author_id": "40303029#N08",
"tags": "potato kartoffeln naturalproducts solanumtuberosum potatoplants naturprodukte kartoffelstauden"
},
{
"title": "fzk_189_28082015_09\'48",
"link": "https://www.flickr.com/photos/eduard_buerge-rafz/22077208832/",
"media": {"m":"https://farm1.staticflickr.com/761/22077208832_e1616a4351_m.jpg"},
"date_taken": "2015-08-28T09:48:51-08:00",
"description": " <p><a href=\"https://www.flickr.com/people/eduard_buerge-rafz/\">eduard43<\/a> posted a photo:<\/p> <p><a href=\"https://www.flickr.com/photos/eduard_buerge-rafz/22077208832/\" title=\"fzk_189_28082015_09\'48\"><img src=\"https://farm1.staticflickr.com/761/22077208832_e1616a4351_m.jpg\" width=\"135\" height=\"240\" alt=\"fzk_189_28082015_09\'48\" /><\/a><\/p> <p>Die Kartoffel (Solanum tuberosum).<br /> The potato (Solanum tuberosum).<\/p>",
"published": "2015-10-11T12:22:16Z",
"author": "nobody#flickr.com (eduard43)",
"author_id": "40303029#N08",
"tags": "potato kartoffeln naturalproducts solanumtuberosum potatoplants naturprodukte kartoffelstauden"
}
]
}
You can check that out on jsonlint.com, the last two objects in the array have bad escaping and other problems...if I delete them manually the rest of the response is a valid JSON. You can't fix that on your end but have to ask flickr to provide valid JSON.
Related
This is my first question on stack overflow, so I hope that I'm doing this correctly!
I'm working with pulling some data from an API, and then displaying that data in a table. So far my table is showing the HTML elements of <tr><td> + </tr></td>
Here is a photo to show my issue :
Photo of issue
Here is the code that I'm using :
const fetchUserz = async() => {
const response = await fetch(`https://jsonplaceholder.typicode.com/users`);
const data = await response.json();
for (let i = 0; i < data.length; i++) {
let table = document.getElementById(`myTable`);
let row = `<tr>
<td>${data[i].name}</td>
<td>${data[i].email}</td>
</tr>`;
table.innerHTML += row;
table.append(row);
}
}
fetchUserz();
Here is the HTML :
<body class="text-white bg-secondary mb-3 bg-gradient" id="body">
<main>
<header id="head">
<h2>API Project</h2>
</header>
<table>
<thead>
<tr>
<th> Names of People </th>
<th> Emails of People </th>
</tr>
</thead>
const fetchUserz = async() => {
const response = await fetch(`https://jsonplaceholder.typicode.com/users`);
const data = await response.json();
// console.log(data)
for(let i = 0; i < data.length; i++){
let table = document.getElementById(`myTable`);
let row = `<tr>
<td>${data[i].name}</td>
<td>${data[i].email}</td>
</tr>`;
table.innerHTML += row;
table.append(row);
}
}
fetchUserz();
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset = "UTF-8">
<title>Native Awakenings</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/css/bootstrap.css" rel="stylesheet" crossorigin="anonymous">
<link href="/css/stylesheet.css" rel="stylesheet">
</head>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="/index.html">Native Awakenings</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="/index.html">Home</a>
</li>
<li class="nav-item">
About Me
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Concious Creations
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="blog-posts.html">Blog Posts</a></li>
<li><a class="dropdown-item" href="offerings.html">Offerings</a></li>
<li><a class="dropdown-item" href="podcasts.html">Podcasts</a></li>
<li><a class="dropdown-item" href="yoga-videos.html">Yoga Videos</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="https://gitlab.com/Gregg-Hendrix/how-i-became-a-software-engineer" target="_blank">How I Became A Software Engineer</a></li>
</ul>
</li>
</ul>
<span class="navbar-text">
May Presence Be Our Purpose
</span>
</div>
</div>
</nav>
<body class="text-white bg-secondary mb-3 bg-gradient" id="body">
<main>
<header id="head">
<h2>API Project</h2>
</header>
<table>
<thead>
<tr>
<th> Names of People </th>
<th> Emails of People </th>
</tr>
</thead>
<tbody id="myTable">
</tbody>
</main>
<footer class="card-footer bg-dark bg-gradient navbar-dark text-light" id="footer"> If you want to support Native Awakenings, please do one kind act! Remember that you are unconditionally loved. My social media: Insta: #Greggyogi, Email: gregg#gregghendrix.com, Facebook: Gregg Hendrix</footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>
<script src="/js/weather.js"></script>
</body>
</html>
I've also added a snippet of EVERYTHING, any help would be massively appreciated :).
You immediate problem is using both innerHTML and append as covered in the comments
Let's go with innerHTML...
It's probably better to create your HTML string in one go rather than el.innerHTML += .... My gut feeling it that .innerHTML += will have pretty bad performance as each round will require an HTML parse and an HTML serialize.
const table = document.getElementById(`myTable`);
const rows = data.map(d=>`<tr>
<td>${data[i].name}</td>
<td>${data[i].email}</td>
</tr>`);
table.innerHTML = rows.join("");
You can create your HTML string as below.
const fetchUserz = async() => {
const data = [
{
"id": 1,
"name": "Leanne Graham",
"username": "Bret",
"email": "Sincere#april.biz",
"address": {
"street": "Kulas Light",
"suite": "Apt. 556",
"city": "Gwenborough",
"zipcode": "92998-3874",
"geo": {
"lat": "-37.3159",
"lng": "81.1496"
}
},
"phone": "1-770-736-8031 x56442",
"website": "hildegard.org",
"company": {
"name": "Romaguera-Crona",
"catchPhrase": "Multi-layered client-server neural-net",
"bs": "harness real-time e-markets"
}
},
{
"id": 2,
"name": "Ervin Howell",
"username": "Antonette",
"email": "Shanna#melissa.tv",
"address": {
"street": "Victor Plains",
"suite": "Suite 879",
"city": "Wisokyburgh",
"zipcode": "90566-7771",
"geo": {
"lat": "-43.9509",
"lng": "-34.4618"
}
},
"phone": "010-692-6593 x09125",
"website": "anastasia.net",
"company": {
"name": "Deckow-Crist",
"catchPhrase": "Proactive didactic contingency",
"bs": "synergize scalable supply-chains"
}
},
{
"id": 3,
"name": "Clementine Bauch",
"username": "Samantha",
"email": "Nathan#yesenia.net",
"address": {
"street": "Douglas Extension",
"suite": "Suite 847",
"city": "McKenziehaven",
"zipcode": "59590-4157",
"geo": {
"lat": "-68.6102",
"lng": "-47.0653"
}
},
"phone": "1-463-123-4447",
"website": "ramiro.info",
"company": {
"name": "Romaguera-Jacobson",
"catchPhrase": "Face to face bifurcated interface",
"bs": "e-enable strategic applications"
}
},
{
"id": 4,
"name": "Patricia Lebsack",
"username": "Karianne",
"email": "Julianne.OConner#kory.org",
"address": {
"street": "Hoeger Mall",
"suite": "Apt. 692",
"city": "South Elvis",
"zipcode": "53919-4257",
"geo": {
"lat": "29.4572",
"lng": "-164.2990"
}
},
"phone": "493-170-9623 x156",
"website": "kale.biz",
"company": {
"name": "Robel-Corkery",
"catchPhrase": "Multi-tiered zero tolerance productivity",
"bs": "transition cutting-edge web services"
}
},
{
"id": 5,
"name": "Chelsey Dietrich",
"username": "Kamren",
"email": "Lucio_Hettinger#annie.ca",
"address": {
"street": "Skiles Walks",
"suite": "Suite 351",
"city": "Roscoeview",
"zipcode": "33263",
"geo": {
"lat": "-31.8129",
"lng": "62.5342"
}
},
"phone": "(254)954-1289",
"website": "demarco.info",
"company": {
"name": "Keebler LLC",
"catchPhrase": "User-centric fault-tolerant solution",
"bs": "revolutionize end-to-end systems"
}
},
{
"id": 6,
"name": "Mrs. Dennis Schulist",
"username": "Leopoldo_Corkery",
"email": "Karley_Dach#jasper.info",
"address": {
"street": "Norberto Crossing",
"suite": "Apt. 950",
"city": "South Christy",
"zipcode": "23505-1337",
"geo": {
"lat": "-71.4197",
"lng": "71.7478"
}
},
"phone": "1-477-935-8478 x6430",
"website": "ola.org",
"company": {
"name": "Considine-Lockman",
"catchPhrase": "Synchronised bottom-line interface",
"bs": "e-enable innovative applications"
}
},
{
"id": 7,
"name": "Kurtis Weissnat",
"username": "Elwyn.Skiles",
"email": "Telly.Hoeger#billy.biz",
"address": {
"street": "Rex Trail",
"suite": "Suite 280",
"city": "Howemouth",
"zipcode": "58804-1099",
"geo": {
"lat": "24.8918",
"lng": "21.8984"
}
},
"phone": "210.067.6132",
"website": "elvis.io",
"company": {
"name": "Johns Group",
"catchPhrase": "Configurable multimedia task-force",
"bs": "generate enterprise e-tailers"
}
},
{
"id": 8,
"name": "Nicholas Runolfsdottir V",
"username": "Maxime_Nienow",
"email": "Sherwood#rosamond.me",
"address": {
"street": "Ellsworth Summit",
"suite": "Suite 729",
"city": "Aliyaview",
"zipcode": "45169",
"geo": {
"lat": "-14.3990",
"lng": "-120.7677"
}
},
"phone": "586.493.6943 x140",
"website": "jacynthe.com",
"company": {
"name": "Abernathy Group",
"catchPhrase": "Implemented secondary concept",
"bs": "e-enable extensible e-tailers"
}
},
{
"id": 9,
"name": "Glenna Reichert",
"username": "Delphine",
"email": "Chaim_McDermott#dana.io",
"address": {
"street": "Dayna Park",
"suite": "Suite 449",
"city": "Bartholomebury",
"zipcode": "76495-3109",
"geo": {
"lat": "24.6463",
"lng": "-168.8889"
}
},
"phone": "(775)976-6794 x41206",
"website": "conrad.com",
"company": {
"name": "Yost and Sons",
"catchPhrase": "Switchable contextually-based project",
"bs": "aggregate real-time technologies"
}
},
{
"id": 10,
"name": "Clementina DuBuque",
"username": "Moriah.Stanton",
"email": "Rey.Padberg#karina.biz",
"address": {
"street": "Kattie Turnpike",
"suite": "Suite 198",
"city": "Lebsackbury",
"zipcode": "31428-2261",
"geo": {
"lat": "-38.2386",
"lng": "57.2232"
}
},
"phone": "024-648-3804",
"website": "ambrose.net",
"company": {
"name": "Hoeger LLC",
"catchPhrase": "Centralized empowering task-force",
"bs": "target end-to-end models"
}
}
]
let table = document.getElementById(`myTable`);
for(let i = 0; i < data.length; i++){
let row = '';
row +='<tr>';
row +='<td>'+data[i].name+'</td>';
row +='<td>'+data[i].email+'</td>';
row +='</tr>';
table.innerHTML += row;
}
}
fetchUserz();
<table>
<thead>
<tr>
<th> Names of People </th>
<th> Emails of People </th>
</tr>
</thead>
<tbody id="myTable">
</tbody>
<tbody id="myTable2">
</tbody>
</table>
const fetchUserz = async() => {
const response = await fetch(`https://jsonplaceholder.typicode.com/users`);
const data = await response.json();
// console.log(data)
for(let i = 0; i < data.length; i++){
let table = document.getElementById(`myTable`);
let row = `<tr>
<td>${data[i].name}</td>
<td>${data[i].email}</td>
</tr>`;
table.innerHTML += row;
}
}
fetchUserz();
I am using angularjs 1.I have a pretty complex json object with a lot of nesting . I want to use ng-repeat on a json to access a nested array.
[{
"information": {
"name": "simdi jinkins",
"phone": "08037775692",
"email": "sim04ful#gmail",
"whatsapp": "8349493420",
"residential": "gwarinpa",
"office": "dansarari plaza"
},
"jobs": [{
"name": "jeans and shirt",
"measurement": {
"shoulder": "34",
"waist": "44",
"neck": "86",
"front": "42",
"length": "33",
"boost": "80",
"cap": "30",
"sleeves": "12",
"tommy": "30",
"thigh": "30",
"chest": "34",
"back": "40"
},
"account": {
"method": "cheque",
"amount": "2334",
"advance": "3945",
"date": "2016-07-22T09:54:06.395Z"
},
"date": {
"incharge": "2016-07-22T09:54:06.395Z",
"collection": "2016-07-22T09:54:06.395Z"
},
"style": "english",
"material": "our"
}, {
"name": "skirt and blouse",
"measurement": {
"shoulder": "35",
"waist": "45",
"neck": "85",
"front": "52",
"length": "53",
"boost": "85",
"cap": "50",
"sleeves": "52",
"tommy": "50",
"thigh": "35",
"chest": "35",
"back": "50"
},
"account": {
"method": "cheque",
"amount": "2334",
"advance": "5045",
"date": "2016-07-22T09:54:06.395Z"
},
"date": {
"incharge": "2016-07-22T09:54:06.395Z",
"collection": "2016-07-22T09:54:06.395Z"
},
"style": "native",
"material": "bought"
}]
}, {
"information": {
"name": "Paula Odama",
"phone": "08034698692",
"email": "paulyd#gmail",
"whatsapp": "8348733420",
"residential": "inpa",
"office": "dansaza"
},
"jobs": [{
"name": "gown",
"measurement": {
"shoulder": "74",
"waist": "44",
"neck": "76",
"front": "42",
"length": "73",
"boost": "80",
"cap": "37",
"sleeves": "72",
"tommy": "30",
"thigh": "70",
"chest": "37",
"back": "70"
},
"account": {
"method": "cheque",
"amount": "2334",
"advance": "3945",
"date": "2016-07-22T09:54:06.395Z"
},
"date": {
"incharge": "2016-07-22T09:54:06.395Z",
"collection": "2016-07-22T09:54:06.395Z"
},
"style": "english",
"material": "our"
}, {
"name": "robes",
"measurement": {
"shoulder": "35",
"waist": "45",
"neck": "85",
"front": "52",
"length": "53",
"boost": "85",
"cap": "50",
"sleeves": "52",
"tommy": "50",
"thigh": "35",
"chest": "35",
"back": "50"
},
"account": {
"method": "cheque",
"amount": "2334",
"advance": "5045",
"date": "2016-07-22T09:54:06.395Z"
},
"date": {
"incharge": "2016-07-22T09:54:06.395Z",
"collection": "2016-07-22T09:54:06.395Z"
},
"style": "native",
"material": "bought"
}]
}];
i am trying to access the name property in jobs i have tried the following
<div ng-repeat="customer in customers" class="card rich-card" z="2">
<div class="card-hero" style="">
<h1>{{customer.jobs.name}} <span>{{}}</span> </h1>
</div>
<div class="divider"></div>
<div class="card-footer">
<button class="button flat">View</button>
<button class="button flat color-orange-500">Explore</button>
</div>
</div>
Because customer.jobs is an array, you must access it using and index or key.
In your example, the way to do this would be using customer.jobs[0].name.
The resulting HTML would like this:
<div ng-repeat="customer in customers" class="card rich-card" z="2">
<div class="card-hero" style="">
<div data-ng-repeat="job in customer.jobs">
<h1>{{job.name}} <span>{{}}</span> </h1>
</div>
</div>
<div class="divider"></div>
<div class="card-footer">
<button class="button flat">View</button>
<button class="button flat color-orange-500">Explore</button>
</div>
</div>
UPDATE
It's an array of customers, with each containing an array of jobs. As such, you need a double repeater to cycle through the first AND second array.
UPDATE 2
I figured you might want a 'card' per job a customer has, that code would be as follows:
<div data-ng-repeat="customer in customers">
<div ng-repeat="job in customer.jobs" class="card rich-card" z="2">
<div class="card-hero" style="">
<h1>{{job.name}} <span>{{}}</span> </h1>
</div>
<div class="divider"></div>
<div class="card-footer">
<button class="button flat">View</button>
<button class="button flat color-orange-500">Explore</button>
</div>
</div>
</div>
You did not explicitly say that your array is called customers, so I am assuming that it is.
You have an array of customers, and each customer has one or more jobs. If you want to display the name of ALL jobs for each customer, you need to use nested ng-repeats. I'm not sure which part of your UI you want to repeat but I'm just going with the 'card-hero' div.
<div ng-repeat="customer in customers" class="card rich-card" z="2">
<h1>{{customer.information.name}}</h1>
<div ng-repeat="job in customer.jobs" class="card-hero" style="">
<h2>{{job.name}} <span>{{}}</span> </h2>
</div>
<div class="divider"></div>
<div class="card-footer">
<button class="button flat">View</button>
<button class="button flat color-orange-500">Explore</button>
</div>
</div>
EDIT: added h1 customer name, and changed job name to h2, to show that each job under each customer is displayed
A carousel say "Cr1" is displaying the category. I have another carousel beneath it say "Cr2" which is displaying the products based on the category clicked from "Cr1". The value for both are populated from a single JSON. Now my problem is I am unable to display the product in the "Cr2". Need help with that
/**
* Created by Sneha_Subhash on 6/10/2016.
*/
var myApp = angular.module('myApp', []);
myApp.controller("MasterDetailCtrl", function($scope, $http) {
$scope.categoryList = [{
"id": "1",
"name": "Banking",
"productList": [{
"productId": "x10001",
"productName": "Direct Deposit",
"categoryid": {
"id": "1",
"name": "banking"
},
"productURL": "http://bankonsanfrancisco.com/why",
"productDesc": "High drama ensued after the emergency landing of a Mangaluru-bound " +
"Jet Airways flight that took off from Kempegowda International Airport (KIA) on Wednesday morning. Fortunately, " +
"none of the passengers or crew members were injured. They were all evacuated to safety.The flight made an emergency" +
" landing at KIA 15 minutes after the take off after smoke was detected in the cabin and an engine caught up in flames. " +
"Jet Airways said that the flight then came back to KIA for an emergency landing. Soon after landing, the Aircraft Rescue and Fire-fighting Team at KIA rushed to the aircraft and evacuated all the 65 passengers and four crew members on board.Ajeet Khare, Managing Director, Canara Lightings, Mangaluru, was one of the passengers, who was flying with his wife.",
"createddate": "9\/18\/1996",
"updateddate": "9\/18\/2015",
"documents": [{
"link1": "url1",
"link2": "url2",
"link3": "url3"
}],
"videos": [{
"link1": "url1",
"link2": "url2"
}],
"screenshot": [{
"link1": "img1",
"link2": "img2"
}],
"bgimage": "https://images.unsplash.com/photo-1462146449396-2d7d4ba877d7?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=c219903b4e38c5b8109e11a3d33b9748"
}, {
"productId": "x10002",
"productName": "Individual Banking",
"categoryid": {
"id": "1",
"name": "banking"
},
"productURL": "https://www.google.co.in/search?sourceid=chrome-psyapi2&ion=1&espv=2&ie=UTF-8&q=individual%20banking&oq=individual%20banking&aqs=chrome..69i57j0l5.4255j0j7",
"productDesc": "Short Desc",
"createddate": "9\/18\/1996",
"updateddate": "9\/18\/2015",
"documents": [{
"link1": "url1",
"link2": "url2",
"link3": "url3"
}],
"videos": [{
"link1": "url1",
"link2": "url2"
}],
"screenshot": [{
"link1": "img1",
"link2": "img2"
}],
"bgimage": "https://images.unsplash.com/photo-1462726625343-6a2ab0b9f020?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=eb6506972ee7685166b2d8b649d29a1b"
}, {
"productId": "x10003",
"productName": "Business Banking",
"categoryid": {
"id": "1",
"name": "banking"
},
"productURL": "http://bankonsanfrancisco.com/why",
"productDesc": "Short Desc",
"createddate": "9\/18\/1996",
"updateddate": "9\/18\/2015",
"documents": [{
"link1": "url1",
"link2": "url2",
"link3": "url3"
}],
"videos": [{
"link1": "url1",
"link2": "url2"
}],
"screenshot": [{
"link1": "img1",
"link2": "img2"
}],
"bgimage": "https://images.unsplash.com/photo-1462910211773-a9847b1f0e40?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=600fdca8f6340569864d4f94f5f9dfc1"
}, {
"productId": "x10004",
"productName": "Digital Banking",
"categoryid": {
"id": "1",
"name": "banking"
},
"productURL": "https://localfirstbank.com/business/",
"productDesc": "Online banking, also known as internet banking, e-banking or virtual banking, is an electronic payment system that enables customers of a bank or other financial institution to conduct a range of financial transactions through the financial institution's website. The online banking system will typically connect to or be part of the core banking system operated by a bank and is in contrast to branch banking which was the traditional way customers accessed banking services. Fundamentally and in mechanism, online banking, internet banking and e-banking are the same thing.",
"createddate": "9\/20\/1996",
"updateddate": "1\/20\/2015",
"documents": [{
"link1": "url1",
"link2": "url2",
"link3": "url3"
}],
"videos": [{
"link1": "url1",
"link2": "url2"
}],
"screenshot": [{
"link1": "img1",
"link2": "img2"
}],
"bgimage": "https://images.unsplash.com/photo-1464054313797-e27fb58e90a9?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=576bb45620043f729baef96301c9acb6"
}]
}, {
"id": "2",
"name": "Insurance",
"productList": [{
"productId": "x10005",
"productName": "Embee Ins. Brokers Ltd.",
"categoryid": {
"id": "2",
"name": "Insurance"
},
"productURL": "http://www.embeegroup.in/",
"productDesc": "Embee Financial Services Ltd. is an integrated 'Niche' financial services group that provides full range of corporate advisory services to its clients. The services provided include one stop solution to the Corporate & SMEs in areas of Corporate Finance & Investment Banking, Management Consulting, Wealth Management, Legal & Statutory services & Insurance Broking.",
"createddate": "9\/20\/1896",
"updateddate": "1\/20\/2014",
"documents": [{
"link1": "url1",
"link2": "url2",
"link3": "url3"
}],
"videos": [{
"link1": "url1",
"link2": "url2"
}],
"screenshot": [{
"link1": "img1",
"link2": "img2"
}],
"bgimage": "https://images.unsplash.com/photo-1464400694175-33544b41703d?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=680f4a54596d9fa9f20a029e297b1360"
}, {
"productId": "x10006",
"productName": "Excellent Insurance Broking Services Ltd.",
"categoryid": {
"id": "2",
"name": "Insurance"
},
"productURL": "http://www.excellentinsurancebroking.com/",
"productDesc": "Excellent Insurance Broking Services Ltd is one of the leading insurance broking firms that operate on both direct and reinsurance broking licenced & regulated by IRDAI. Backed by more than a decade of experience and a team of highly qualifiedand professionals from Insurance, Reinsurance, Engineering, Finance, Medicine, IT,Legal and Investigation fields. We are based in Hyderabad, India, with a branch in Bangalore is positioned to handle all insurance and reinsurance requirements through exclusive networks of national and international associates and underwriters. We give innovative solutions with highest competence. EIBSL works closely with insurers to negotiate competitive rates to meet the needs of both existing and potential clients.",
"createddate": "9\/20\/1996",
"updateddate": "1\/20\/2015",
"documents": [{
"link1": "url1",
"link2": "url2",
"link3": "url3"
}],
"videos": [{
"link1": "url1",
"link2": "url2"
}],
"screenshot": [{
"link1": "img1",
"link2": "img2"
}],
"bgimage": "https://images.unsplash.com/photo-1465152251391-e94453ee3f5a?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=2f3699fc4dbc682fbecdc4fa4d5f6cad"
}]
}, {
"id": "3",
"name": "Automobile",
"productList": [{
"productId": "x10007",
"productName": "Ford Model T",
"categoryid": {
"id": "3",
"name": "Automobile"
},
"productURL": "https://en.wikipedia.org/wiki/Ford_Model_T",
"productDesc": "The first car to achieve one million, five million, ten million and fifteen million units sold. By 1914, it was estimated that nine out of every ten cars in the world were Fords",
"createddate": "9\/20\/1908",
"updateddate": "1\/20\/2015",
"documents": [{
"link1": "url1",
"link2": "url2",
"link3": "url3"
}],
"videos": [{
"link1": "url1",
"link2": "url2"
}],
"screenshot": [{
"link1": "img1",
"link2": "img2"
}],
"bgimage": "http:\/\/www.pmbl-ng.com\/images\/about.jpg"
}, {
"productId": "x10008",
"productName": "Volkswagen Beetle",
"categoryid": {
"id": "3",
"name": "Automobile"
},
"productURL": "https://en.wikipedia.org/wiki/Volkswagen_Beetle",
"productDesc": "The need for this kind of car, and its functional objectives, were formulated by Joseph Ganz, an engineer whose ideas influenced Adolf Hitler after he saw the car at an auto show. The leader of Nazi Germany wished for a cheap, simple car to be mass-produced for the new road network of his country. He contracted Ferdinand Porsche in 1934 to design and build it, after telling him in 1933 ",
"createddate": "9\/20\/1938",
"updateddate": "1\/20\/2015",
"documents": [{
"link1": "url1",
"link2": "url2",
"link3": "url3"
}],
"videos": [{
"link1": "url1",
"link2": "url2"
}],
"screenshot": [{
"link1": "http://images.unsplash.com/photo-1454447170982-596ddff4606a?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=98aa2bb815b9839f16822ecdd38e28ae",
"link2": "http://images.unsplash.com/photo-1452215199360-c16ba37005fe?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=408c70a6e88b50949c51e26424ff64f3"
}],
"bgimage": "http://images.unsplash.com/photo-1459902552792-28b7925b06c2?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=999e6d0ae0e189e1959b31677f5a9848"
}, {
"productId": "x10009",
"productName": "Toyota Corolla",
"categoryid": {
"id": "3",
"name": "Automobile"
},
"productURL": "https://en.wikipedia.org/wiki/Toyota_Corolla",
"productDesc": "The Toyota Corolla is a line of subcompact and compact cars manufactured by Toyota. Introduced in 1966, the Corolla was the best-selling car worldwide by 1974[1] and has been one of the best-selling cars in the world since then. In 1997, the Corolla became the best selling nameplate in the world, surpassing the Volkswagen Beetle.[2] Toyota reached the milestone of 40 million Corollas sold over eleven generations in July 2013.[3] The series has undergone several major redesigns. The name Corolla is part of Toyota's naming tradition of using names derived from the Toyota Crown for sedans. The Corolla has always been exclusive in Japan to Toyota Corolla Store locations, and manufactured in Japan with a twin, called the Toyota Sprinter until 2000. In Japan and much of the world, the hatchback companion since 2006 is called the Toyota Auris. Prior to the Auris, Toyota used the Corolla name on the hatchback bodystyle in various international markets.",
"createddate": "9\/20\/1966",
"updateddate": "1\/20\/2015",
"documents": [{
"link1": "url1",
"link2": "url2",
"link3": "url3"
}],
"videos": [{
"link1": "url1",
"link2": "url2"
}],
"screenshot": [
"http://images.unsplash.com/photo-1427464407917-c817c9a0a6f6?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=812662922febc6b1006719224d6c3772",
"http://images.unsplash.com/photo-1452215199360-c16ba37005fe?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=408c70a6e88b50949c51e26424ff64f3"
],
"bgimage": "http://images.unsplash.com/photo-1436262513933-a0b06755c784?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=0b6cf0f2bd64f9788f12b2b43c959c11"
}]
}
];
$scope.selectedProduct = $scope.categoryList[0].productList[0].productId;
// $scope.productId = $scope.selectedProduct.productId;
$scope.selectedCategory = $scope.categoryList[0].id;
$scope.selectProduct = function(val) {
//$scope.selectedProduct = val;
$scope.selectedCategory = val;
$scope.loadProducts();
}
$scope.loadProducts = function() {
$scope.listOfProducts = null;
// $scope.listOfProducts = $scope.selectedProduct;
$scope.listOfProducts = $scope.selectedCategory;
}
});
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="carousel.js"></script>
<style>
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
width: 100%;
margin: auto;
}
.carousel-inner{
height: 500px;
}
/* .scrolls {
overflow-x: scroll;
overflow-y: hidden;
height: 80px;
white-space:nowrap
}*/
</style>
</head>
<body ng-controller="MasterDetailCtrl" class="w3-container">
<div class="container">
<br>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="images/vase.jpg" alt="Chania" width="460" height="300">
<div class="carousel-caption">
<h3>Vase</h3>
<p>The atmosphere in Chania has a touch of Florence and Venice.</p>
</div>
</div>
<div class="item">
<img src="images/shell.jpg" alt="Chania" width="460" height="300">
<div class="carousel-caption">
<h3>Sea Shell</h3>
<p>The atmosphere in Chania has a touch of Florence and Venice.</p>
</div>
</div>
<div class="item">
<img src="images/turtle.jpg" alt="Flower" width="460" height="300">
<div class="carousel-caption">
<h3>Turtle</h3>
<p>The atmosphere in Chania has a touch of Florence and Venice.</p>
</div>
</div>
<div class="item">
<img src="images/elephant.jpg" alt="Flower" width="460" height="300">
<div class="carousel-caption">
<h3>Elephant</h3>
<p>The atmosphere in Chania has a touch of Florence and Venice.</p>
</div>
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<div class="well text-center">
Purposeful AI, when applied to the enterprise, can unlock human potential and amplify people’s ability to do more. To realize this, organizations need to be able to do three things: manage organizational knowledge, apply it to automate enterprise processes, and utilize the massive intelligence hidden away in systems, machines and people.
Infosys Mana is a knowledge-based AI platform. It brings machine learning together with the deep knowledge of an organization to drive automation and innovation. This enables businesses to continuously reinvent their system landscapes. Mana, with the Infosys AiKiDo service offerings, dramatically lowers the cost of maintenance for both physical and digital assets. It captures the knowledge and know-how of people across fragmented and complex systems, and simplifies the continuous renovation of core business processes. Mana also enables businesses to bring new, delightful user experiences leveraging state-of-the-art technology.
</div>
<div class="well">
<header>
<ul class="nav nav-pills nav-justified scrolls">
<li data-target="#myCarousel" data-slide-to="0" class="active">
About<small>Lorem ipsum dolor sit</small>
</li>
<li ng-repeat="category in categoryList"><a href="#"><i class="fa fa-home" ng-click="selectproduct(category);"></i>
{{category.name}}</a>
</li>
</ul>
</header>
<div class = "well" id ="productDetails">
<div class="productCard">
<div class="w3-card-4" style="width:30%;" ng-repeat="product in categoryList.productList"-->
<header class="w3-container w3-blue">
<h1>Header{{product.productName}}</h1>
</header>
<div class="w3-container">
<p>{{product.productDesc}}</p>
<p><button class="w3-btn w3-dark-grey">Button</button></p>
</div>
<footer class="w3-container w3-blue">
<h5> <a ng-href="{{selectedProduct.productURL}}">{{selectedProduct.productURL}}</a></h5>
</footer>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
check this , your question is unclear , in this fix the carousel please check
https://plnkr.co/edit/tJKid1pCREnRP9iMvP2n?p=preview
add your css
.carousel-caption {
position: inherit !important;
right: 0 !important;
bottom: 0 !important;
left: 0 !important;
}
my html code is below for reviewans page :-
<div class="all_ques_back col-md-12" ng-init="result()" ng-repeat="ans in correctAns">
<div class="col-xs-1 col-md-1"><i class="fa fa-check-square fa-2x col_padd right_ans_font"></i></div>
<div class="col-xs-9 col-md-10 col_padd">
<div class="all_ques">hello your ans {{ans}}</div>
</div>
<div class="col-xs-1 col-md-1 col_padd"><i class="fa fa-angle-right right_arrow "></i></div>
and my controller code is like :-
var data = angular.module('App', ['ngRoute']);
data.controller('SmartLearnerController', function($scope, $location) {
$scope.result = function() {
$scope.correctAns = [{
"QuestionID": "1",
"QuestionLabel": "Why are mirrors often slightly curved (convex) ?",
"Image": "zibra-crossing.jpg",
"Correct": "two",
"Explaination": "Question one explaination is goes here"
}, {
"QuestionID": "2",
"QuestionLabel": "You are about to drive home. You feel very tired and have a severe headache. You should ?",
"Image": "",
"Correct": "one",
"Explaination": "Question two explaination is goes here"
}, {
"QuestionID": "3",
"QuestionLabel": "While you are driving on gra dient roads,you should ?",
"Image": "sign traffic.jpg",
"Correct": "one",
"Explaination": "Question three explaination is goes here"
}, {
"QuestionID": "4",
"QuestionLabel": "When child lock is applied in car ?",
"Image": "",
"Correct": "two",
"Explaination": "Question four explaination is goes here"
}]
$location.path("/reviewans");
}
});
Please check working example : DEMO
Just move ng-init to above tag
i.e
<body ng-controller="MainCtrl" ng-init="result()" >
<div class="all_ques_back col-md-12" ng-repeat="ans in correctAns">
<div class="col-xs-1 col-md-1"><i class="fa fa-check-square fa-2x col_padd right_ans_font"></i></div>
<div class="col-xs-9 col-md-10 col_padd">
<div class="all_ques">hello your ans {{ans}}</div>
</div>
<div class="col-xs-1 col-md-1 col_padd"><i class="fa fa-angle-right right_arrow "></i></div>
</div>
#Nimesh i moved ng-init to ng-controller div and changed {{ans}} to {{ans.QuestionLabel}}
Html :-
<div ng-app="myApp" ng-controller="Ctrl" ng-init="result()">
<div class="all_ques_back col-md-12" ng-repeat="ans in correctAns">
<div class="col-xs-1 col-md-1"><i class="fa fa-check-square fa-2x col_padd right_ans_font"></i></div>
<div class="col-xs-9 col-md-10 col_padd">
<div class="all_ques">hello your ans {{ans.QuestionLabel}}</div>
</div>
<div class="col-xs-1 col-md-1 col_padd"><i class="fa fa-angle-right right_arrow "></i></div>
</div>
Js :-
var myAngApp = angular.module('myApp', []);
myAngApp.controller('Ctrl', function ($scope) {
$scope.result = function () {
$scope.correctAns = [{
"QuestionID": "1",
"QuestionLabel": "Why are mirrors often slightly curved (convex) ?",
"Image": "zibra-crossing.jpg",
"Correct": "two",
"Explaination": "Question one explaination is goes here"
}, {
"QuestionID": "2",
"QuestionLabel": "You are about to drive home. You feel very tired and have a severe headache. You should ?",
"Image": "",
"Correct": "one",
"Explaination": "Question two explaination is goes here"
}, {
"QuestionID": "3",
"QuestionLabel": "While you are driving on gra dient roads,you should ?",
"Image": "sign traffic.jpg",
"Correct": "one",
"Explaination": "Question three explaination is goes here"
}, {
"QuestionID": "4",
"QuestionLabel": "When child lock is applied in car ?",
"Image": "",
"Correct": "two",
"Explaination": "Question four explaination is goes here"
}]
$location.path("/reviewans");
};
});
Output :-
Here, the problem is with directive priority, ng-repeat having higher priority over ng-init, ng-init having priority=450, where as ng-repeat having priority=1000 (Refer angular source code). So technically ng-repeat gets executed before ng-init so correctAns is empty.
You can either move ng-init one level up into HTML or to ng-controller tag.
OR/ELSE
If you are trying to run something while your controller loads, it's actually much simpler than you thought:
var myAngApp = angular.module('myApp', []);
myAngApp.controller('Ctrl', function ($scope) {
$scope.result = function () {
$scope.correctAns = [{
"QuestionID": "1",
"QuestionLabel": "Why are mirrors often slightly curved (convex) ?",
"Image": "zibra-crossing.jpg",
"Correct": "two",
"Explaination": "Question one explaination is goes here"
}, {
"QuestionID": "2",
"QuestionLabel": "You are about to drive home. You feel very tired and have a severe headache. You should ?",
"Image": "",
"Correct": "one",
"Explaination": "Question two explaination is goes here"
}, {
"QuestionID": "3",
"QuestionLabel": "While you are driving on gra dient roads,you should ?",
"Image": "sign traffic.jpg",
"Correct": "one",
"Explaination": "Question three explaination is goes here"
}, {
"QuestionID": "4",
"QuestionLabel": "When child lock is applied in car ?",
"Image": "",
"Correct": "two",
"Explaination": "Question four explaination is goes here"
}]
$location.path("/reviewans");
};
$scope.result();
});
I'm using bootstrap v3
the process works fine without using js template , once I'm using handelbars , the previous button will crash and throw error ( Uncaught TypeError: Cannot read property 'slice' of undefined ) with index position is 0 I guess
the problem occur while transition from the first element to the last element using previous button of course , the 'active class is lost somewhere'
could anyone help
here is my html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
</head>
<body>
<div id="carouselWrap" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carouselWrap" data-slide-to="0" class="active"></li>
<li data-target="#carouselWrap" data-slide-to="1"></li>
<li data-target="#carouselWrap" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<script id="template" type="text/x-handlebars-template">
{{#each this}}
{{#if counter}}
<div class="item active">
{{else}}
<div class="item ">
{{/if}}
<table>
<tbody>
<tr>
<td> {{product1.name}} {{decode product1.surname}}</td>
<td>{{price product1.lastprice}} </td>
<td>{{decodeproduct1.supplier}} </td>
<td>{{product1.nation}} </td>
<td>{{product1.sport}} </td>
<td>{{product1.divStart}} - {{product1.divEnd}} </td>
<td>{{{decode product1.divScenarioGood}}}</td>
<td>link</td>
</tr>
<tr>
<td>{{product2.name}} {{decode product2.surname}}</td>
<td>{{price product2.lastprice}} </td>
<td>{{decode product2.supplier}} </td>
<td>{{product2.nation}} </td>
<td>{{product2.sport}} </td>
<td>{{product2.divStart}} - {{product1.divEnd}} </td>
<td>{{decode product2.divScenarioGood}}</td>
<td>link</td>
</tr>
</tbody>
</table>
</div>
{{/each}}
</script>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carouselWrap" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carouselWrap" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="http://cloud.github.com/downloads/wycats/handlebars.js/handlebars-1.0.0.beta.6.js"></script>
<script>
(function() {
var Hbs = {
init: function( config ) {
this.url = config.url;
this.container = config.container;
this.template = config.template;
this.fetch();
},
fetch: function() {
var self = this;
$.getJSON( self.url, function( data ) {
var template = Handlebars.compile( self.template );
Handlebars.registerHelper('toLowerCase', function(str) {
return str.toLowerCase();
});
Handlebars.registerHelper('price', function(val) {
return Math.round(val);
});
Handlebars.registerHelper('elmId', function(id) {
return id;
});
Handlebars.registerHelper('decode', function(str) {
try{
return decodeURIComponent(escape(str));
}catch(e){
// catch the error
console.log(e.message);
}
});
var positionCounter = 0;
Handlebars.registerHelper('counter', function() {
positionCounter++;
if (positionCounter == 1 )
return positionCounter;
else
return false;
});
self.container.append( template( data ) );
});
}
}
Hbs.init({
url : 'athletes.json',
container: $('.carousel-inner'),
template: $('#template').html()
});
})();
</script>
</body>
</html>
athletes.json
[
{
"#class": "com.tradeinsports.domain.product.ProductPair",
"product1": {
"#class": "com.tradeinsports.domain.product.ProductSubset",
"name": "Alexander",
"surname": "Bj\u00c3\u00b6rk",
"shortname": "A Bj\u00c3\u00b6rk",
"sport": "Golf",
"nation": "Sweden",
"supplier": "V\u00c3\u00a4xj\u00c3\u00b6 GK",
"status": "Locked",
"lastprice": 50.497987979,
"divStart": "2012-07-19",
"divEnd": "2013-12-25",
"contractType": "Travprodukt standard",
"divScenarioGood": "Topp 10 p\u00c3\u00a5 European tour 2016\r\n",
"divScenarioGoodRevenue": -10000,
"smallImage": "litenNyBjork.jpg"
},
"product2": {
"#class": "com.tradeinsports.domain.product.ProductSubset",
"name": "Felix",
"surname": "Rosenqvist",
"shortname": "F Rosenqvist",
"sport": "Motor",
"nation": "Sweden",
"supplier": "Mercedes",
"status": "Locked",
"lastprice": 100,
"divStart": "2012-12-29",
"divEnd": "2021-02-24",
"contractType": "Motor standard",
"divScenarioGood": "4 s\u00c3\u00a4songer i Formel 1 fram till 2021\r\n",
"divScenarioGoodRevenue": 12960,
"smallImage": "FelixFarg.jpg"
}
},
{
"#class": "com.tradeinsports.domain.product.ProductPair",
"product1": {
"#class": "com.tradeinsports.domain.product.ProductSubset",
"name": "sabri",
"surname": "zouari",
"shortname": "Wild Life",
"sport": "Trotting",
"nation": "Sweden",
"supplier": "R Bj\u00c3\u00b6rkroth",
"status": "Locked",
"lastprice": 200,
"divStart": "2014-04-16",
"divEnd": "2016-05-14",
"contractType": "Travprodukt standard",
"divScenarioGood": "2.000.000 i insprugna prispengar + 5.000.000 fr\u00c3\u00a5n f\u00c3\u00b6rs\u00c3\u00a4ljning\r\n",
"divScenarioGoodRevenue": 27900,
"smallImage": "wildLifeProd2.jpg"
},
"product2": {
"#class": "com.tradeinsports.domain.product.ProductSubset",
"name": "Rasmus",
"surname": "Lindh",
"shortname": "R Lindh",
"sport": "Motor",
"nation": "Sweden",
"supplier": "Captimax",
"status": "Locked",
"lastprice": 100,
"divStart": "2019-01-01",
"divEnd": "2029-12-15",
"contractType": "Motor Total",
"divScenarioGood": "10 s\u00c3\u00a4songer i Formel 1 fram till 2029\r\n",
"divScenarioGoodRevenue": 4840,
"smallImage": "rasmusSmallSyst.jpg"
}
},
{
"#class": "com.tradeinsports.domain.product.ProductPair",
"product1": {
"#class": "com.tradeinsports.domain.product.ProductSubset",
"name": "Andreas",
"surname": "Siljestr\u00c3\u00b6m",
"shortname": "A Siljestr\u00c3\u00b6m",
"sport": "Tennis",
"nation": "Sweden",
"supplier": "KLTK",
"status": "Market",
"lastprice": 100,
"divStart": "2013-12-01",
"divEnd": "2016-12-01",
"contractType": "Tennis",
"divScenarioGood": "Topp 10 ATP dubbelranking 2016\r\n",
"divScenarioGoodRevenue": 1050,
"smallImage": "siljestromLiten.jpg"
},
"product2": {
"#class": "com.tradeinsports.domain.product.ProductSubset",
"name": "Gabriel",
"surname": "Axell",
"shortname": "G Axell",
"sport": "Golf",
"nation": "Sweden",
"supplier": "Vadstena GK",
"status": "Market",
"lastprice": 100,
"divStart": "2014-04-15",
"divEnd": "2018-04-15",
"contractType": "Travprodukt standard",
"divScenarioGood": "Topp 10 p\u00c3\u00a5 Europatouren 2017",
"divScenarioGoodRevenue": 1990,
"smallImage": "litenGabbeSyst.jpg"
}
}
]
I have had the same problem with Django template system but i solved rewriting the if statement like this (assuming that counter starts in 1)
{{#if counter = 1}}
<div class="item active">
{{else}}
<div class="item ">
{{/if}}
I had the same problem and did looking for solution several hour, but it was ... little mistake - my controls was in div class="item" inside.))) Be sure that controls are outside couresel's item