Integrate JSON + Javascript inside website template - javascript

I am creating online resume with a free template I downloaded.
This template uses bootstrap and displays a progress-bar of my skills.
But now I would like these skills to be changed dynamically using JSON.
I created my file :
var Skills = [
{
"title": "Skill 1",
"description": "Skill 1 description",
"value": 100
},
{
"title": "Skill 2",
"description": "Skill 2 description",
"value": 100
}];
So it's easy to display it but I would like to format it using the template.
This is an example from the template :
<div class="progress-item">
<span class="progress-title">Skill 1</span>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="62" aria-valuemin="0" aria-valuemax="100" style="width: 62%"><span class="progress-percent"> 62%</span>
</div>
</div>
</div>
How to do make title from JSON be linked to class="progress-title"
I did a fiddle : https://jsfiddle.net/de6f9qwo/37/
Thanks in advance for the help !
progress-bar preview

you asked very general question with many different answers,
but the answer to your problem with your open div is something like this :
var Skills = [
{
"title": "Skill 1",
"description": "Skill 1 description",
"value": 100
},
{
"title": "Skill 2",
"description": "Skill 2 description",
"value": 100
}];
$.each(Skills, function (title, val) {
var $div_item = $('<div class="progress-item"></div>');
$div_item.append("<span class='progress-title'>" + val.title + "</span>");
$('.progress-wrapper').append($div_item);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="progress-wrapper"></div>
but the real solution for templating is rather a good library like these
https://www.creativebloq.com/web-design/templating-engines-9134396
or read this JavaScript equivalent to printf/string.format to make a proper way of doing it manually.

Related

How can i load a set number of rows from a table on pageload and only load further rows when the user loads them?

I have a table using DataTables , it contains a large number of rows and so this causes the page to load very slowly as i assume the browser waits till the table is filled before displaying the page.
I would like to only load one page of the table (10 rows), and only show further data when the user browses through the table, showing a loading sign would be great too.
I have researched and heard of a DataTables function called 'deferRender' which is supposed to do what i need, but i can't get it to work with my table.
My table has 8 columns + the html is generated using PHP that builds the table from data in a text file:
<?php
$tdcount = 1; $numtd = 8; // number of cells per row
$str = "<table id=\"table1\" class=\"table1 table table-striped table-bordered\">
<thead>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
<th>6</th>
<th>7</th>
<th>8</th>
</thead>
<tbody>
";
$f = fopen("tabledata.txt", "r");
if ( $f === FALSE ) {
exit;
}
while (!feof($f)) {
$arrM = explode(",",fgets($f));
$row = current ( $arrM );
if ($tdcount == 1)
$str .= "<tr>"; $str .= "<td>$row </td>";
if ($tdcount == $numtd) {
$str .= "</tr>";
$tdcount = 1;
} else {
$tdcount++;
}
}
if ($tdcount!= 1) {
while ($tdcount <= $numtd) {
$str .= "<td> </td>"; $tdcount++;
} $str .= "</tr>";
}
$str .= "</tbody></table>";
echo $str;
I then use the following code to turn it into a datatable:
<script>
$(document).ready(function() {
$('#table1').basictable({
forceResponsive: false
});
$('#table1').DataTable( { "order": [[ 0, "desc" ]] } );
});
</script>
I have read the instructions here: https://datatables.net/examples/server_side/defer_loading.html
and know i need to add parameters to the JS:
"processing": true,
"serverSide": true,
"ajax": "scripts/server_processing.php",
"deferLoading": 57
and use a server_processing script, however the example only shows how to use it when connecting to a DB, and not when the data is loaded from a text file with php.
How can i acheive this?
This will focus purely on the DataTables aspects of a "server-side" solution. How you write the server-side logic needed to support it is out of scope for this answer. But I hope these notes will at leasst clarify what that logic needs to be, and how you can approach it.
Assumptions
Assume you have a text file containing 1,000 rows of data like this (or a million - but too many rows to send to the browser and to DataTables, all at once). The text file is a simple pipe-delimited file, with three fields:
id|name|description
1|widget_1|This is a description for widget 1
2|widget_2|This is a description for widget 2
3|widget_3|This is a description for widget 3
...
1000|widget_1000|This is a description for widget 1000
You want to send 10 items at a time to DataTables, using server-side processing.
Your data maps to a simple JSON structure, like this - an array of objects (each object is one record):
[
{
"id": 1,
"name": "widget_1",
"description": "This is a description for widget 1"
},
{
"id": 2,
"name": "widget_2",
"description": "This is a description for widget 2"
},
... // more records...
]
The DataTable Definition
Your datatable definition looks like this - it is deliberately very simple, at this stage:
<body>
<div style="margin: 20px;">
<table id="demo" class="display dataTable cell-border" style="width:100%">
</table>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('#demo').DataTable({
serverSide: true,
ajax: {
url: 'http://localhost:7000/data',
type: 'POST'
},
columns: [
{ title: 'ID',
data: 'id' },
{ title: 'Name',
data: 'name' },
{ title: 'Description',
data: 'description' }
]
});
});
</script>
</body>
Initial Response
When the web page is first displayed, it will send an initial POST request to the URL (http://localhost:7000/data), and it will expect to receive a JSON response from the web server, containing the data to be displayed.
Because DataTables is using serverSide: true, DataTables will expect the JSON to have a specific structure, as described here.
Specifically, the server has to add all of the mandatory fields (draw, recordsTotal, recordsFiltered, and data) to the JSON it sends to DataTables.
In our case it would look like this - note that it is just our previously mentioned JSON structure, with a few extra metadata fields added:
{
"draw": 1,
"recordsTotal": 1000,
"recordsFiltered": 1000,
"data": [{
"id": 1,
"name": "widget_1",
"description": "This is a description for widget 1"
}, {
"id": 2,
"name": "widget_2",
"description": "This is a description for widget 2"
}, {
"id": 3,
"name": "widget_3",
"description": "This is a description for widget 3"
}, {
"id": 4,
"name": "widget_4",
"description": "This is a description for widget 4"
}, {
"id": 5,
"name": "widget_5",
"description": "This is a description for widget 5"
}, {
"id": 6,
"name": "widget_6",
"description": "This is a description for widget 6"
}, {
"id": 7,
"name": "widget_7",
"description": "This is a description for widget 7"
}, {
"id": 8,
"name": "widget_8",
"description": "This is a description for widget 8"
}, {
"id": 9,
"name": "widget_9",
"description": "This is a description for widget 9"
}, {
"id": 10,
"name": "widget_10",
"description": "This is a description for widget 10"
}]
}
It is the server's responsibility to build this JSON - the first 10 records of the server's data set. The server also tells DataTables that it has a total of 1,000 records, and that it has not filtered out any data (yet) - hence there are also a total of 1,000 records after filtering.
DataTables needs all of this information, so it knows how many pagination buttons to display, and what pagination data to show.
Note that it is entirely the server's responsibility to do all this work - that's why it's called "server-side" processing.
The client (browser) only has 10 records to render - so that happens quickly.
(I just noticed that the screenshot mentions "500 records" - that's a mistake in my server-side code - there is no filter, so I need to fix that).
Subsequent Requests
When a user clicks on a page navigation button (e.g. page "4"), that triggers a new request from DataTables to the server. DataTables builds this request automatically, using the fields described here.
The request is sent as form data.
In our example, the request looks like this:
"Form data": {
"draw": "5",
"columns[0][data]": "id",
"columns[0][name]": "",
"columns[0][searchable]": "true",
"columns[0][orderable]": "true",
"columns[0][search][value]": "",
"columns[0][search][regex]": "false",
"columns[1][data]": "name",
"columns[1][name]": "",
"columns[1][searchable]": "true",
"columns[1][orderable]": "true",
"columns[1][search][value]": "",
"columns[1][search][regex]": "false",
"columns[2][data]": "description",
"columns[2][name]": "",
"columns[2][searchable]": "true",
"columns[2][orderable]": "true",
"columns[2][search][value]": "",
"columns[2][search][regex]": "false",
"order[0][column]": "1",
"order[0][dir]": "asc",
"start": "30",
"length": "10",
"search[value]": "",
"search[regex]": "false"
}
These fields tell the server everything it needs to know, so it can prepare the correct response.
In our case the most important fields are these:
"start": "30",
"length": "10"
Start at row 30, and provide 10 records.
It is, again, the server's responsibility to prepare a JSON response which accurately reflects the requested data.
In our case this means the server needs to have logic to read through the text file to the correct starting point (data row 31 - remember the offset starts at zero), and 10 rows in total (rows 31 through 40).
Other fields in the above request from DataTables describe how the data is to be sorted, and filtered. In our case there is no filter "search[value]": "", - and the data is to be sorted by the first column in ascending order.
Final Notes
I have deliberately not described the following:
1) How your server-side code handles the creation of the JSON responses it sends back to DataTables;
2) How your server-side code parses the form requests it receives from DataTables.
That all depends entirely on what your server-side technology is. DataTables doesn't care. It's just passing JSON messages - it is decoupled from the server-side implementation - as it should be.
Regarding the "defer render" option described here, that is an enhancement you may choose to add if you feel you need it. But I would recommend getting a more basic server-side implementation working first.
Not particulary relavant to any language, but I used Node.js as an example to make a minimum working project for what's explained above:
The data: (put this at the root of where you have the working directory of node.js service)
[ { "id": 1,
"name": "widget_1",
"description": "This is a description for widget 1"
},{ "id": 2,
"name": "widget_2",
"description": "This is a description for widget 2"
},{ "id": 3,
"name": "widget_3",
"description": "This is a description for widget 3"
},{ "id": 4,
"name": "widget_4",
"description": "This is a description for widget 4"
},{ "id": 5,
"name": "widget_5",
"description": "This is a description for widget 5"
},{ "id": 6,
"name": "widget_6",
"description": "This is a description for widget 6"
},{ "id": 7,
"name": "widget_7",
"description": "This is a description for widget 7"
},{ "id": 8,
"name": "widget_8",
"description": "This is a description for widget 8"
},{ "id": 9,
"name": "widget_9",
"description": "This is a description for widget 9"
},{ "id": 10,
"name": "widget_10",
"description": "This is a description for widget 10"
},{ "id": 11,
"name": "widget_11",
"description": "This is a description for widget 11"
},{ "id": 12,
"name": "widget_12",
"description": "This is a description for widget 12"
},{ "id": 13,
"name": "widget_13",
"description": "This is a description for widget 13"
},{ "id": 14,
"name": "widget_14",
"description": "This is a description for widget 14"
},{ "id": 15,
"name": "widget_15",
"description": "This is a description for widget 15"
},{ "id": 16,
"name": "widget_16",
"description": "This is a description for widget 16"
},{ "id": 17,
"name": "widget_17",
"description": "This is a description for widget 17"
},{ "id": 18,
"name": "widget_18",
"description": "This is a description for widget 18"
},{ "id": 19,
"name": "widget_19",
"description": "This is a description for widget 19"
},{
"id": 20,
"name": "widget_20",
"description": "This is a description for widget 20"
}]
The HTML: (put this under your working directory/public)
<!DOCTYPE html>
<html>
<body>
</head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.13.1/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.13.1/js/jquery.dataTables.js"></script>
</head>
<div style="margin: 20px;">
<div id = 'pageinfo' style='display:none'></div>
<table id="demo" class="display dataTable cell-border" style="width:100%"></table>
</div>
<script type="text/javascript">
$(document).ready(function() {
var table = $('#demo').DataTable({
serverSide: true,
ajax: {
url: 'http://localhost:3000/data',
data: $('#pageinfo').text(), //post pagination parameters to server
type: 'POST'
},
columns: [
{ title: 'ID',
data: 'id' },
{ title: 'Name',
data: 'name' },
{ title: 'Description',
data: 'description' }
],
lengthMenu: [5, 10, 20],
pageLength: 5
});
function getinfo(){
var info = table.page.info();
return info;
}
$('.dataTables_wrapper').on('click',function(e){
var info = table.page.info();
$('#pageinfo').text(JSON.stringify(info)) //get the pagination parameters
})
});
</script>
</body>
<html>
And the server:
const fs = require('fs');
const data = JSON.parse(fs.readFileSync("data.json", 'utf8'));
var express = require('express');
var app = express();
var bodyParser = require('body-parser')
app.use( bodyParser.json() ); // to support JSON-encoded bodies
app.use(bodyParser.urlencoded({ // to support URL-encoded bodies
extended: true
}));
app.use('/static', express.static(__dirname + '/public')); //directory for static html docs
app.post('/data', function(req, res){
var resp = {"recordsTotal": 20,"recordsFiltered": 20,"start":0,"length":5}
if(req.body.start){
resp.draw = JSON.parse(req.body.draw);
resp.data = data.slice(JSON.parse(req.body.start),
JSON.parse(req.body.start)+JSON.parse(req.body.length));
}else{
resp.draw = 1;
resp.data = data.slice(resp.start,resp.start+resp.length);
}
res.end(JSON.stringify(resp))
})
app.listen(3000, function () {
console.log('listening on port 3000');
});
Then you'd be able to just start the server, and browse the result at http://localhost:3000/static/dtable.html
Read through these codes, or probably dig in to a few intermediate outputs, and you'll have a better idea of how DataTable works under a minimum setup for server-side processing.

Using an array's object's attribute in a v-for with v-bind in vue.js?

So I'm trying to follow what I've found in the API and examples from the vue.js page but it doesn't seem to be working out.
I have this component
Vue.component('project', {
data: function () {
return {
title: "Sketch",
desc: "Zoe Beauty is an online store web application that sells different types of makeup from many brands in " +
"the market. It works with a nodeJs server and Handlebars templating to create the front end. The app is " +
"created under the slogan “Just Shine”, Most feedback in the app is elusive to this slogan and so is it's " +
"graphic style. The user can filter the items by many different things such as a type of product, brand, price, " +
"rating, etc. Also, they can add items to their cart.",
links: [{
"github": {
"link": "https://github.com/booleanaVillegas/juliana-villegas-taller-uno",
"logo": "https://firebasestorage.googleapis.com/v0/b/booleana-s-portafolio.appspot.com/o/github.svg?alt=media&token=83edf83c-cd80-43fa-bedd-a2348ff23b3e"
},
"web": {
"link": "https://enigmatic-shelf-33047.herokuapp.com/",
"logo": "https://firebasestorage.googleapis.com/v0/b/booleana-s-portafolio.appspot.com/o/web.svg?alt=media&token=b5e092a2-beb3-4c72-a329-8e402e82032f"
}
}]
,
img: "https://firebasestorage.googleapis.com/v0/b/booleana-s-portafolio.appspot.com/o/projects%2Fzoe.png?alt=media&token=b0255dda-51f9-4958-8f7b-af978cc9b790"
}},
template: `
<div class="each-project">
<img src="https://firebasestorage.googleapis.com/v0/b/booleana-s-portafolio.appspot.com/o/projects%2Fzoe.png?alt=media&token=b0255dda-51f9-4958-8f7b-af978cc9b790"
alt="" class="pic-project">
<h3 class="purple title-project">{{title}}</h3>
<p class="project-desc">{{desc}}</p>
<div class="links-container" v-for="link in links">
<a :href="link.link" class="link-container"><img
:src='link.logo' alt='link.key' class='link-img'></a>
</div>
</div>
`
});
The :src and :href in the v-for: link in links are not displaying anything, and when I inspect the element it is literally showing 'link.logo' instead of the actual link
how can I mix v-for and v-bind correctly?
first your array just contains 1 element, and that element was an object so just remove the []
links: {
"github": {
"link": "https://...",
"logo": "https://..."
},
"web": {
"link": "https://...",
"logo": "https://..."
}
}
look https://codepen.io/maoma87/pen/JaWQEq?editors=0010
Your links array contains only 1 element?
links: [{
"github": {
"link": "https://github.com/booleanaVillegas/juliana-villegas-taller-uno",
"logo": "https://firebasestorage.googleapis.com/v0/b/booleana-s-portafolio.appspot.com/o/github.svg?alt=media&token=83edf83c-cd80-43fa-bedd-a2348ff23b3e"
},
"web": {
"link": "https://enigmatic-shelf-33047.herokuapp.com/",
"logo": "https://firebasestorage.googleapis.com/v0/b/booleana-s-portafolio.appspot.com/o/web.svg?alt=media&token=b5e092a2-beb3-4c72-a329-8e402e82032f"
}
}]
If it's, you can loop like this:
<div class="links-container" v-for="(linkValue, key) in links[0]">
<a :href="linkValue.link" class="link-container"><img
:src='linkValue.logo' alt='key' class='link-img'></a>
</div>
Your v-for should once read array one element.
Links object a element like this
{
"github": {
"link": "https://github.com/booleanaVillegas/juliana-villegas-taller-uno",
"logo": "https://firebasestorage.googleapis.com/v0/b/booleana-s-portafolio.appspot.com/o/github.svg?alt=media&token=83edf83c-cd80-43fa-bedd-a2348ff23b3e"
},
"web": {
"link": "https://enigmatic-shelf-33047.herokuapp.com/",
"logo": "https://firebasestorage.googleapis.com/v0/b/booleana-s-portafolio.appspot.com/o/web.svg?alt=media&token=b5e092a2-beb3-4c72-a329-8e402e82032f"
}
}
So your v-for like this
<div class="links-container" v-for="link in links">
<a :href="link.github.link" class="link-container">
<img :src='link.github.logo' alt='link.key' class='link-img'>
</a>
<a :href="link.web.link" class="link-container">
<img :src='link.web.logo' alt='link.key' class='link-img'>
</a>
</div>

Onclick select specific set of JSON Data

I have a JSON object, like so:
{
"workouts":
[
{
"title": "Full Body",
"exercises":
[
{
"name": "Push Ups",
"duration": 3,
"break": 3
},
{
"name": "Squats",
"duration": 3,
"break": 3
},
{
"name": "Running in Place",
"duration": 3,
"break": 3
}
]
},
{
"title": "God Legs",
"exercises":
[
{
"name": "Running in Place (High Knees)",
"duration": 3,
"break": 3
},
{
"name": "Squats",
"duration": 3,
"break": 3
},
{
"name": "Clams",
"duration": 3,
"break": 3
}
]
},
{
"title": "Morning Stretch",
"exercises":
[
{
"name": "Downward Dog",
"duration": 3,
"break": 3
},
{
"name": "Face Plant",
"duration": 3,
"break": 3
},
{
"name": "Warrior",
"duration": 3,
"break": 3
}
]
}
]
}
I am looping through this data to create a list of cards dynamically. I would like to make it so that when a card is tapped/clicked, the information relative to that specific data set is displayed/accessed.
EXAMPLE if I tap the card with the "Full Body" title, I would like a list to be displayed containing only the exercises in the "Full Body" exercises array, which should be: Push Ups, 3, 3 - Squats, 3, 3 - Running in Place 3, 3.
I am using Firebase to host my data on the real time database.
HTML:
<!--LIST THAT THE DYNAMICALLY GENERATED CARDS ARE APPENDED TO-->
<ul id="cardList" class="cards"></ul>
<!--MARKUP FOR THE CARDS, USED IN THE JSON FOR LOOP-->
<li>
<div class='card' onclick='selectWorkout(this)'>
<a class='startIt' href='timer.html'>
<div class='cardInfo'>
<h3>Full Body</h3>
<p>10 min.</p>
</div>
</a>
<a class='cardOptions' href='overview.html'>
<p>Options</p>
</a>
</div>
</li>
JavaScript:
// Initialize Firebase.
firebase.initializeApp(config);
// Reference data.
var dbRef = firebase.database().ref().child("workouts");
// Sync with Firebase in real time.
dbRef.on("value", snap =>
{
var workouts = snap.val();
for (var i = 0; i < workouts.length; i++) // WORKS GREAT.
{
//display.innerHTML = exercises[0].name;
//$("#cardList").append(exercises[i].title);
var routine = workouts[i].title;
$("#cardList").append("<li><div class='card'><a class='startIt' href='#' onclick='selectWorkout(this)'>\n\
<div class='cardInfo'><h3>" + routine + "</h3><p>10 min.</p>\n\
</div></a><a class='cardOptions' href='overview.html'>\n\
<div id='options'><p>Options</p></div></a></div></li>"); // ALL GOOD.
}
function selectWorkout(this) // NOT ONLY DOES NOT ACHIEVE DESIRED GOAL, BREAKS ENTIRE FUNCTION.
{
var selected = workouts[this].exercises;
$("#cardList").append(selected);
}
});
I think I am doing, as usual, something stupid: It would seem "this" is not allowed in the workouts square brackets, but how do I get a specific set of data otherwise?
Yeah, you can't pass in this as a parameter name - it's a reserved word. In general I'd try to avoid using this in javascript if you can - it's really tricky.
A more robust way to do this is to create your card HTML as a separate jQuery object and add a specific clickhandler, like this:
var routine = workouts[i].title;
//create card element
var $card = ("<li><div class='card'><button class='startIt'><div class='cardInfo'><h3>" + routine + "</h3><p>10 min.</p></div></a><a class='cardOptions' href='overview.html'> <div id='options'><p>Options</p></div></button></div></li>");
//add click handler
$card.find("button.startIt").on("click", function() {
selectWorkout( workouts[i] );
});
//put card on the page
$("#cardList").append($card);
And then
function selectWorkout(workout)
{
var selected = workout.exercises;
//not sure what you're trying to do here??
$("#cardList").append(selected);
}
You may notice that I've changed your <a href='#'> into a <button> - generally better for accessibility!

Reading JSON Response in AngularJS

I have an angular controller called productImages which returns following JSON data:
{
"Product_1":[
{ "image_id":"12469",
"name":"My Product 1 - Variety 1",
"url":"\/\/mystorefront.net\/120\/small\/1911791794.jpg"
},
{
"image_id":"12470",
"name":"My Product 1 - Variety 2",
"url":"\/\/drfuittf5cya9.cloudfront.net\/121\/small\/1911802897.jpg"
}
],
"Product_2":[
{ "image_id":"122349",
"name":"My Product 2 - Variety 1",
"url":"\/\/drfuittf5cya9.cloudfront.net\/122\/small\/1911791794.jpg"
},
{
"image_id":"123470",
"name":"191123897.jpg",
"name":"My Product 2 - Variety 2",
"url":"\/\/drfuittf5cya9.cloudfront.net\/123\/small\/1911802897.jpg"
}
]
}
In my angular code I have written:
<div ng-controller="productImages">
<div ng-repeat="product in products">
{{product.image_id}}
</div>
</div>
When I run this the ng-repeat div gets repeated twice but product.image_id does not show up. If I do {{product}} instead or {{product.image_id}} I get the whole JSON printed.
How do I print this JSON in angularJS? Also, How do I get Product_1, Product_2 printed?
Your object Product_1 seems to be an array which in turn has images.
I think you will need nested for loops to display the images
You try to repeat over the properties of an object.
Accourding to the documentation here you'll have to use
<div ng-repeat="(key, value) in myObj"> ... </div>
each property of your object is an array so I think that something like:
<div ng-repeat="(key, value) in myObj">
<div ng-repeat= "product in value">
{{product.image_id"}}
</div>
</div>
should do the trick
Use two loops for this as:
angular.module('app',[]).controller('mainCtrl', function($scope){
$scope.products = {
"Product_1":[
{ "image_id":"12469",
"name":"My Product 1 - Variety 1",
"url":"\/\/mystorefront.net\/120\/small\/1911791794.jpg"
},
{
"image_id":"12470",
"name":"My Product 1 - Variety 2",
"url":"\/\/drfuittf5cya9.cloudfront.net\/121\/small\/1911802897.jpg"
}
],
"Product_2":[
{ "image_id":"122349",
"name":"My Product 2 - Variety 1",
"url":"\/\/drfuittf5cya9.cloudfront.net\/122\/small\/1911791794.jpg"
},
{
"image_id":"123470",
"name":"191123897.jpg",
"name":"My Product 2 - Variety 2",
"url":"\/\/drfuittf5cya9.cloudfront.net\/123\/small\/1911802897.jpg"
}
]
}
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app='app' ng-controller='mainCtrl'>
<div ng-repeat="product in products">
<div ng-repeat="item in product">
{{item.image_id}}
</div>
<hr/>
</div>
</div>
Your JSON syntax is incorrect. If I understand correctly, each of our product has several varieties. It should be as follows:
{
"Products": [
{
"Product": [
{
"image_id": "12469",
"name": "My Product 1 - Variety 1",
"url": "//mystorefront.net/120/small/1911791794.jpg"
},
{
"image_id": "12470",
"name": "My Product 1 - Variety 2",
"url": "//drfuittf5cya9.cloudfront.net/121/small/1911802897.jpg"
}
]
},
{
"Product": [
{
"image_id": "122349",
"name": "My Product 2 - Variety 1",
"url": "//drfuittf5cya9.cloudfront.net/122/small/1911791794.jpg"
},
{
"image_id": "123470",
"name": "My Product 2 - Variety 2",
"url": "//drfuittf5cya9.cloudfront.net/123/small/1911802897.jpg"
}
]
}
]
}
And you HTML should be:
<div ng-controller= "Products">
<div ng-repeat= "for oneproduct in Products">
<div ng-repeat="for variety in oneproduct">
{{variety.image_id"}}
</div>
</div>
</div>
Not tested this though...
You can't iterate on the object productImages because it's not an array.
You can iterate the objects "Product_1" and "Product_2".
If you want iterate the object productImage you have to write it ad an array.

Readout JSON data in different divs

I am absolutely new at this. The plan is to show the data from the JSON file in different divs, because I want to style the divs in different ways.
1) First I want to read out a single line of my JSON, for example:
The HTML:
<div>
<div data-filter="EX_01_Dates"></div>
<div data-filter="EX_01_Name"></div>
<div data-filter="EX_01_City"></div>
</div>
And the JSON:
var data={"events":[
{
"id": EX_01,
"Name":"Event 1",
"City":"City 1",
"Dates":"13-09-2015",
},
]}
2) Second, I want this with different data blocks.
var data={"events":[
{
"id": EX_01,
"Name":"Event 1",
"City":"City 1",
"Dates":"13-09-2015",
},
{
"id": EX_02,
"Name":"Event 2",
"City":"City 2",
"Dates":"15-09-2015",
}
]}
Thats my jsfiddle. Hope someone can help me?
Something like this?
var data={"events":[
{"id": "EX_01", "Name":"Event 1", "City":"City 1", "Dates":"13-09-2015" },
{"id": "EX_02", "Name":"Event 2", "City":"City 2", "Dates":"15-09-2015" }
]};
data["events"].forEach(function(elem) {
for(var key in elem) {
var filter = [elem["id"], "_", key].join("");
$("div[data-filter='" + filter + "']").text(elem[key]);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<div data-filter="EX_01_Dates"></div>
<div data-filter="EX_01_Name"></div>
<div data-filter="EX_01_City"></div>
</div>
<div>
<div data-filter="EX_02_Dates"></div>
<div data-filter="EX_02_Name"></div>
<div data-filter="EX_02_City"></div>
</div>
Read about Array forEach and for...in to learn how they work!
I highly recommend you use jsrender for this purpose, there are alot of great articles about it out there. I found the article below very helpful if you dont understand http://www.jsviews.com hope this helps..
https://msdn.microsoft.com/en-us/magazine/hh882454.aspx
First of all it is not clear what exactly you are doing here.
<div id="EX_01">
<div data-filter="EX_01_Dates"></div>
<div data-filter="EX_01_Name"></div>
<div data-filter="EX_01_City"></div>
</div>
<div id="EX_02">
<div data-filter="EX_02_Dates"></div>
<div data-filter="EX_02_Name"></div>
<div data-filter="EX_02_City"></div>
</div>
your javascript code which is now jquery added
var data={"events":[
{
"id": EX_01,
"Name":"Event 1",
"City":"City 1",
"Dates":"13-09-2015",
},
{
"id": EX_02,
"Name":"Event 2",
"City":"City 2",
"Dates":"15-09-2015",
}
]}
$("#EX_01").find("div:nth-child(1)").html(data.events[0].Dates);
$("#EX_01").find("div:nth-child(2)").html(data.events[0].Name);
$("#EX_01").find("div:nth-child(3)").html(data.events[0].City);
$("#EX_02").find("div:nth-child(1)").html(data.events[1].Dates);
$("#EX_02").find("div:nth-child(2)").html(data.events[1].Name);
$("#EX_02").find("div:nth-child(3)").html(data.events[1].City);
you can work around more for dynamic creation or selection of html elements

Categories

Resources