Objekte/Arrays verbinden

[69bruno]

Hallöle ins Forum.
Ich bin absoluter Anfänger in JS und habe da aus gegebenem Anlass eine Frage.
Ich betreibe ein phpBB-Forum und beteilige mich gerade an einer Erweiterungsprogrammierung. Leider ist bei uns niemand wirklich firm in Javascript, ich versuche mein Glück also mit Beschreibungen aus dem Internet.
Wir möchten ein fertiges Script einbinden, mit dem man Cookie-Einstellungen setzen kann. Das Script kennt 2 Arten von Cookies, nämlich essenzentielle und "YT".
Soweit so gut, Einbinden hat geklappt. Selbst die Texte im Auswahlfenster können wir mit Sprachvariablen aus dem jeweiligen Board füllen lassen.

Jetzt möchten wir aber angemeldeten Usern zusätzliche Auswahlmöglichkeiten bieten.

Die Auswahlmöglichkeiten werden in einer "config.js" festgelegt. Darin wird eine Variable definiert, die diverse Stringwerte enthält und mittendrin wird ein Array (?) mit eckigen Klammern und dem Bezeichner "services:" erzeugt. Etwas eingekürzt:

if(truelog == false){
var Config = {

	version: 1,
	htmlTexts: true,
	embedded: false,
	groupByPurpose: true,
	services: [
		{
			name: 'essentials',
			default: true,
			optOut: false,
			required: true,
			title: 'Login, Session Cookies',
			purposes: ['essential'],
			cookies: [],
		},
		{
			name: 'youtube',
			default: false,
			title: 'Youtube',
			purposes: ['extern'],
			callback : function(consent, app){
			  if (typeof hideAllYoutubeContainer === "function") {
				if (!consent) {
				  hideAllYoutubeContainer();
				} else {
				  showAllYoutubeContainer();
				}
			}
			},
			required: false,
			optOut: false,
			onlyOnce: true,
	},
	],

};
};

Ich habe die Datei geclont und lasse die Original "config.js" nur die Variable füllen, wenn der Boarduser nicht angemeldet ist("truelog" wurde aus php übergeben). Wenn er jedoch angemeldet ist, soll mein clone laufen und die Variable füllen.

Jetzt zum Knackpunkt:
Im Admintool soll der Boardadmin aus (sagen wir mal) 3 weiteren vordefinierten Auswahlmöglichkeiten wählen können, welche cookies er dem einzelnen User anbieten möchte.
Daher fragt meine clone-config ab, ob die Schalter im Admintool auf "ja" stehen und fügt den erforderlichen Inhalt in je eine Variable ein (part1,part2,part3)

if(truelog == true){
		if(schalter1 == true){
			var part1 ={
			services: [
			{
			name: 'ACP-Eintrag1',
			default: false,
			title: 'ACP-Eintrag1',
			purposes: ['extern'],
			callback : function(consent, app){
			  if (typeof hideAllYoutubeContainer === "function") {
				if (!consent) {
				  hideAllYoutubeContainer();
				} else {
				  showAllYoutubeContainer();
				}
			}
			},
			required: false,
			optOut: false,
			onlyOnce: true,
			},
		],
		};

Diese Variablen möchte ich jetzt dem Array(?) hinzufügen.
Ich habe es mit Object.assign() versucht, dann überschreiben aber die optionalen Werte die Originalwerte und ich habe die essenzentiellen Cookies nicht mehr.

Dann habe ich "Config.concat(part1)" versucht, wobei ich die Meldung erhalte, "concat is not a function"

Ich bin mir gar nicht sicher, was ich hier habe. Ist es wirklich ein Array ? kann man den mitten in einer Variable nur durch Angabe der eckigen Klammern definieren ?
Und wie kann ich den erweitern ?

Fragen, Fragen, Fragen.....
Da ich nicht wusste wie ich das in der Suche bezeichnen sollte bitte ich um Nachsicht, wenn es schon einen Beitrag hierzu gibt und um Verlinkung des Beitrags in einer Antwort.

[mikdoe]

Was du gezeigt hast ist ein Objekt. Manchmal auch Hash genannt. Wäre es mit vertretbarem Aufwand möglich, zu zeigen, wie es insgesamt vorher aussieht und nachher aussehen soll?

[69bruno]

Hmmm.....

angeblich musste mein Beitrag freigeschaltet werden, nu isser wech. Also das Ganze nochmal:

Ich poste mal nur meine eigene Konfigurationsdatei, da sie die Originale sozusagen beinhaltet:
Die Variablen truelog, schalter1, schalter2, schalter3 werden von php übergeben und sind boolean. truelog bedeutet, dass nur angemeldete User dieses script ausführen sollen. Für nicht angemeldete läuft das Originalscript.

if(truelog == true){
		if(schalter1 == true){
			var part1 ={
			services: [
			{
			name: 'ACP-Eintrag1',
			default: false,
			title: 'ACP-Eintrag1',
			purposes: ['extern'],
			callback : function(consent, app){
			  if (typeof hideAllYoutubeContainer === "function") {  //das muss später noch angepasst werden
				if (!consent) {
				  hideAllYoutubeContainer();
				} else {
				  showAllYoutubeContainer();
				}
			}
			},
			required: false,
			optOut: false,
			onlyOnce: true,
			},
		],
		};
		} else {part1 = null};
		if(schalter2 == true){
			var part2 ={
			services: [
			{
			name: 'ACP-Eintrag2',
			default: false,
			title: 'ACP-Eintrag2',
			purposes: ['extern'],
			callback : function(consent, app){
			  if (typeof hideAllYoutubeContainer === "function") {  //das muss später noch angepasst werden
				if (!consent) {
				  hideAllYoutubeContainer();
				} else {
				  showAllYoutubeContainer();
				}
			}
			},
			required: false,
			optOut: false,
			onlyOnce: true,
			},
		],
		};
		} else {part2 = null};
		if(schalter3 == true){
			var part3 ={
			services: [
			{
			name: 'ACP-Eintrag3',
			default: false,
			title: 'ACP-Eintrag3',
			purposes: ['extern'],
			callback : function(consent, app){
			  if (typeof hideAllYoutubeContainer === "function") {  //das muss später noch angepasst werden
				if (!consent) {
				  hideAllYoutubeContainer();
				} else {
				  showAllYoutubeContainer();
				}
			}
			},
			required: false,
			optOut: false,
			onlyOnce: true,
			},
		],
		};
		} else {part3 = null};
// somit sind die im Admintool des Boards möglichen Einstellungen abgefragt und in die "partx"-Variablen geschrieben.
// Es folgt das Originalscript
var ConfigPart1 = {
	version: 1,
	htmlTexts: true,
	embedded: false,
	groupByPurpose: true,
	cookieExpiresAfterDays: 365,
	default: false,
	mustConsent: false,
	acceptAll: true,
	hideDeclineAll: false,
	hideLearnMore: false,
	noticeAsModal: false,
	lang: 'pp',
	translations: {

		pp: {
			consentNotice: {
				description: d1,
				learnMore: zc,
			},
			save: a5,
			acceptAll: a1,
			acceptSelected: a3,
			decline: a4,
			ok: a2,
			poweredBy: pb,
			service: {
				disableAll: {
					description: d2,
					title: t1
				},
				optOut: {
					description: o1,
					title: "(Opt-out)"
				},
				purpose: p1,
				purposes: p2,
				required: {
					description: d3,
					title: t2
				}
			},
			purposeItem: {
				service: s1,
				services: s2
			},
			consentModal: {
				title: t3,
				description: d4,
			},
			inlineTracker: {
				description: 'Beispiel für ein Inline-Tracking Skript',
			},
			externalTracker: {
				description: 'Beispiel für ein externes Tracking Skript',
			},
			purposes: {
				essential: {
					description: d5,
					title: t4
				},
				extern: {
					description: d6,
					title: t5
				},
			},
		},
	},

	// This is a list of third-party services that Klaro will manage for you.
	services: [
		{
			name: 'essentials',
			default: true,
			optOut: false,
			required: true,
			title: 'Login, Session Cookies',
			purposes: ['essential'],
			cookies: [],
		},
		{
			name: 'youtube',
			default: false,
			title: 'Youtube',
			purposes: ['extern'],
			callback : function(consent, app){
			  if (typeof hideAllYoutubeContainer === "function") {
				if (!consent) {
				  hideAllYoutubeContainer();
				} else {
				  showAllYoutubeContainer();
				}
			}
			},
			required: false,
			optOut: false,
			onlyOnce: true,
	},
	],
};
// jetzt sind auch die services vom Original geladen. Nun müssen sie zu einem Objekt "services" zusammengeführt werden. Mein Ansatz war dieser:
var Config = Object.assign({}, ConfigPart1, part1, part2, part3);
// klappt aber nicht, da die Eigenschaften in Reihenfolge der Parameter überschrieben werden. Gestern 
// abend habe ich noch etwas rumgesucht und bin auf einen Befehl "merge" gestoßen, den ich mir näher 
// ansehen muss. 
};

[69bruno]

Hat keiner eine Idee, wie man die Eigenschaften zusammenführen kann, ohne das sie überschrieben werden ?

- - - Aktualisiert - - -

Ich habe noch das hier aus dem Internet versucht:

function mergeArrayObjects(ConfigPart1,part1){
  return ConfigPart1.map((item,i)=>{
     if(item.id === part1[i].id){
         //merging two objects
       return Object.assign({},item,part1[i])
     }
  });
};

Dann bekomme ich aber den Fehler, dass Config.map keine Funktion sei.

Man muss doch irgendwie die Properties zusammenführen können. Von mir aus benenne ich sie um und führe sie in einem neuen Objekt mit neuem Bezeichner zusammen, aber wie ?

[mikdoe]

Soweit es mich betrifft habe ich nicht verstanden, was genau raus kommen soll. Kannst du das mal reduzieren auf das Nötigste und zeigen, was die Ausgangslage ist und was raus kommen soll?

[69bruno]

Soweit es mich betrifft habe ich nicht verstanden, was genau raus kommen soll. Kannst du das mal reduzieren auf das Nötigste und zeigen, was die Ausgangslage ist und was raus kommen soll?

OK, so kurz wie es geht.

In einer config-Datei gibt es die Beschreibung einer Variablen, die 2 Datenblöcke unter einem Bezeichner "services:" hat.

var config = {
services: [
{
name: 'essenzentiell'},
{
name: 'youtube'},
};
]

Dadurch erhalte ich ein Dialogfenster mit 2 Schaltern, mit denen ich Cookies "essenzentiell" oder für "Youtube" erlauben kann.

Ich möchte jetzt dem Objekt dynamisch eine weitere Egenschaft unter dem Bezeichner "services" mitgeben.

var part1 = {        
services: [
{name:'z.B. Twitter'
};
]

Damit sollte ein dritter Schalter auftauchen, mit dem ich Cookies für z.B. Twitter erlauben kann.

Wenn ich aber mit

var merge = Obect.assign({},config, part1)

arbeite, bleibt in "merge" nur noch der Teil aus part1, da die Eigenschaften in Parameterreihenfolge überschrieben werden.

Wie bekomme ich eine Variable, die alle Eigenschaften des Bezeichners "services" vereint ?

[69bruno]

Schon 2 mal versucht, dieses Forum frisst anscheinend Beiträge....
Werde es morgen nochmal versuchen.

[mikdoe]

Schon 2 mal versucht, dieses Forum frisst anscheinend Beiträge....

Wenn da steht, dass es freigeschaltet werden muss brauchst du nichts weiter zu unternehmen.

[mikdoe]

Schau mal ob das so geht:

<!DOCTYPE html>
<html>
	<head>
		<title>Test</title>
		<meta charset="utf-8">
	</head>

	<body>
		<div id="out1" style="padding:10px;"></div>
		<div id="out2" style="padding:10px;"></div>
		<div id="out3" style="padding:10px;"></div>
		<a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Array/push" target="_new" style="padding:10px;">
			Funktion .push()
		</a>

		<script>
			var config = {
				services: [
					{
						name:	'essenzentiell',
					},
					{
						name:	'youtube',
					},
				],
			};
			document.getElementById('out1').innerHTML = JSON.stringify(config);

			var part1 = {
				services: [
					{
						name:	'z.B. Twitter',
					},
				],
			};
			document.getElementById('out2').innerHTML = JSON.stringify(part1);

			config.services.push(part1.services);
			document.getElementById('out3').innerHTML = JSON.stringify(config);
		</script>
	</body>
</html>

[69bruno]

Wenn da steht, dass es freigeschaltet werden muss brauchst du nichts weiter zu unternehmen.

Das stand da ja nicht. Diese Meldung habe ich nur ein einziges mal erhalten.
Deinen Code werde ich ausprobieren, danke.

Auch dieser Post musste nicht freigeschaltet werden.

- - - Aktualisiert - - -

Danke,

alleine diese Zeile:

config.services.push(part1.services);

brachte den Erfolg.
Die Zeilen mit

document.getElementById

brachten immer einen Fehler, deshalb hatte ich sie mal auskommentiert und siehe da, die eine kleine Zeile macht, was ich möchte.....

[mikdoe]

alleine diese Zeile:

config.services.push(part1.services);

brachte den Erfolg.

Freut mich.

Die Zeilen mit

document.getElementById

brachten immer einen Fehler, deshalb hatte ich sie mal auskommentiert und siehe da, die eine kleine Zeile macht, was ich möchte.....

Die war ja nur für dich, damit du das Ergebnis siehst.
Du brauchst von meinem ganzen Code nur die Zeile mit dem .push(). Der Rest war nur zum schrittweisen Lernen auch was Klammersetzung, Darstellung, Einrückungen, vollständiges und korrektes HTML5 usw. betrifft