Develop Reference

I am getting a list view of images instead displaying in grid format

I am new to Salesforce, I am unable to form a grid with images from the URLs that I have given in my apex class using JSON, they are returning a list view instead of resulting side by side.
Any help would be appreciated.
Component:
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes" controller="pic_ctrl">
<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
<aura:attribute name="urls" type="String" />
<!-- data: {!v.urls} -->
<aura:iteration items="{!v.urls}" var="row">
<div class="slds-grid slds-wrap" style="height: 203px; width:400px ; background-color:white;" onclick="{!c.showcarousel}" >
<div class="slds-col slds-size_1-of-2">
<img src="{!row}" style="height: 200px; width:400px ; background-color:white;"/>
</div>
</div>
</aura:iteration>
</aura:component>
Controller.js:
({
doInit : function(component, event, helper) {
var getdata = component.get("c.geturl");
var h = [];
getdata.setCallback(this, function(response){
var state = response.getState();
if (state === 'SUCCESS'){
var Result = response.getReturnValue();
console.log("enter" + Result);
// console.log('1'+JSON.parse(result));
//var finalJson = JSON.parse(finalJson1);
var len=Result.length;
console.log("final length" + Result.length);
for(var i=0; i<len; i++){
console.log (Result[i]["imageURL"]);
h.push(Result[i]["imageURL"]);
}
console.log("test-->"+h);
component.set("v.urls",h);
console.log("caught");
}
});
$A.enqueueAction(getdata);
}
Apex Class:
public class pic_ctrl {
#AuraEnabled
public static Object geturl() {
String ImgJson = ' [ {"imageName": "Mice1.jpg","imageId": "101", "imageURL": "https://labpulse.s3.amazonaws.com/images/images1.jpg", "imageDescription": "Some description" },{"imageName": "Mice2.jpg","imageId": "101", "imageURL": "https://labpulse.s3.amazonaws.com/images/images2.jpg", "imageDescription": "Some description" },' +
'{ "imageName": "Mice3.jpg","imageId": "102", "imageURL": "https://labpulse.s3.amazonaws.com/images/images3.jpg", "imageDescription": "Some description" }, {"imageName": "Mice4.jpg", "imageId": "103", "imageURL": "https://labpulse.s3.amazonaws.com/images/images4.jpg", "imageDescription": "Some description" }]';
Object Finaljson= JSON.deserializeUntyped(ImgJson);
return Finaljson;
}
}

As pointed out in this answer it's best to use <lightning:layout> for situations like this as slds-grid with aura:iteration is hard to do for instance your component just repeats an slds-grid div with a single column for each image. If you wanted it to work with slds-grid you would need to iterate through the images in groups of 2 so your attribute would have to be a 2d array of your images. Alternatively, you could add custom CSS use floats and get rid of the column slds-col class. Hope this helps

Using Handlebars.js with a nested array of JSON data

What is the proper way to access a nested array of JSON data to be used in Handlebars template file?
My code works in the Dev environment of chrome but doesn't work in Prod.
Here's a sample data of my JSON file.
{
"slider-card-1": [{
"card-img-1": "img/guillermo-rico-1368543-unsplash.jpg",
"card-date-1": "May 29 2019",
"card-title-1": "Deeper dive",
"card-description-1": "Deeper dive into your finances",
"btn-text-1": "Watch video",
"btn-link-1": "vid.co",
"section-header-1": "Be Heard"
},
{
"card-img-2": "img/thought-catalog-685332-unsplash.jpg",
"card-date-2": "May 29 2019",
"card-title-2": "Experience-led Agile",
"card-description-2": "Bringing experiences of our core stakeholders...",
"btn-text-2": "Learn more",
"btn-link-2": "#",
"section-header-2": "Arya"
},
{
"card-img-3": "img/thought-catalog-685332.jpg",
"card-date-3": "Febuary 4 2019",
"card-title-3": "Simplifying terminology",
"card-description-3": "It can be confusing to understand terms.",
"btn-text-3": "Read More",
"btn-link-3": "#",
"section-header-3": "Do it"
}]
}
Code for that goes into the html template file:
<script id="newsletter-template" type="text/x-handlebars-template">
<div>
<div>
<img src={{slider-card-1.[0].card-img-1}}>
</div>
<span>{{slider-card-1.[0].card-date-1}}</span>
<div>
{{slider-card-1.[0].section-header-1}}
</div>
<div>
{{slider-card-1.[0].card-title-1}}
</div>
<div>
{{slider-card-1.[0].card-description-1}}
</div>
<a href={{slider-card-1.[0].btn-link-1}}>
{{slider-card-1.[0].btn-text-1}}
</a>
</div>
</script>
Code to compile the template
<script>
var newsletter_method = {
handlerData: function (resJSON) {
var templateSource = $("#newsletter-template").html(),
template = Handlebars.compile(templateSource),
newsletterHTML = template(resJSON);
$("#my-container").html(newsletterHTML);
},
loadNewsletterData: function () {
$.ajax({
url: "./data.json",
method: 'GET',
success: this.handlerData
})
}
};
$(document).ready(function () {
newsletter_method.loadNewsletterData();
});
</script>
Now when the template is compiled, the generated HTML is blank in the browser. Is there a better way to access the nested array of JSON data in Handlebars? How do I do this?

how to datalink the index with the json object?

I have the following JSON object which maintain the sequence in it.
var sample={
"sample": [
{
"example": [
{
"sequence": 1,
},
{
"sequence":2
},
{
"sequence":3
}
]
},
{
"example": [
{
"sequence": 1,
}
]
}
]
};
$.templates("testingTemplate", "#testingSection");
var html=$.link.testingTemplate("#htmlHolder", sample);
$("#insert").click(function(){
var childIndexVal=parseInt($("#childIndex").val());
var x= {
"sequence": childIndexVal+1,
"xxx":"yyy"
};
var parentIndexVal=parseInt($("#parentIndex").val());
$.observable(sample.sample[parentIndexVal].example).insert(childIndexVal,x);
console.log(sample);
});
.parentHolder
{
border:1px solid red;
padding:5px;
margin:5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jsviews/0.9.80/jsviews.js"></script>
<script id="testingSection" type="text/x-jsrender">
{{if sample && sample.length}}
{^{for sample }}
<div class="parentHolder">
{^{for example }}
<div><span data-link="#index+1" ></span>
<input type="text" value="{{:sequence}}" id="sequence" data-link="#index+1"></div>
{{/for}}
</div>
{{/for}}
{{/if}}
</script>
<div id="htmlHolder">
</div>
<div class="messages">
</div>
<span>Parent Index:</span><input type="text" id="parentIndex"/>
<span>Child Index:</span><input type="text" id="childIndex"/>
<button id="insert" >Insert</button>
so whenever I insert the object it should update the squence accodring to the index.
In the given example, if I am inserting an object into the 1st index of example in sample[0].(consider example array index starts from zero).
So when I am inserting one object into first parameter, the sequence in the remaining object should updated according to the index.
How can I achieve it.
give parent Index as 0 and child index as 1.
expected output,
Note: extra "xxx":"yyy" for differntiation purpose.
var sample={
"sample": [
{
"example": [
{
"sequence": 1,
},
{
"sequence": 2,
"xxx":"yyy"
}
{
"sequence":3
},
{
"sequence":4
}
]
},
{
"example": [
{
"sequence": 1,
}
]
}
]
};
Update: : tried with linkTo also.
<input type="text" data-link="linkTo=sequence #index+1" ></div>
Still not getting the expected output.
Thanks in advance.

Neither JsRender nor JsViews will modify the JSON data that they are rendering. This is by design: there are no side-effects on the data...
On the other hand, you can write code to create side-effects on the data, or you can use two-way binding so a user can modify data values. But two-way binding will only change the targetted data value, not other values elsewhere, and will do so only when the user triggers a change event on that <input> for example.
In your case you want any observable changes to an examples array to trigger changes to all examples in the array such as to ensure the example.sequence value is always equal to the index+1 for each example. In that case you have to write code to do that.
One way you can achieve that is to add the following code using observeAll:
$.observable(sample).observeAll(function(ev, eventArgs) {
if (ev.type==="arrayChange" && ev.data.observeAll.path().slice(-7)==="example") {
$.each(ev.currentTarget, function(i, item) {
$.observable(item).setProperty("sequence", i+1);
})
}
});
That will ensure that the sequence value stays in sync not only for insert, but also when items are removed or for changes in the the order of items, etc.

AngularJS $scope undefined for item inside $scope

I'm quite new to AngularJS.
I've given myself a small project to create a list of local businesses and then the ability to 'like' each one - with the number of likes increasing by 1 each time the 'likes' div is clicked.
Here's my HTML
<ion-content ng-controller="BusCtrl" ng-init="init()" class="has-header">
<div class="list">
<div ng-repeat="item in nodes" class="item">
<b>{{item.node.title}}</b><br>
<b>{{item.node.website}}</b><br>
<img ng-src="{{ item.node.main_image.src }}">
<div class="engagement">
<p class="likes" ng-click="plusOne($index)">{{item.node.likes}}</p>
</div>
<span ng-bind-html="item.node.summary"></span>
</div>
</div>
Here's my controller code
.controller('BusCtrl', function($scope, $http) {
$scope.init = function() {
$http.get("sample-json/business-directory.json")
.success(function(data) {
$scope.nodes = data.nodes;
$scope.plusOne = function(index) {
$scope.nodes.node[index].likes += 1;
};
$scope.browse = function(v) {
window.open(v, "_system", "location=yes");
};
window.localStorage["nodes"] = JSON.stringify(data.nodes);
})
.error(function(data) {
console.log("ERROR: " + data);
if(window.localStorage["nodes"] !== undefined) {
$scope.entries = JSON.parse(window.localStorage["nodes"]);
}
});
};
})
Here's some sample JSON
{
"nodes": [
{
"node": {
"title": "2013 Business Survey",
"website": "http://www.portumnachamber.ie",
"likes": 0,
"main_image": {
"src": "http://portumnachamber.com/sites/default/files/styles/main-business-image-teaser/public/LOVEPORTUMNA_FINAL%20LOGO_%20small_3.jpg?itok=L5IE2Du_",
"alt": "Portumna Business Survey 2013, What does Portumna Co. Galway need and want"
}
}
},
{
"node": {
"title": "All Occasions Boutique, Portumna",
"website": "http://www.portumnachamber.com",
"likes": 0,
"main_image": {
"src": "http://portumnachamber.com/sites/default/files/styles/main-business-image-teaser/public/all%20occasions%201.jpg?itok=LFvCQIAT",
"alt": "Boutique Clothes Shop Portumna county Galway Ireland, All Occasions, Portumna"
}
}
},
{
"node": {
"title": "Anthony Williams",
"website": "http://www.portumnachamber.com",
"likes": 0,
"main_image": {
"src": "http://portumnachamber.com/sites/default/files/styles/main-business-image-teaser/public/default_images/portumna-coc-logo.png?itok=V9G81lx4",
"alt": ""
}
}
},
]
}
I get a list of each business - title, website, image, and the number 0 for likes. However, when I click on the 0, I get this error:
Error: $scope.nodes.node is undefined
It seems that it's a $scope within a $scope or something like that.
Any tips? Thanks a lot.

I am going to assume that your nodes data source doesn't have another node array property on it. In this case, your function plusOne becomes:
$scope.plusOne = function(index) {
$scope.nodes[index].node.likes += 1;
};
You are iterating ( ng-repeat ) on the nodes variable from your scope, so you have to put your indexer on that property. $scope.nodes is your array, not $scope.nodes.node. For each item from $scope.nodes you have a node property.
For example $scope.nodes[0] gives you first item which has a .node property.

You are using the wrong structure.
Nodes is the array so you need to apply the index there, not to node. Node is an object which contains the parameter "likes".
The undefined item here was nodes.node[index] not the $scope
To access a node you should write $scope.nodes[index].node.likes += 1;

According to your JSON please change
$scope.nodes.node[index].likes += 1;
to
$scope.nodes[index].node.likes += 1;

How do I initialize an array element which is inside another array element in AngularJS?

$scope.pictures=[
{
name:"/images/profile2.jpg",
caption:"Food and Hunger",
votes:0,
User:"xyz#gmail.com",
comments:[],
theme:$scope.theme
},
{
name:"/images/profile3.jpg",
caption:"The wedding day",
votes:0,
User:"yamini#gmail.com",
comments:[],
theme:$scope.theme
},
{
name:"/images/profile4.jpg",
caption:"Mother's Care",
votes:0,
User:"fakeid#yahoo.com",
comments:[],
theme:$scope.theme
}];
The "comments:[]" array isnt working. when i try .push() function, it doesnt works. However, when i try push() on other elements like,caption,user etc then it works.
$scope.addcomment=function (index) {
var com=$window.prompt('Please enter your comment');
$scope.pictures[index].comments.push(com);
}
Can anyone help me out with the error?

I have tried what you mentioned in your question, its working fine. see if you have done the same.
Demo
html:
<div data-ng-app="myApp" data-ng-controller="myCtrl">
<div data-ng-repeat="pic in pictures">
{{pic.comments | json }} <button ng-click="addcomment($index)">add comment</button>
</div>
</div>
js code:
(function() {
var app = angular.module('myApp',[]);
app.controller("myCtrl", function($scope,$window) {
$scope.pictures=[
{
name:"/images/profile2.jpg",
caption:"Food and Hunger",
votes:0,
User:"xyz#gmail.com",
comments:[],
theme:$scope.theme
},
{
name:"/images/profile3.jpg",
caption:"The wedding day",
votes:0,
User:"yamini#gmail.com",
comments:[],
theme:$scope.theme
},
{
name:"/images/profile4.jpg",
caption:"Mother's Care",
votes:0,
User:"fakeid#yahoo.com",
comments:[],
theme:$scope.theme
}];
$scope.addcomment=function (index) {
var com=$window.prompt('Please enter your comment');
$scope.pictures[index].comments.push(com);
}
});
})();