I am trying to display data from my JSON objects, my object is as follows in 2 images
within data, I have c_name, max_slots and an array slots in that array I have base_image
I can not get the base image array to display in my HTML.
This is my current printout in HTML
here is my JavaScript
$scope.GetData = function () {
$http({
url: "http://www.ccuktech.co.uk/ccuploader/campaigns/getCampaign",
method: "POST",
date: {},
headers: {'Content-Type': 'application/json'}
}).then(function (data) {
// success
console.log('you have received the data ');
console.log(data);
$scope.responseData = data.data;
}, function (response) {
// failed
console.log('failed getting campaigns goo back to log in page.');
console.log(response);
});
};
$scope.GetData();
and HTML
<div ng-repeat="data in responseData">
<h2>name</h2>:
{{data.c_name}}
<h2>max slots</h2>:
{{data.max_slots}}
<h2>image</h2>:
{{data.base_image}}
</div>
You cant just display an image within the div tag, use <img> instead of it
<div ng-repeat="data in responseData">
<h2>name</h2>:
{{data.c_name}}
<h2>max slots</h2>:
{{data.max_slots}}
<h2>image</h2>:
<img ng-src="{{data.base_image}}"></img>
</div>
Since the base_image is inside an inner array, you have to loop that array inside your ng-repeat of responseData
<div ng-repeat="data in responseData">
<h2>name</h2>:
{{data.c_name}}
<h2>max slots</h2>:
{{data.max_slots}}
<h2>image</h2>:
<div ng-repeat="slot in slots">
<img src={slot.base_image} />
</div>
</div>
{{data.base_image}}
won't be accessible because it is inside nested slots array so in order to refernce base_image you have to iterate through slots as well. Try something like given here :
ng repeat nested array
Related
$("#searchMovieBtn").click(() => {
const movieSource = $("#movie-template").html();
const movieList = Handlebars.compile(movieSource);
const movieSearch = $("#addMovie").val();
console.log(movieSearch);
queryURL = `https://api.themoviedb.org/3/search/movie?api_key=${apiKey}&language=en-US&query=${movieSearch}&page=1&include_adult=false`;
$.ajax({
url: queryURL,
method: "GET"
}).then(response => {
console.log(response);
const results = response.results;
const data = { movies: [] };
for (let i = 0; i < results.length; i++) {
const currentTitle = {
title: results[i].title,
release_date: results[i].release_date
};
data.movies.push(currentTitle);
}
console.log(data);
$("#placeholder").html(
movieList({
data: data
})
);
});
});
});
this is my function to call it
<div id="placeholder"></div>
<script type="text/x-handlebars-template" id="movie-template">
<ul class="list-group">
{{#each movies}}
{{#each this}}
<li class="list-group-item text-dark" id="MovieTitle">{{title}}
<span>
(<span id="MovieYear">{{release_date}}</span>)
<span>
<button class="btn btn-warning text-light btn-sm" id="addMovieBtn">Add to watchlist</button>
</span>
</span>
</li>
{{/each}}
{{/each}}
</ul>
</script>
And what it is going into!
I have been up all night and just cannot figure out what is going on with it! I swear I have looked up and down and still cannot find the right method to use it is driving me mad! Anyways thanks for the help ahead of time I am sure it was something very very simple that I looked over a lot.
There are a few errors in your solution.
First, you must understand the context object that you are passing to your template. It's shape looks like this:
{
data: {
movies: [
{
title: "Movie Title",
release_date: "Year"
}
]
}
}
Notice that the first key in the object is data. However, in your template, you have no reference to data, but try to access movies directly, effectively skipping a reference. Given this data, the first #each in your template would need to be updated to:
{{#each data.movies}}
Your second problem is your second #each in your template. This #each iterates over each property of each movie in the movies array. So when you reference a property like {{title}} within this block, the full path of your reference is something like data.movies[i].title.title. There is an extra '.title' there because you are not within the context of the movie, but of one of its properties (title in this case).
To fix this, simply remove the second #each.
I have created a fiddle for your reference.
As an additional note: I would avoid including static element IDs inside of a loop. It means you will have duplicate IDs in your output and that is not valid HTML.
The data has to be refreshed without page reload. Originally data is appeared on html with jinja2.
#app.route('/personal_account', methods=['POST'])
def welcome():
login = request.form['login']
data = get_default_user_data(login)
# ... processing
return render_sidebar_template("personal_account.html", data=data)
According to these data graph is building with chartist.js.
personal_account.html
<div id="data">
<ul id="consumed_values">
{% set count = 0 %}
{% for i in data.consumed_values %}
<li>{{ data.consumed_values[count] }}</li>
{% set count = count + 1 %}
{% endfor %}
</ul>
</div>
<canvas width="800" height="600" id="canvas"></canvas>
<button id="button">Update</button>
I need to update data. I am using ajax.
The function "request" make a post request to the server to the function get_selected_values in Python.
This function gives new data. But new data doesn't display in jinja2 on page. The data is still old.
personal_account.js
window.onload = draw();
function draw() {
var consumed_values = document.querySelectorAll('ul#consumed_values li');
var values = new Array();
for (var i = 0; i < consumed_values.length; i++) {
console.log(consumed_values[i].innerHTML);
values[i] = consumed_values[i].innerHTML;
}
var numbers = new Array();
for(var i=0; i<consumed_values.length; i++)
{
numbers[i]=i+1;
console.log(numbers[i]);
}
var ctx = document.getElementById('canvas').getContext('2d');
var grapf = {
labels : numbers,
datasets : [
{
strokeColor : "#6181B4",
data : values
}
]
}
new Chart(ctx).Line(grapf);
}
document.getElementById('button').onclick=function () {
request();
}
function reques() {
var first = selected[0];
var second = selected[1];
first.month = first.month+1;
second.month = second.month+1;
$.ajax({
type: 'POST',
url: '/get_selected_values',
success: function(response) {
alert('Ok');
draw();
},
error: function() {
alert('Error');
}
});
}
Function get_selected_values()
#app.route('/get_selected_values', methods=['POST'])
def get_selected_values():
# ...
data = fetch_selected_date(start_date=start_date, end_date=end_date, login=current_user.get_id())
if data:
# return jsonify({'result': True, 'data': data}) # does not work this way
# return jsonify({'result': False, 'data': []})
return render_sidebar_template("personal_account.html", data=data, result=1)
How to succeed in data's update and graph's rebuild?
EDIT 1
I am using the first version of get_selected_values function.
The request function look like this:
...
success: function(response) {
alert('Успешно получен ответ:!'+ response.data);
document.getElementById('consumed_values').innerHTML = response.data;
draw();
},
...
Data is updating successfully, but graph looks the same. How to fix?
OK here's my outlook on this. You're on the right track and there is a way to update the element without the need to re-draw the page in this instance. What's happening is that you are returning data from your get_selected_values() method but not doing anything with it once it's returned to your AJAX request.
So firstly, I'm going to draw your attention to your AJAX request:
$.ajax({
type: 'POST',
url: '/get_selected_values',
success: function(response) {
alert('Ok');
draw();
},
error: function() {
alert('Error');
}
});
When you're getting a successful response from this, you're seeing your "OK" alert in the UI, right? However nothing updates in the UI despite you calling on the draw() method?
You won't want to return a render_template from your Flask function in this case. You were already on the right track with returning JSON from your function:
if data:
# return jsonify({'result': True, 'data': data}) # does not work this way
When you return your JSON data, it will be stored in the response variable in your success function. If you're unsure of exactly what's going into that response variable then output its contents with something like alert(JSON.stringify(response)) in the success function of your AJAX request. From here you will see your data returned to your method.
Now you need to decide how you want to use that data to update your <div id="data"> element in your UI. You can do this just using JavaScript with a series of document.getElementById('element_id').innerHTML statements or such-like so that your element is populated with all of the updated data from your response.
This will auto-update the data you wish to have displayed without the need to refresh the page.
Now that you've done that, invoke your draw() function again and it should now use the updated data.
I hope this helps set you down the right path with this one!
AFTER EDIT 1
When you're originally populating <div id="data"> you are using a loop to populate a series of <li> tags in the element with your data.
When you are updating this element with your new data, you are just using .innerHTML to re-populate the parent <ul> element.
Your draw() method is looking to the data stored in the <li> elements.
Are you absolutely certain that, after you perform your update, your <div id="data"> element is in exactly the same (ie. expected) format to work with your draw() method? In that it's still in the structure:
<div id="data">
<ul id="consumed_values">
<li>Your updated data here...</li>
<li>More updated data...</li>
</ul>
</div>
This is the element structure that your draw() method is expecting to find. It's pulling its data in from each individual <li> element in the list. So these are the elements which need to store your updated values.
How will i be able to display the array values of FileList using foreach inside a div? and reiterate the items one by one?
dataservice code:
var GetUploads = function (GetUploadsObservable) {
var Importoptions = {
url: 'api/test/GetUploads',
type: 'GET',
async: true,
contentType: false,
processData: false,
};
return $.ajax(Importoptions).then(GetDataSucceded).fail(queryFailed);
function GetDataSucceded(data) {
var Filelist = [];
if (data != null) {
data.forEach(function (item) {
Filelist.push(new model.FolderFiles(item));
});
}
GetUploadsObservable(Filelist);
//alert("YYYY");
console.log(Filelist);
}
}
HTML code:
<div id="timesheet" class="" data-bind="foreach: Filelist" style="border:solid 1px red;">
</div>
Your question is bit vague, but if I'm understanding you correctly you're trying to loop through a list of files which you get from some kind of service.
Your file list variable is a local function array therefore isn't available to be bound to the view. What you might want to try is to bind to 'GetUploadsObservable' instead, and make sure GetUploadsObservable is part of your view model. See example below:
<div id="timesheet" class="" data-bind="foreach: GetUploadsObservable" style="border:solid 1px red;"><span data-bind="text: $data"></span></div>
Please see this link for more info on $data: http://knockoutjs.com/documentation/binding-context.html
I'm new to angular and would like some help in solving the following issue. This is the code I currently have, simply getting an array of results from the server using a post request and displaying them using the ng-repeat directive:
<div id="mainW" ng-controller="MediaController">
<div id="mediaBodyW" ng-repeat="media in medias">
<div class="mediaW" data-id="{{media.id}}">
<div class="mediaNum">{{media.num}}</div>
<div class="mediaN">{{media.name}}</div>
<div id="loadSubs" ng-click="loadSubMedias(media.id)">load sub medias</div>
<div id="subMediaW"></div>
</div>
</div>
This is my controller:
app.controller("MediaController",['$scope','$http','$httpParamSerializerJQLike',function($scope,$http,$httpParamSerializerJQLike){
$scope.medias = [];
try {
$http({
method: 'POST',
url: 'media.php',
data: $httpParamSerializerJQLike({"request":"getAllMedia"}),
headers: {'Content-Type':'application/x-www-form-urlencoded'}
}).then(function (ans) {
$scope.medias = ans.data;
}, function (error) {
console.error(JSON.stringify(error));
});
}
catch (ex) {
console.error("Error: " + ex.toString());
}
}]);
Now, what I would like to achieve, is: on clicking the div with id of "loadSubs", run another $http post query which will load an array of results into the "subMediaW". Of course the query and appending of html should be unique for each media element, and each time a data is loaded for a particular element all previous results should be cleared, all this while taking into account that the loaded data will be also manipulated in the future.
Can someone please help me understand how can I do this using AngularJS?
Try this,
$scope.prevMedia = null; //use this to store last clicked media object
$scope.loadSubMedias = function(media){
$http.post().... //make api call for subMedia here
.then(function(res){
media.subMediaW = res.data // attach a subMediaW array to the media object
media.showSubMedia = true; // set variable true to make submedia visible for current media object, this will be used with ng-if attribute in html
if($scope.prevMedia != null) $scope.prevMedia.showSubMedia = false; // if last selected media object is not null, hide its submedia
})
}
and html
<div id="mainW" ng-controller="MediaController">
<div id="mediaBodyW" ng-repeat="media in medias">
<div class="mediaW" data-id="{{media.id}}">
<div class="mediaNum">{{media.num}}</div>
<div class="mediaN">{{media.name}}</div>
<div id="loadSubs" ng-click="loadSubMedias(media)">load sub medias</div>
<div id="subMediaW" ng-repeat="submedia in media.subMediaW" ng-if="media.showSubMedia"></div>
</div>
</div>
Firstly you should have a function in your controller with the name loadSubMedias and instead of simply taking media.id you can send whole media object to it (later on we will add new data into this object as an another property).
$scope.loadSubMedias = function (media) {
$http({
method: 'POST',
url: 'media.php',
data: $httpParamSerializerJQLike({"mediaId":media.id}),
headers: {'Content-Type':'application/x-www-form-urlencoded'}
}).then(function (response) {
// now add subDatas into main data Object
media.subMedias = response.data;
});
}
and in your controller just use ng-repeat like this
<div id="mainW" ng-controller="MediaController">
<div id="mediaBodyW" ng-repeat="media in medias">
<div class="mediaW" data-id="{{media.id}}">
<div class="mediaNum">{{media.num}}</div>
<div class="mediaN">{{media.name}}</div>
<div id="loadSubs" ng-click="loadSubMedias(media)">load sub medias</div>
<div id="subMediaW" ng-repeat="subMedia in media.subMedias">
<pre>{{subMedia | json}}</pre>
</div>
</div>
</div>
I want to put my JSON data into Vue data, and a display, why can't I get to work?
compiled: function(){
var self = this;
console.log('teste');
$.ajax({
url: 'js/fake-ws.json',
complete: function (data) {
self.$data.musics = data;
console.log(self.$data.musics);
}
})
}
<div id="playlist" class="panel panel-default">
<div class="panel-body">
<ul>
<li v-repeat="musics.item" >
{{nome}}
</li>
<ul>
<div>
</div>
I can't get the code to work.. why?
I think the problem is that musics is not initially part of your Vue data, so when you set its value using self.$data.musics = data, Vue doesn't know it needs to watch it. Instead you need to use the $add method like this:
self.$set("musics", data);
From the VueJs Guide:
In ECMAScript 5 there is no way to detect when a new property is added to an Object, or when a property is deleted from an Object. To deal with that, observed objects will be augmented with two methods: $add(key, value) and $delete(key). These methods can be used to add / delete properties from observed objects while triggering the desired View updates.
this refers to the whole Vue object, so musics object is already accessible via this.musics. More info here in the VueJS API reference and here in the VueJS guide, and more on this here.
With that in mind the code should look something like this:
var playlist = new Vue({
el: '#playlist',
data:{
musics: '',
}
methods: {
compiled: function(){
var self = this;
console.log('test');
$.ajax({
url: 'js/fake-ws.json',
complete: function (data) {
self.musics = data
console.log(self.musics);
}
})
}
}
And the view would be something like this:
<div id="playlist" class="panel panel-default">
<div class="panel-body">
<ul>
<li v-repeat="musics">
{{nome}}
</li>
<ul>
</div>
</div>
Also look at the code of this example.
you can do that with vue-resource. Include vue-resource.js into your app or html file and:
{
// GET /someUrl
this.$http.get('/someUrl').then(response => {
// get body data
this.someData = response.body;
}, response => {
// error callback
});
}