We Keep Coding

Javascript loop through JSON with array

I need a little help with a loop in JavaScript.
Please see the JSON data below
{
"blogs":{
"id1":{
"title":"Title 1",
"date":"test_date",
"datestamp":"test_datestamp 1",
"content":"The content",
"url":"https:\/\/www.testlink1.com",
"tags":["move","New"]
},
"id2":{
"title":"Title 2",
"date":"test_date",
"datestamp":"test_datestamp 2",
"content":"The content 2",
"url":"https:\/\/www.testlink2.com",
"tags":["Netherlands","Yellow"]
}
}
}
Next I parse the JSON like below
data = JSON.parse(this.response); //This JSON is the result from an AJAX call to a PHP file
For using the data I do this
for(let id in data.blogs){
console.log(data.posts[id].date);
console.log(data.posts[id].title);
//etc.
}
But how can I loop the tags array inside this loop?
I tried this but with no result
for(let id in data.blogs){
for(let tag in data.blogs.tags){
alert(data.blogs[id].tags[tag]);
}
}
Who can help me with this?

But how can I loop the tags array inside this loop?
You need to identify the blog item currently in the process loop.
Here due example, note the for-in as you wrote or the for-of loop to cycle the items.
const data = {
blogs: {
id1: {
title: 'Title 1',
date: 'test_date',
datestamp: 'test_datestamp 1',
content: 'The content',
url: 'https://www.testlink1.com',
tags: ['move', 'New']
},
id2: {
title: 'Title 2',
date: 'test_date',
datestamp: 'test_datestamp 2',
content: 'The content 2',
url: 'https://www.testlink2.com',
tags: ['Netherlands', 'Yellow']
}
}
}
for (const blogId in data.blogs) {
const blogItem = data.blogs[blogId]
console.log(`looping ${blogItem.title}`)
for (const tag of blogItem.tags) {
console.log(tag)
}
}
for (const blogItem of Object.values(data.blogs)) {
console.log(`looping ${blogItem.title}`)
for (const tag of blogItem.tags) {
console.log(tag)
}
}

Angularjs splice array of objects inside of an object always removes last object

I have an object which contains an array of objects called "blocks":
$scope.microsite = {
images: [
{url: "https://unsplash.it/800/400/?image=20"},
{url: "https://unsplash.it/800/400/?image=15"},
{url: "https://unsplash.it/800/400/?image=52"}
],
blocks: []
};
When I add stuff to this array, it behaves perfectly normally:
$scope.addElement = function(a){
if(a=='heroslider'){
var data = {
slides: [
{
id:0,
image:0,
title: "Title",
desc: "Description",
},
{
id:1,
image:1,
title: "Title",
desc: "Description",
},
{
id:2,
image:2,
title: "Title",
desc: "Description",
}
]
};
} else if(a=='threecol'){
var data = {
columns: [
{
title: "Column one",
text: "This is a column for features",
},
{
title: "Column two",
text: "This is a column for features",
}
]
};
}
var element = {
template: a,
data: data
};
$scope.microsite.blocks.push(element);
}
However when I try to remove an object from the array by calling this function on ng-click and passing in the object from an ng-repeat...
$scope.removeElement = function(element){
var x = $scope.microsite.blocks.indexOf(element);
console.log($scope.microsite.blocks[x]);
console.log(x);
$scope.microsite.blocks.splice(x, 1);
}
I am able to get both the correct object and the correct index in my console, but when it goes to splice the array, the last object is always being deleted which is very strange as this should only be happening when the index I'm trying to delete doesn't exist (and therefore would equal -1)
Any ideas why this could be happening?
EDIT: I have also tried using ng-click="microsite.blocks.splice($index, 1)" directly in the element, as well as passing the $index into the function instead of the element. In all cases, the correct index is found, but the result is still the same, only the last entry is ever deleted.

Turns out this was an error with "track by $index" in Angular. After removing "track by $index" from my ng-repeat, splice() functioned normally.

Add a disabled option item dynamically, using ng-options

I'm just trying to create a separator for my select/option dropdown menu and am having trouble doing so. i'm trying to create a dropdown that looks like this:
NO IMAGE
CUSTOM IMAGE
rest of data....
I feel like what i'm doing should work but it's not... any help?
controller
$scope.teamListWithOptions.push({ name: "NO IMAGE" }, { name: "CUSTOM IMAGE" }, { name: "____________", notSelectable: true });
//this just adds the rest of the data
for (var a = 0; a < data.length; a++) {
$scope.teamListWithOptions.push(data[a]);
}
html
<select class="form-control" ng-model="contentTeam1Selected" ng-change="selectContentTeam1(contentTeam1Selected)"
ng-options="team as team.name for team in teamListWithOptions" ng-disabled="team.notSelectable">
</select>

If you are using a more recent version of angular (>= 1.4 i think), you can use the disable when syntax inside the ng-options attribute. For example:
ng-option="p as p.name disable when p.show == false for p in people"
I have created an example fiddle here: http://jsfiddle.net/wwu071so/1/

You could probably use orderBy to create an optgroup and get the effect you want.
http://jsfiddle.net/wwu071so/
<select
ng-options="p as p.name group by p.show for p in people | orderBy:'show'"
ng-model="selectedPerson"></select>
$scope.people = [
{ id: 1, name: 'Image' },
{ id: 2, name: 'Custom'},
{ id: 3, name: 'John', show: ' ' },
{ id: 4, name: 'Ben', show: ' ' }
];
$scope.selectedPerson = $scope.people[3];

How to dynamically add and remove GROUPS to KendoUI Scheduler

I am using KendoUI Scheduler control and here is initialization code
$("#Scheduler").kendoScheduler({
dataSource: [],
selectable: true,
height: 500,
editable: false,
eventTemplate: $("#event-template").html(),
views: [
"day",
{ type: "week", selected: true },
"month",
"agenda"
],
resources: [
{
field: "resourceviewid",
name: "ResourceViews",
dataColorField: "key",
dataSource: [
{ text: "Appointments", value: 1, key: "orange" },
{ text: "Delivery Specialist", value: 2, key: "blue" },
{ text: "Orientation Specialist", value: 3, key: "green" }
]
}
],
group: {
resources: ["ResourceViews"],
orientation: "horizontal"
}
});
Here "Appointments" group is default, it will be available always
I have check box in my screen
<div id="divResourceView">
<label><input checked type="checkbox" value="1" />Delivery Specialist</label>
<label><input checked type="checkbox" value="2" />Orientation Specialist</label>
</div>
On change event I wrote below code to get selected values from checkbox and updating GROUP datasource of KendoUI scheduler as below
$("#divResourceView :checkbox").change(function (e) {
var checked = $.map($("#divResourceView :checked"), function (checkbox) {
return parseInt($(checkbox).val());
});
});
var scheduler = $("#Scheduler").data("kendoScheduler");
var arrayOfStrings = checked.toString().split(",");
for (var i = 0; i < arrayOfStrings.length; i++)
{
if(arrayOfStrings[i] == 1)
{
var data = [{ text: "Delivery Specialist", value: 2, color: "blue" }];
scheduler.resources[1].dataSource.data(data);
}
if (arrayOfStrings[i] == 2) {
var data = [{ text: "Orientation Specialist", value: 3, color: "green" }];
scheduler.resources[2].dataSource.data(data);
}
}
scheduler.refresh();
But it removes all groups and add only one. I want to see both groups when arrayOfStrings has values "1,2",
I can see all groups during initialization But it disappears when i check the check box.
Images for reference
During Initialization
After
As you can see clearly, Delivery Specialist is missing in scheduler control
Found some link: http://www.telerik.com/forums/add-filter-to-resource-datasource
But not sure what they talking about? seems like refresh issue.

I have done this I believe you're right and your issue is to do with refreshing, I use the following to refresh it.
var scheduler = $("#scheduler").data("kendoScheduler");
scheduler.view(scheduler.view().name);
hope this helps through it is stupidly late (I'm currently looking up how to do this lazerly

items not within the <ul></ul>

I create a menu with a javascript object and jquery. I have certain items that needs to be in the <ul></ul> but instead they're beneath it.
http://jsfiddle.net/MWBt6/
I have 'Index' for example. In there I want to append a list of items.
I know the category id is 0 and the item id is 2, i stored those things in the data attribute.
Now how can I append a ul to that one?

That's not how append works. You need to create the elements on their own. Here:
var loadPath = "resources/books/book1/";
var menu = {
data: [{
name: "the book",
id: 0,
items: [{
name: "Introduction",
id: 0,
target: "inleiding.html"
}, {
name: "Content",
id: 1
}, {
name: "Index",
id: 2
}]
}, {
name: "my stuff",
id: 1,
items: [{
name: "Notes",
id: 0
}, {
name: "Marks",
id: 1
}]
}, {
name: "other",
id: 2,
items: [{
name: "Search",
id: 0
}, {
name: "Continue Reading",
id: 1
}]
}]
}
$(document).ready(function() {
var $menu = $('#menu');
for(var i = 0; i < menu.data.length; i++) {
var categorie = menu.data[i];
var categorieName = categorie.name;
var categorieId = categorie.id;
var items = categorie.items;
console.log("categorieName: " + categorieName);
var list = $('<ul>');
for(var j = 0; j < items.length; j++) {
var itemId = items[j].id;
list.append($('<li>').attr('data-itemId', itemId).text(items[j].name));
}
$menu.append(
$('<li>').attr('data-categorieId', categorieId).append(categorieName, list)
);
}
});​
Here's the updated jsFiddle.

You are trying to append as if the DOM is a text editor. You can't append the beginning of an element with it's opening tag, then later close that element with an append of a closing tag. Only full valid elements can be inserted into the DOM.
Instead, build an html string, then only make one append after the string is completed. This method is far more efficient than doing multiple appends also
Working demo: http://jsfiddle.net/MWBt6/3/