How to create a jQuery loop to change anchor links based on JSON file
1
I have a page which contains a select drop down, which contains country names, this then displays logos for brands based in that country.
However each of these brands have a country specific URL, which will need to change depending on the user selected country from the select.
The JSON file has the Brand Names that match the same names used for my data attribute.
Here is an idea of how the JSON structure is:
{
"US": [
{ "Brand": "Brand1", "Link": "http://www.example.com/" }
],
"Germany": [
{ "Brand": "Brand1", "Link": "http://www.example.com/de" },
{ "Brand": "Brand2", "Link": "http://www.example.com/germany" }
],
"France": [
{ "Brand": "Brand1", "Link": "http://www.example.com/france" },
{ "Brand": "Brand3", "Link": "http://www.example.com/fr" },
{ "Brand": "Brand4", "Link": "http://www.example.com/french-site" },
{ "Brand": "Brand5", "Link": "http://www.example.com/francais" }
],
"UK": [
{ "Brand": "Brand1", "Link": "http://www.example.net/" },
{ "Brand": "Brand3", "Link": "http://www.example.org" },
{ "Brand": "Brand6", "Link": "http://www.example.co.uk" }
]
}
How can I loop through my list of brand logos using jQuery, using the data-brand-name attribute in my markup, to change the anchor links based on what I have in my JSON file?
For example like:
When user selects France from the select drop down, the brands belonging to French show up. I want the French links for these brands to be added into the anchor of the li tags.
Here is an example of my HTML:
<select name="select-choice" id="selectCountry">
<option value="UK">UK</option>
<option value="US">US</option>
<option value="Germany">Germany</option>
<option value="France">France</option>
</select>
<div class="brand-logo--wrapper container">
<ul class="flex">
<li class="brand-logo-bg brand1 green-underline" data-brand-name="Brand1">
<a href="" target="_blank"></a>
</li>
<li class="brand-logo-bg brand2 green-underline" data-brand-name="Brand2">
<a href="" target="_blank"></a>
</li>
<li class="brand-logo-bg brand3 green-underline" data-brand-name="Brand3">
<a href="" target="_blank"></a>
</li>
<li class="brand-logo-bg brand4 green-underline" data-brand-name="Brand4">
<a href="" target="_blank"></a>
</li>
<li class="brand-logo-bg brand5" data-brand-name="Brand5">
<a href="" target="_blank"></a>
</li>
<li class="brand-logo-bg brand6" data-brand-name="Brand6">
<a href="" target="_blank"></a>
</li>
</ul>
</div>
javascript jquery html json loops
edited Nov 21 '18 at 17:31
kit
1,1063716
asked Nov 21 '18 at 13:41
ImranRImranR
438
add a comment |
1
I have a page which contains a select drop down, which contains country names, this then displays logos for brands based in that country.
However each of these brands have a country specific URL, which will need to change depending on the user selected country from the select.
The JSON file has the Brand Names that match the same names used for my data attribute.
Here is an idea of how the JSON structure is:
{
"US": [
{ "Brand": "Brand1", "Link": "http://www.example.com/" }
],
"Germany": [
{ "Brand": "Brand1", "Link": "http://www.example.com/de" },
{ "Brand": "Brand2", "Link": "http://www.example.com/germany" }
],
"France": [
{ "Brand": "Brand1", "Link": "http://www.example.com/france" },
{ "Brand": "Brand3", "Link": "http://www.example.com/fr" },
{ "Brand": "Brand4", "Link": "http://www.example.com/french-site" },
{ "Brand": "Brand5", "Link": "http://www.example.com/francais" }
],
"UK": [
{ "Brand": "Brand1", "Link": "http://www.example.net/" },
{ "Brand": "Brand3", "Link": "http://www.example.org" },
{ "Brand": "Brand6", "Link": "http://www.example.co.uk" }
]
}
How can I loop through my list of brand logos using jQuery, using the data-brand-name attribute in my markup, to change the anchor links based on what I have in my JSON file?
For example like:
When user selects France from the select drop down, the brands belonging to French show up. I want the French links for these brands to be added into the anchor of the li tags.
Here is an example of my HTML:
<select name="select-choice" id="selectCountry">
<option value="UK">UK</option>
<option value="US">US</option>
<option value="Germany">Germany</option>
<option value="France">France</option>
</select>
<div class="brand-logo--wrapper container">
<ul class="flex">
<li class="brand-logo-bg brand1 green-underline" data-brand-name="Brand1">
<a href="" target="_blank"></a>
</li>
<li class="brand-logo-bg brand2 green-underline" data-brand-name="Brand2">
<a href="" target="_blank"></a>
</li>
<li class="brand-logo-bg brand3 green-underline" data-brand-name="Brand3">
<a href="" target="_blank"></a>
</li>
<li class="brand-logo-bg brand4 green-underline" data-brand-name="Brand4">
<a href="" target="_blank"></a>
</li>
<li class="brand-logo-bg brand5" data-brand-name="Brand5">
<a href="" target="_blank"></a>
</li>
<li class="brand-logo-bg brand6" data-brand-name="Brand6">
<a href="" target="_blank"></a>
</li>
</ul>
</div>
javascript jquery html json loops
edited Nov 21 '18 at 17:31
kit
1,1063716
asked Nov 21 '18 at 13:41
ImranRImranR
438
add a comment |
1
1
1
I have a page which contains a select drop down, which contains country names, this then displays logos for brands based in that country.
However each of these brands have a country specific URL, which will need to change depending on the user selected country from the select.
The JSON file has the Brand Names that match the same names used for my data attribute.
Here is an idea of how the JSON structure is:
{
"US": [
{ "Brand": "Brand1", "Link": "http://www.example.com/" }
],
"Germany": [
{ "Brand": "Brand1", "Link": "http://www.example.com/de" },
{ "Brand": "Brand2", "Link": "http://www.example.com/germany" }
],
"France": [
{ "Brand": "Brand1", "Link": "http://www.example.com/france" },
{ "Brand": "Brand3", "Link": "http://www.example.com/fr" },
{ "Brand": "Brand4", "Link": "http://www.example.com/french-site" },
{ "Brand": "Brand5", "Link": "http://www.example.com/francais" }
],
"UK": [
{ "Brand": "Brand1", "Link": "http://www.example.net/" },
{ "Brand": "Brand3", "Link": "http://www.example.org" },
{ "Brand": "Brand6", "Link": "http://www.example.co.uk" }
]
}
How can I loop through my list of brand logos using jQuery, using the data-brand-name attribute in my markup, to change the anchor links based on what I have in my JSON file?
For example like:
When user selects France from the select drop down, the brands belonging to French show up. I want the French links for these brands to be added into the anchor of the li tags.
Here is an example of my HTML:
<select name="select-choice" id="selectCountry">
<option value="UK">UK</option>
<option value="US">US</option>
<option value="Germany">Germany</option>
<option value="France">France</option>
</select>
<div class="brand-logo--wrapper container">
<ul class="flex">
<li class="brand-logo-bg brand1 green-underline" data-brand-name="Brand1">
<a href="" target="_blank"></a>
</li>
<li class="brand-logo-bg brand2 green-underline" data-brand-name="Brand2">
<a href="" target="_blank"></a>
</li>
<li class="brand-logo-bg brand3 green-underline" data-brand-name="Brand3">
<a href="" target="_blank"></a>
</li>
<li class="brand-logo-bg brand4 green-underline" data-brand-name="Brand4">
<a href="" target="_blank"></a>
</li>
<li class="brand-logo-bg brand5" data-brand-name="Brand5">
<a href="" target="_blank"></a>
</li>
<li class="brand-logo-bg brand6" data-brand-name="Brand6">
<a href="" target="_blank"></a>
</li>
</ul>
</div>
javascript jquery html json loops
edited Nov 21 '18 at 17:31
kit
1,1063716
asked Nov 21 '18 at 13:41
ImranRImranR
438
I have a page which contains a select drop down, which contains country names, this then displays logos for brands based in that country.
However each of these brands have a country specific URL, which will need to change depending on the user selected country from the select.
The JSON file has the Brand Names that match the same names used for my data attribute.
Here is an idea of how the JSON structure is:
{
"US": [
{ "Brand": "Brand1", "Link": "http://www.example.com/" }
],
"Germany": [
{ "Brand": "Brand1", "Link": "http://www.example.com/de" },
{ "Brand": "Brand2", "Link": "http://www.example.com/germany" }
],
"France": [
{ "Brand": "Brand1", "Link": "http://www.example.com/france" },
{ "Brand": "Brand3", "Link": "http://www.example.com/fr" },
{ "Brand": "Brand4", "Link": "http://www.example.com/french-site" },
{ "Brand": "Brand5", "Link": "http://www.example.com/francais" }
],
"UK": [
{ "Brand": "Brand1", "Link": "http://www.example.net/" },
{ "Brand": "Brand3", "Link": "http://www.example.org" },
{ "Brand": "Brand6", "Link": "http://www.example.co.uk" }
]
}
How can I loop through my list of brand logos using jQuery, using the data-brand-name attribute in my markup, to change the anchor links based on what I have in my JSON file?
For example like:
When user selects France from the select drop down, the brands belonging to French show up. I want the French links for these brands to be added into the anchor of the li tags.
Here is an example of my HTML:
<select name="select-choice" id="selectCountry">
<option value="UK">UK</option>
<option value="US">US</option>
<option value="Germany">Germany</option>
<option value="France">France</option>
</select>
<div class="brand-logo--wrapper container">
<ul class="flex">
<li class="brand-logo-bg brand1 green-underline" data-brand-name="Brand1">
<a href="" target="_blank"></a>
</li>
<li class="brand-logo-bg brand2 green-underline" data-brand-name="Brand2">
<a href="" target="_blank"></a>
</li>
<li class="brand-logo-bg brand3 green-underline" data-brand-name="Brand3">
<a href="" target="_blank"></a>
</li>
<li class="brand-logo-bg brand4 green-underline" data-brand-name="Brand4">
<a href="" target="_blank"></a>
</li>
<li class="brand-logo-bg brand5" data-brand-name="Brand5">
<a href="" target="_blank"></a>
</li>
<li class="brand-logo-bg brand6" data-brand-name="Brand6">
<a href="" target="_blank"></a>
</li>
</ul>
</div>
javascript jquery html json loops
javascript jquery html json loops
edited Nov 21 '18 at 17:31
kit
1,1063716
asked Nov 21 '18 at 13:41
ImranRImranR
438
edited Nov 21 '18 at 17:31
kit
1,1063716
asked Nov 21 '18 at 13:41
ImranRImranR
438
edited Nov 21 '18 at 17:31
kit
1,1063716
edited Nov 21 '18 at 17:31
kit
1,1063716
edited Nov 21 '18 at 17:31
kit
1,1063716
1,1063716
asked Nov 21 '18 at 13:41
ImranRImranR
438
asked Nov 21 '18 at 13:41
ImranRImranR
438
asked Nov 21 '18 at 13:41
ImranRImranR
438
438
add a comment |
add a comment |
3 Answers
3
active
oldest
votes
0
You don't need any hard-coded, empty links that need to be looped over and configured. Just build the list items and the links dynamically based on looping over your object and then append the newly created items to the list.
See comments for further details:
let myObj = {
"US": [
{ "Brand": "Brand1", "Link": "http://www.example.com/" }
],
"Germany": [
{ "Brand": "Brand1", "Link": "http://www.example.com/de" },
{ "Brand": "Brand2", "Link": "http://www.example.com/germany" }
],
"France": [
{ "Brand": "Brand1", "Link": "http://www.example.com/france" },
{ "Brand": "Brand3", "Link": "http://www.example.com/fr" },
{ "Brand": "Brand4", "Link": "http://www.example.com/french-site" },
{ "Brand": "Brand5", "Link": "http://www.example.com/francais" }
],
"UK": [
{ "Brand": "Brand1", "Link": "http://www.example.net/" },
{ "Brand": "Brand3", "Link": "http://www.example.org" },
{ "Brand": "Brand6", "Link": "http://www.example.co.uk" }
]
};
// Locate the correct DOM element to work with
let $list = $("ul.flex");
// Set up a change event handler on the select
$("#selectCountry").on("change", function(){
$list.html(""); // Clear out old list entries
let country = $(this).val(); // Store the country name
// Loop over all the corresponding links in the object
$(myObj[country]).each(function(idx, item){
// Conditionally set the green-underline class
let gu = this.Brand.replace("Brand", "") > 4 ? "" : "green-underline";
// Create a new bullet with hyperlink in it
let $newItem = $('<li class="brand-logo-bg ' + item.Brand + ' ' + gu + ' ' + country + '" data-brand-name="' + item.Brand + '"><a href="' + item.Link + '" target="_blank">' + item.Brand + '</a></li>');
// and append to list
$list.append($newItem);
});
});li { padding-bottom: 3px; }
.green-underline a { text-decoration:none; border-bottom:2px dashed green; }
.US { background-color:aliceblue; }
.Germany { background-color:lightgreen; }
.France { background-color:#f99; }
.UK { background-color:#ff9; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="select-choice" id="selectCountry">
<option value="">--- Please Select Country ---</option>
<option value="UK">UK</option>
<option value="US">US</option>
<option value="Germany">Germany</option>
<option value="France">France</option>
</select>
<div class="brand-logo--wrapper container">
<ul class="flex"></ul>
</div>answered Nov 21 '18 at 14:06
Scott MarcusScott Marcus
38.3k52036
Thanks - I need the list items hardcoded as they contain the classes to show the background image for each brand. The list items will also have the country names they belong to as class names, so that they show/hide based on user selection. (unfortunately this wasn't done using an object in the first place, so have to continue with it for now)
– ImranR
Nov 21 '18 at 14:13
@ImranR My solution is already adding the class names you showed in your post. Any other data can easily be added dynamically as well. I'll update the post to show this.
– Scott Marcus
Nov 21 '18 at 15:51
@ImranR Take a look at my updated answer. In particular, select France and look at the results, then right-click any of the hyperlinks and choose "Inspect". You will see that the right classes get added to the bullets.
– Scott Marcus
Nov 21 '18 at 16:11
add a comment |
0
Add onchange event listener to the select and pass the value of the selected option. The retrieve the value using the selected option from the json.
Instead of hardcoding the list in the html , create dynamic li while iterating the json
let json = {
"US": [{
"Brand": "Brand1",
"Link": "http://www.example.com/"
}],
"Germany": [{
"Brand": "Brand1",
"Link": "http://www.example.com/de"
},
{
"Brand": "Brand2",
"Link": "http://www.example.com/germany"
}
],
"France": [{
"Brand": "Brand1",
"Link": "http://www.example.com/france"
},
{
"Brand": "Brand3",
"Link": "http://www.example.com/fr"
},
{
"Brand": "Brand4",
"Link": "http://www.example.com/french-site"
},
{
"Brand": "Brand5",
"Link": "http://www.example.com/francais"
}
],
"UK": [{
"Brand": "Brand1",
"Link": "http://www.example.net/"
},
{
"Brand": "Brand3",
"Link": "http://www.example.org"
},
{
"Brand": "Brand6",
"Link": "http://www.example.co.uk"
}
]
}
function showBrand(val) {
let brandList = '';
json[val].forEach(function(item) {
brandList += `<li class="brand-logo-bg brand1 green-underline" data-brand-name="${item.Brand}">
<a href="" target="_blank">${item.Brand}</a>
</li>`
})
document.getElementById('brands').innerHTML = brandList;
}<select name="select-choice" id="selectCountry" onchange='showBrand(this.value)'>
<option value="" selected>Select</option>
<option value="UK">UK</option>
<option value="US">US</option>
<option value="Germany">Germany</option>
<option value="France">France</option>
</select>
<div class="brand-logo--wrapper container">
<ul class="flex" id='brands'>
</ul>
</div>answered Nov 21 '18 at 13:54
brkbrk
26k31940
Thanks - unfortunately I need to do this using jQuery
– ImranR
Nov 21 '18 at 14:03
add a comment |
0
As solution, I first loop through the country keys and add them into the select with append(). Then when someone select one country, it update the list with their names and links that belong to the country.
objs = {
"US": [
{ "Brand": "Brand1", "Link": "http://www.example.com/" }
],
"Germany": [
{ "Brand": "Brand1", "Link": "http://www.example.com/de" },
{ "Brand": "Brand2", "Link": "http://www.example.com/germany" }
],
"France": [
{ "Brand": "Brand1", "Link": "http://www.example.com/france" },
{ "Brand": "Brand3", "Link": "http://www.example.com/fr" },
{ "Brand": "Brand4", "Link": "http://www.example.com/french-site" },
{ "Brand": "Brand5", "Link": "http://www.example.com/francais" }
],
"UK": [
{ "Brand": "Brand1", "Link": "http://www.example.net/" },
{ "Brand": "Brand3", "Link": "http://www.example.org" },
{ "Brand": "Brand6", "Link": "http://www.example.co.uk" }
]
};
$.each(objs, function(country, brands){
$("#selectCountry").append('<option value="' + country + '">' + country + '</option>');
});
$("#selectCountry").change(function(){
let brands = objs[$("#selectCountry").val()];
$.each(brands, function(key, brand){
$("#myList").append('<li class="brand-logo-bg ' + brand.Brand.toLowerCase() + ' green-underline" data-brand-name="' + brand.Brand + '"><a href="' + brand.Link + '" target="_blank">' + brand.Brand + '</a></li>');
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="select-choice" id="selectCountry">
<option value=""></option>
</select>
<div class="brand-logo--wrapper container">
<ul class="flex" id="myList"></ul>
</div>I hope it will help!
Hello @ImranR, as I can see there is a lot of solution. My distinctively, dynamically use key for feeding the select, provide the anchor text and links, and use 100% jQuery. Moreover, I thought aboutbrand.Brand.toLowerCase()in order to keep the same class name format. I hope it is fitting with your needs.
– user10421833
Nov 21 '18 at 14:19
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53413381%2fhow-to-create-a-jquery-loop-to-change-anchor-links-based-on-json-file%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
You don't need any hard-coded, empty links that need to be looped over and configured. Just build the list items and the links dynamically based on looping over your object and then append the newly created items to the list.
See comments for further details:
let myObj = {
"US": [
{ "Brand": "Brand1", "Link": "http://www.example.com/" }
],
"Germany": [
{ "Brand": "Brand1", "Link": "http://www.example.com/de" },
{ "Brand": "Brand2", "Link": "http://www.example.com/germany" }
],
"France": [
{ "Brand": "Brand1", "Link": "http://www.example.com/france" },
{ "Brand": "Brand3", "Link": "http://www.example.com/fr" },
{ "Brand": "Brand4", "Link": "http://www.example.com/french-site" },
{ "Brand": "Brand5", "Link": "http://www.example.com/francais" }
],
"UK": [
{ "Brand": "Brand1", "Link": "http://www.example.net/" },
{ "Brand": "Brand3", "Link": "http://www.example.org" },
{ "Brand": "Brand6", "Link": "http://www.example.co.uk" }
]
};
// Locate the correct DOM element to work with
let $list = $("ul.flex");
// Set up a change event handler on the select
$("#selectCountry").on("change", function(){
$list.html(""); // Clear out old list entries
let country = $(this).val(); // Store the country name
// Loop over all the corresponding links in the object
$(myObj[country]).each(function(idx, item){
// Conditionally set the green-underline class
let gu = this.Brand.replace("Brand", "") > 4 ? "" : "green-underline";
// Create a new bullet with hyperlink in it
let $newItem = $('<li class="brand-logo-bg ' + item.Brand + ' ' + gu + ' ' + country + '" data-brand-name="' + item.Brand + '"><a href="' + item.Link + '" target="_blank">' + item.Brand + '</a></li>');
// and append to list
$list.append($newItem);
});
});li { padding-bottom: 3px; }
.green-underline a { text-decoration:none; border-bottom:2px dashed green; }
.US { background-color:aliceblue; }
.Germany { background-color:lightgreen; }
.France { background-color:#f99; }
.UK { background-color:#ff9; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="select-choice" id="selectCountry">
<option value="">--- Please Select Country ---</option>
<option value="UK">UK</option>
<option value="US">US</option>
<option value="Germany">Germany</option>
<option value="France">France</option>
</select>
<div class="brand-logo--wrapper container">
<ul class="flex"></ul>
</div>answered Nov 21 '18 at 14:06
Scott MarcusScott Marcus
38.3k52036
Thanks - I need the list items hardcoded as they contain the classes to show the background image for each brand. The list items will also have the country names they belong to as class names, so that they show/hide based on user selection. (unfortunately this wasn't done using an object in the first place, so have to continue with it for now)
– ImranR
Nov 21 '18 at 14:13
@ImranR My solution is already adding the class names you showed in your post. Any other data can easily be added dynamically as well. I'll update the post to show this.
– Scott Marcus
Nov 21 '18 at 15:51
@ImranR Take a look at my updated answer. In particular, select France and look at the results, then right-click any of the hyperlinks and choose "Inspect". You will see that the right classes get added to the bullets.
– Scott Marcus
Nov 21 '18 at 16:11
add a comment |
0
You don't need any hard-coded, empty links that need to be looped over and configured. Just build the list items and the links dynamically based on looping over your object and then append the newly created items to the list.
See comments for further details:
let myObj = {
"US": [
{ "Brand": "Brand1", "Link": "http://www.example.com/" }
],
"Germany": [
{ "Brand": "Brand1", "Link": "http://www.example.com/de" },
{ "Brand": "Brand2", "Link": "http://www.example.com/germany" }
],
"France": [
{ "Brand": "Brand1", "Link": "http://www.example.com/france" },
{ "Brand": "Brand3", "Link": "http://www.example.com/fr" },
{ "Brand": "Brand4", "Link": "http://www.example.com/french-site" },
{ "Brand": "Brand5", "Link": "http://www.example.com/francais" }
],
"UK": [
{ "Brand": "Brand1", "Link": "http://www.example.net/" },
{ "Brand": "Brand3", "Link": "http://www.example.org" },
{ "Brand": "Brand6", "Link": "http://www.example.co.uk" }
]
};
// Locate the correct DOM element to work with
let $list = $("ul.flex");
// Set up a change event handler on the select
$("#selectCountry").on("change", function(){
$list.html(""); // Clear out old list entries
let country = $(this).val(); // Store the country name
// Loop over all the corresponding links in the object
$(myObj[country]).each(function(idx, item){
// Conditionally set the green-underline class
let gu = this.Brand.replace("Brand", "") > 4 ? "" : "green-underline";
// Create a new bullet with hyperlink in it
let $newItem = $('<li class="brand-logo-bg ' + item.Brand + ' ' + gu + ' ' + country + '" data-brand-name="' + item.Brand + '"><a href="' + item.Link + '" target="_blank">' + item.Brand + '</a></li>');
// and append to list
$list.append($newItem);
});
});li { padding-bottom: 3px; }
.green-underline a { text-decoration:none; border-bottom:2px dashed green; }
.US { background-color:aliceblue; }
.Germany { background-color:lightgreen; }
.France { background-color:#f99; }
.UK { background-color:#ff9; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="select-choice" id="selectCountry">
<option value="">--- Please Select Country ---</option>
<option value="UK">UK</option>
<option value="US">US</option>
<option value="Germany">Germany</option>
<option value="France">France</option>
</select>
<div class="brand-logo--wrapper container">
<ul class="flex"></ul>
</div>answered Nov 21 '18 at 14:06
Scott MarcusScott Marcus
38.3k52036
Thanks - I need the list items hardcoded as they contain the classes to show the background image for each brand. The list items will also have the country names they belong to as class names, so that they show/hide based on user selection. (unfortunately this wasn't done using an object in the first place, so have to continue with it for now)
– ImranR
Nov 21 '18 at 14:13
@ImranR My solution is already adding the class names you showed in your post. Any other data can easily be added dynamically as well. I'll update the post to show this.
– Scott Marcus
Nov 21 '18 at 15:51
@ImranR Take a look at my updated answer. In particular, select France and look at the results, then right-click any of the hyperlinks and choose "Inspect". You will see that the right classes get added to the bullets.
– Scott Marcus
Nov 21 '18 at 16:11
add a comment |
0
0
0
You don't need any hard-coded, empty links that need to be looped over and configured. Just build the list items and the links dynamically based on looping over your object and then append the newly created items to the list.
See comments for further details:
let myObj = {
"US": [
{ "Brand": "Brand1", "Link": "http://www.example.com/" }
],
"Germany": [
{ "Brand": "Brand1", "Link": "http://www.example.com/de" },
{ "Brand": "Brand2", "Link": "http://www.example.com/germany" }
],
"France": [
{ "Brand": "Brand1", "Link": "http://www.example.com/france" },
{ "Brand": "Brand3", "Link": "http://www.example.com/fr" },
{ "Brand": "Brand4", "Link": "http://www.example.com/french-site" },
{ "Brand": "Brand5", "Link": "http://www.example.com/francais" }
],
"UK": [
{ "Brand": "Brand1", "Link": "http://www.example.net/" },
{ "Brand": "Brand3", "Link": "http://www.example.org" },
{ "Brand": "Brand6", "Link": "http://www.example.co.uk" }
]
};
// Locate the correct DOM element to work with
let $list = $("ul.flex");
// Set up a change event handler on the select
$("#selectCountry").on("change", function(){
$list.html(""); // Clear out old list entries
let country = $(this).val(); // Store the country name
// Loop over all the corresponding links in the object
$(myObj[country]).each(function(idx, item){
// Conditionally set the green-underline class
let gu = this.Brand.replace("Brand", "") > 4 ? "" : "green-underline";
// Create a new bullet with hyperlink in it
let $newItem = $('<li class="brand-logo-bg ' + item.Brand + ' ' + gu + ' ' + country + '" data-brand-name="' + item.Brand + '"><a href="' + item.Link + '" target="_blank">' + item.Brand + '</a></li>');
// and append to list
$list.append($newItem);
});
});li { padding-bottom: 3px; }
.green-underline a { text-decoration:none; border-bottom:2px dashed green; }
.US { background-color:aliceblue; }
.Germany { background-color:lightgreen; }
.France { background-color:#f99; }
.UK { background-color:#ff9; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="select-choice" id="selectCountry">
<option value="">--- Please Select Country ---</option>
<option value="UK">UK</option>
<option value="US">US</option>
<option value="Germany">Germany</option>
<option value="France">France</option>
</select>
<div class="brand-logo--wrapper container">
<ul class="flex"></ul>
</div>answered Nov 21 '18 at 14:06
Scott MarcusScott Marcus
38.3k52036
You don't need any hard-coded, empty links that need to be looped over and configured. Just build the list items and the links dynamically based on looping over your object and then append the newly created items to the list.
See comments for further details:
let myObj = {
"US": [
{ "Brand": "Brand1", "Link": "http://www.example.com/" }
],
"Germany": [
{ "Brand": "Brand1", "Link": "http://www.example.com/de" },
{ "Brand": "Brand2", "Link": "http://www.example.com/germany" }
],
"France": [
{ "Brand": "Brand1", "Link": "http://www.example.com/france" },
{ "Brand": "Brand3", "Link": "http://www.example.com/fr" },
{ "Brand": "Brand4", "Link": "http://www.example.com/french-site" },
{ "Brand": "Brand5", "Link": "http://www.example.com/francais" }
],
"UK": [
{ "Brand": "Brand1", "Link": "http://www.example.net/" },
{ "Brand": "Brand3", "Link": "http://www.example.org" },
{ "Brand": "Brand6", "Link": "http://www.example.co.uk" }
]
};
// Locate the correct DOM element to work with
let $list = $("ul.flex");
// Set up a change event handler on the select
$("#selectCountry").on("change", function(){
$list.html(""); // Clear out old list entries
let country = $(this).val(); // Store the country name
// Loop over all the corresponding links in the object
$(myObj[country]).each(function(idx, item){
// Conditionally set the green-underline class
let gu = this.Brand.replace("Brand", "") > 4 ? "" : "green-underline";
// Create a new bullet with hyperlink in it
let $newItem = $('<li class="brand-logo-bg ' + item.Brand + ' ' + gu + ' ' + country + '" data-brand-name="' + item.Brand + '"><a href="' + item.Link + '" target="_blank">' + item.Brand + '</a></li>');
// and append to list
$list.append($newItem);
});
});li { padding-bottom: 3px; }
.green-underline a { text-decoration:none; border-bottom:2px dashed green; }
.US { background-color:aliceblue; }
.Germany { background-color:lightgreen; }
.France { background-color:#f99; }
.UK { background-color:#ff9; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="select-choice" id="selectCountry">
<option value="">--- Please Select Country ---</option>
<option value="UK">UK</option>
<option value="US">US</option>
<option value="Germany">Germany</option>
<option value="France">France</option>
</select>
<div class="brand-logo--wrapper container">
<ul class="flex"></ul>
</div>let myObj = {
"US": [
{ "Brand": "Brand1", "Link": "http://www.example.com/" }
],
"Germany": [
{ "Brand": "Brand1", "Link": "http://www.example.com/de" },
{ "Brand": "Brand2", "Link": "http://www.example.com/germany" }
],
"France": [
{ "Brand": "Brand1", "Link": "http://www.example.com/france" },
{ "Brand": "Brand3", "Link": "http://www.example.com/fr" },
{ "Brand": "Brand4", "Link": "http://www.example.com/french-site" },
{ "Brand": "Brand5", "Link": "http://www.example.com/francais" }
],
"UK": [
{ "Brand": "Brand1", "Link": "http://www.example.net/" },
{ "Brand": "Brand3", "Link": "http://www.example.org" },
{ "Brand": "Brand6", "Link": "http://www.example.co.uk" }
]
};
// Locate the correct DOM element to work with
let $list = $("ul.flex");
// Set up a change event handler on the select
$("#selectCountry").on("change", function(){
$list.html(""); // Clear out old list entries
let country = $(this).val(); // Store the country name
// Loop over all the corresponding links in the object
$(myObj[country]).each(function(idx, item){
// Conditionally set the green-underline class
let gu = this.Brand.replace("Brand", "") > 4 ? "" : "green-underline";
// Create a new bullet with hyperlink in it
let $newItem = $('<li class="brand-logo-bg ' + item.Brand + ' ' + gu + ' ' + country + '" data-brand-name="' + item.Brand + '"><a href="' + item.Link + '" target="_blank">' + item.Brand + '</a></li>');
// and append to list
$list.append($newItem);
});
});li { padding-bottom: 3px; }
.green-underline a { text-decoration:none; border-bottom:2px dashed green; }
.US { background-color:aliceblue; }
.Germany { background-color:lightgreen; }
.France { background-color:#f99; }
.UK { background-color:#ff9; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="select-choice" id="selectCountry">
<option value="">--- Please Select Country ---</option>
<option value="UK">UK</option>
<option value="US">US</option>
<option value="Germany">Germany</option>
<option value="France">France</option>
</select>
<div class="brand-logo--wrapper container">
<ul class="flex"></ul>
</div>let myObj = {
"US": [
{ "Brand": "Brand1", "Link": "http://www.example.com/" }
],
"Germany": [
{ "Brand": "Brand1", "Link": "http://www.example.com/de" },
{ "Brand": "Brand2", "Link": "http://www.example.com/germany" }
],
"France": [
{ "Brand": "Brand1", "Link": "http://www.example.com/france" },
{ "Brand": "Brand3", "Link": "http://www.example.com/fr" },
{ "Brand": "Brand4", "Link": "http://www.example.com/french-site" },
{ "Brand": "Brand5", "Link": "http://www.example.com/francais" }
],
"UK": [
{ "Brand": "Brand1", "Link": "http://www.example.net/" },
{ "Brand": "Brand3", "Link": "http://www.example.org" },
{ "Brand": "Brand6", "Link": "http://www.example.co.uk" }
]
};
// Locate the correct DOM element to work with
let $list = $("ul.flex");
// Set up a change event handler on the select
$("#selectCountry").on("change", function(){
$list.html(""); // Clear out old list entries
let country = $(this).val(); // Store the country name
// Loop over all the corresponding links in the object
$(myObj[country]).each(function(idx, item){
// Conditionally set the green-underline class
let gu = this.Brand.replace("Brand", "") > 4 ? "" : "green-underline";
// Create a new bullet with hyperlink in it
let $newItem = $('<li class="brand-logo-bg ' + item.Brand + ' ' + gu + ' ' + country + '" data-brand-name="' + item.Brand + '"><a href="' + item.Link + '" target="_blank">' + item.Brand + '</a></li>');
// and append to list
$list.append($newItem);
});
});li { padding-bottom: 3px; }
.green-underline a { text-decoration:none; border-bottom:2px dashed green; }
.US { background-color:aliceblue; }
.Germany { background-color:lightgreen; }
.France { background-color:#f99; }
.UK { background-color:#ff9; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="select-choice" id="selectCountry">
<option value="">--- Please Select Country ---</option>
<option value="UK">UK</option>
<option value="US">US</option>
<option value="Germany">Germany</option>
<option value="France">France</option>
</select>
<div class="brand-logo--wrapper container">
<ul class="flex"></ul>
</div>answered Nov 21 '18 at 14:06
Scott MarcusScott Marcus
38.3k52036
edited Nov 21 '18 at 20:46
answered Nov 21 '18 at 14:06
Scott MarcusScott Marcus
38.3k52036
answered Nov 21 '18 at 14:06
Scott MarcusScott Marcus
38.3k52036
answered Nov 21 '18 at 14:06
Scott MarcusScott Marcus
38.3k52036
38.3k52036
Thanks - I need the list items hardcoded as they contain the classes to show the background image for each brand. The list items will also have the country names they belong to as class names, so that they show/hide based on user selection. (unfortunately this wasn't done using an object in the first place, so have to continue with it for now)
– ImranR
Nov 21 '18 at 14:13
@ImranR My solution is already adding the class names you showed in your post. Any other data can easily be added dynamically as well. I'll update the post to show this.
– Scott Marcus
Nov 21 '18 at 15:51
@ImranR Take a look at my updated answer. In particular, select France and look at the results, then right-click any of the hyperlinks and choose "Inspect". You will see that the right classes get added to the bullets.
– Scott Marcus
Nov 21 '18 at 16:11
add a comment |
Thanks - I need the list items hardcoded as they contain the classes to show the background image for each brand. The list items will also have the country names they belong to as class names, so that they show/hide based on user selection. (unfortunately this wasn't done using an object in the first place, so have to continue with it for now)
– ImranR
Nov 21 '18 at 14:13
@ImranR My solution is already adding the class names you showed in your post. Any other data can easily be added dynamically as well. I'll update the post to show this.
– Scott Marcus
Nov 21 '18 at 15:51
@ImranR Take a look at my updated answer. In particular, select France and look at the results, then right-click any of the hyperlinks and choose "Inspect". You will see that the right classes get added to the bullets.
– Scott Marcus
Nov 21 '18 at 16:11
Thanks - I need the list items hardcoded as they contain the classes to show the background image for each brand. The list items will also have the country names they belong to as class names, so that they show/hide based on user selection. (unfortunately this wasn't done using an object in the first place, so have to continue with it for now)
– ImranR
Nov 21 '18 at 14:13
Thanks - I need the list items hardcoded as they contain the classes to show the background image for each brand. The list items will also have the country names they belong to as class names, so that they show/hide based on user selection. (unfortunately this wasn't done using an object in the first place, so have to continue with it for now)
– ImranR
Nov 21 '18 at 14:13
@ImranR My solution is already adding the class names you showed in your post. Any other data can easily be added dynamically as well. I'll update the post to show this.
– Scott Marcus
Nov 21 '18 at 15:51
@ImranR My solution is already adding the class names you showed in your post. Any other data can easily be added dynamically as well. I'll update the post to show this.
– Scott Marcus
Nov 21 '18 at 15:51
@ImranR Take a look at my updated answer. In particular, select France and look at the results, then right-click any of the hyperlinks and choose "Inspect". You will see that the right classes get added to the bullets.
– Scott Marcus
Nov 21 '18 at 16:11
@ImranR Take a look at my updated answer. In particular, select France and look at the results, then right-click any of the hyperlinks and choose "Inspect". You will see that the right classes get added to the bullets.
– Scott Marcus
Nov 21 '18 at 16:11
add a comment |
0
Add onchange event listener to the select and pass the value of the selected option. The retrieve the value using the selected option from the json.
Instead of hardcoding the list in the html , create dynamic li while iterating the json
let json = {
"US": [{
"Brand": "Brand1",
"Link": "http://www.example.com/"
}],
"Germany": [{
"Brand": "Brand1",
"Link": "http://www.example.com/de"
},
{
"Brand": "Brand2",
"Link": "http://www.example.com/germany"
}
],
"France": [{
"Brand": "Brand1",
"Link": "http://www.example.com/france"
},
{
"Brand": "Brand3",
"Link": "http://www.example.com/fr"
},
{
"Brand": "Brand4",
"Link": "http://www.example.com/french-site"
},
{
"Brand": "Brand5",
"Link": "http://www.example.com/francais"
}
],
"UK": [{
"Brand": "Brand1",
"Link": "http://www.example.net/"
},
{
"Brand": "Brand3",
"Link": "http://www.example.org"
},
{
"Brand": "Brand6",
"Link": "http://www.example.co.uk"
}
]
}
function showBrand(val) {
let brandList = '';
json[val].forEach(function(item) {
brandList += `<li class="brand-logo-bg brand1 green-underline" data-brand-name="${item.Brand}">
<a href="" target="_blank">${item.Brand}</a>
</li>`
})
document.getElementById('brands').innerHTML = brandList;
}<select name="select-choice" id="selectCountry" onchange='showBrand(this.value)'>
<option value="" selected>Select</option>
<option value="UK">UK</option>
<option value="US">US</option>
<option value="Germany">Germany</option>
<option value="France">France</option>
</select>
<div class="brand-logo--wrapper container">
<ul class="flex" id='brands'>
</ul>
</div>answered Nov 21 '18 at 13:54
brkbrk
26k31940
Thanks - unfortunately I need to do this using jQuery
– ImranR
Nov 21 '18 at 14:03
add a comment |
0
Add onchange event listener to the select and pass the value of the selected option. The retrieve the value using the selected option from the json.
Instead of hardcoding the list in the html , create dynamic li while iterating the json
let json = {
"US": [{
"Brand": "Brand1",
"Link": "http://www.example.com/"
}],
"Germany": [{
"Brand": "Brand1",
"Link": "http://www.example.com/de"
},
{
"Brand": "Brand2",
"Link": "http://www.example.com/germany"
}
],
"France": [{
"Brand": "Brand1",
"Link": "http://www.example.com/france"
},
{
"Brand": "Brand3",
"Link": "http://www.example.com/fr"
},
{
"Brand": "Brand4",
"Link": "http://www.example.com/french-site"
},
{
"Brand": "Brand5",
"Link": "http://www.example.com/francais"
}
],
"UK": [{
"Brand": "Brand1",
"Link": "http://www.example.net/"
},
{
"Brand": "Brand3",
"Link": "http://www.example.org"
},
{
"Brand": "Brand6",
"Link": "http://www.example.co.uk"
}
]
}
function showBrand(val) {
let brandList = '';
json[val].forEach(function(item) {
brandList += `<li class="brand-logo-bg brand1 green-underline" data-brand-name="${item.Brand}">
<a href="" target="_blank">${item.Brand}</a>
</li>`
})
document.getElementById('brands').innerHTML = brandList;
}<select name="select-choice" id="selectCountry" onchange='showBrand(this.value)'>
<option value="" selected>Select</option>
<option value="UK">UK</option>
<option value="US">US</option>
<option value="Germany">Germany</option>
<option value="France">France</option>
</select>
<div class="brand-logo--wrapper container">
<ul class="flex" id='brands'>
</ul>
</div>answered Nov 21 '18 at 13:54
brkbrk
26k31940
Thanks - unfortunately I need to do this using jQuery
– ImranR
Nov 21 '18 at 14:03
add a comment |
0
0
0
Add onchange event listener to the select and pass the value of the selected option. The retrieve the value using the selected option from the json.
Instead of hardcoding the list in the html , create dynamic li while iterating the json
let json = {
"US": [{
"Brand": "Brand1",
"Link": "http://www.example.com/"
}],
"Germany": [{
"Brand": "Brand1",
"Link": "http://www.example.com/de"
},
{
"Brand": "Brand2",
"Link": "http://www.example.com/germany"
}
],
"France": [{
"Brand": "Brand1",
"Link": "http://www.example.com/france"
},
{
"Brand": "Brand3",
"Link": "http://www.example.com/fr"
},
{
"Brand": "Brand4",
"Link": "http://www.example.com/french-site"
},
{
"Brand": "Brand5",
"Link": "http://www.example.com/francais"
}
],
"UK": [{
"Brand": "Brand1",
"Link": "http://www.example.net/"
},
{
"Brand": "Brand3",
"Link": "http://www.example.org"
},
{
"Brand": "Brand6",
"Link": "http://www.example.co.uk"
}
]
}
function showBrand(val) {
let brandList = '';
json[val].forEach(function(item) {
brandList += `<li class="brand-logo-bg brand1 green-underline" data-brand-name="${item.Brand}">
<a href="" target="_blank">${item.Brand}</a>
</li>`
})
document.getElementById('brands').innerHTML = brandList;
}<select name="select-choice" id="selectCountry" onchange='showBrand(this.value)'>
<option value="" selected>Select</option>
<option value="UK">UK</option>
<option value="US">US</option>
<option value="Germany">Germany</option>
<option value="France">France</option>
</select>
<div class="brand-logo--wrapper container">
<ul class="flex" id='brands'>
</ul>
</div>answered Nov 21 '18 at 13:54
brkbrk
26k31940
Add onchange event listener to the select and pass the value of the selected option. The retrieve the value using the selected option from the json.
Instead of hardcoding the list in the html , create dynamic li while iterating the json
let json = {
"US": [{
"Brand": "Brand1",
"Link": "http://www.example.com/"
}],
"Germany": [{
"Brand": "Brand1",
"Link": "http://www.example.com/de"
},
{
"Brand": "Brand2",
"Link": "http://www.example.com/germany"
}
],
"France": [{
"Brand": "Brand1",
"Link": "http://www.example.com/france"
},
{
"Brand": "Brand3",
"Link": "http://www.example.com/fr"
},
{
"Brand": "Brand4",
"Link": "http://www.example.com/french-site"
},
{
"Brand": "Brand5",
"Link": "http://www.example.com/francais"
}
],
"UK": [{
"Brand": "Brand1",
"Link": "http://www.example.net/"
},
{
"Brand": "Brand3",
"Link": "http://www.example.org"
},
{
"Brand": "Brand6",
"Link": "http://www.example.co.uk"
}
]
}
function showBrand(val) {
let brandList = '';
json[val].forEach(function(item) {
brandList += `<li class="brand-logo-bg brand1 green-underline" data-brand-name="${item.Brand}">
<a href="" target="_blank">${item.Brand}</a>
</li>`
})
document.getElementById('brands').innerHTML = brandList;
}<select name="select-choice" id="selectCountry" onchange='showBrand(this.value)'>
<option value="" selected>Select</option>
<option value="UK">UK</option>
<option value="US">US</option>
<option value="Germany">Germany</option>
<option value="France">France</option>
</select>
<div class="brand-logo--wrapper container">
<ul class="flex" id='brands'>
</ul>
</div>let json = {
"US": [{
"Brand": "Brand1",
"Link": "http://www.example.com/"
}],
"Germany": [{
"Brand": "Brand1",
"Link": "http://www.example.com/de"
},
{
"Brand": "Brand2",
"Link": "http://www.example.com/germany"
}
],
"France": [{
"Brand": "Brand1",
"Link": "http://www.example.com/france"
},
{
"Brand": "Brand3",
"Link": "http://www.example.com/fr"
},
{
"Brand": "Brand4",
"Link": "http://www.example.com/french-site"
},
{
"Brand": "Brand5",
"Link": "http://www.example.com/francais"
}
],
"UK": [{
"Brand": "Brand1",
"Link": "http://www.example.net/"
},
{
"Brand": "Brand3",
"Link": "http://www.example.org"
},
{
"Brand": "Brand6",
"Link": "http://www.example.co.uk"
}
]
}
function showBrand(val) {
let brandList = '';
json[val].forEach(function(item) {
brandList += `<li class="brand-logo-bg brand1 green-underline" data-brand-name="${item.Brand}">
<a href="" target="_blank">${item.Brand}</a>
</li>`
})
document.getElementById('brands').innerHTML = brandList;
}<select name="select-choice" id="selectCountry" onchange='showBrand(this.value)'>
<option value="" selected>Select</option>
<option value="UK">UK</option>
<option value="US">US</option>
<option value="Germany">Germany</option>
<option value="France">France</option>
</select>
<div class="brand-logo--wrapper container">
<ul class="flex" id='brands'>
</ul>
</div>let json = {
"US": [{
"Brand": "Brand1",
"Link": "http://www.example.com/"
}],
"Germany": [{
"Brand": "Brand1",
"Link": "http://www.example.com/de"
},
{
"Brand": "Brand2",
"Link": "http://www.example.com/germany"
}
],
"France": [{
"Brand": "Brand1",
"Link": "http://www.example.com/france"
},
{
"Brand": "Brand3",
"Link": "http://www.example.com/fr"
},
{
"Brand": "Brand4",
"Link": "http://www.example.com/french-site"
},
{
"Brand": "Brand5",
"Link": "http://www.example.com/francais"
}
],
"UK": [{
"Brand": "Brand1",
"Link": "http://www.example.net/"
},
{
"Brand": "Brand3",
"Link": "http://www.example.org"
},
{
"Brand": "Brand6",
"Link": "http://www.example.co.uk"
}
]
}
function showBrand(val) {
let brandList = '';
json[val].forEach(function(item) {
brandList += `<li class="brand-logo-bg brand1 green-underline" data-brand-name="${item.Brand}">
<a href="" target="_blank">${item.Brand}</a>
</li>`
})
document.getElementById('brands').innerHTML = brandList;
}<select name="select-choice" id="selectCountry" onchange='showBrand(this.value)'>
<option value="" selected>Select</option>
<option value="UK">UK</option>
<option value="US">US</option>
<option value="Germany">Germany</option>
<option value="France">France</option>
</select>
<div class="brand-logo--wrapper container">
<ul class="flex" id='brands'>
</ul>
</div>answered Nov 21 '18 at 13:54
brkbrk
26k31940
answered Nov 21 '18 at 13:54
brkbrk
26k31940
answered Nov 21 '18 at 13:54
brkbrk
26k31940
answered Nov 21 '18 at 13:54
brkbrk
26k31940
26k31940
Thanks - unfortunately I need to do this using jQuery
– ImranR
Nov 21 '18 at 14:03
add a comment |
Thanks - unfortunately I need to do this using jQuery
– ImranR
Nov 21 '18 at 14:03
Thanks - unfortunately I need to do this using jQuery
– ImranR
Nov 21 '18 at 14:03
Thanks - unfortunately I need to do this using jQuery
– ImranR
Nov 21 '18 at 14:03
add a comment |
0
As solution, I first loop through the country keys and add them into the select with append(). Then when someone select one country, it update the list with their names and links that belong to the country.
objs = {
"US": [
{ "Brand": "Brand1", "Link": "http://www.example.com/" }
],
"Germany": [
{ "Brand": "Brand1", "Link": "http://www.example.com/de" },
{ "Brand": "Brand2", "Link": "http://www.example.com/germany" }
],
"France": [
{ "Brand": "Brand1", "Link": "http://www.example.com/france" },
{ "Brand": "Brand3", "Link": "http://www.example.com/fr" },
{ "Brand": "Brand4", "Link": "http://www.example.com/french-site" },
{ "Brand": "Brand5", "Link": "http://www.example.com/francais" }
],
"UK": [
{ "Brand": "Brand1", "Link": "http://www.example.net/" },
{ "Brand": "Brand3", "Link": "http://www.example.org" },
{ "Brand": "Brand6", "Link": "http://www.example.co.uk" }
]
};
$.each(objs, function(country, brands){
$("#selectCountry").append('<option value="' + country + '">' + country + '</option>');
});
$("#selectCountry").change(function(){
let brands = objs[$("#selectCountry").val()];
$.each(brands, function(key, brand){
$("#myList").append('<li class="brand-logo-bg ' + brand.Brand.toLowerCase() + ' green-underline" data-brand-name="' + brand.Brand + '"><a href="' + brand.Link + '" target="_blank">' + brand.Brand + '</a></li>');
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="select-choice" id="selectCountry">
<option value=""></option>
</select>
<div class="brand-logo--wrapper container">
<ul class="flex" id="myList"></ul>
</div>I hope it will help!
Hello @ImranR, as I can see there is a lot of solution. My distinctively, dynamically use key for feeding the select, provide the anchor text and links, and use 100% jQuery. Moreover, I thought aboutbrand.Brand.toLowerCase()in order to keep the same class name format. I hope it is fitting with your needs.
– user10421833
Nov 21 '18 at 14:19
add a comment |
0
As solution, I first loop through the country keys and add them into the select with append(). Then when someone select one country, it update the list with their names and links that belong to the country.
objs = {
"US": [
{ "Brand": "Brand1", "Link": "http://www.example.com/" }
],
"Germany": [
{ "Brand": "Brand1", "Link": "http://www.example.com/de" },
{ "Brand": "Brand2", "Link": "http://www.example.com/germany" }
],
"France": [
{ "Brand": "Brand1", "Link": "http://www.example.com/france" },
{ "Brand": "Brand3", "Link": "http://www.example.com/fr" },
{ "Brand": "Brand4", "Link": "http://www.example.com/french-site" },
{ "Brand": "Brand5", "Link": "http://www.example.com/francais" }
],
"UK": [
{ "Brand": "Brand1", "Link": "http://www.example.net/" },
{ "Brand": "Brand3", "Link": "http://www.example.org" },
{ "Brand": "Brand6", "Link": "http://www.example.co.uk" }
]
};
$.each(objs, function(country, brands){
$("#selectCountry").append('<option value="' + country + '">' + country + '</option>');
});
$("#selectCountry").change(function(){
let brands = objs[$("#selectCountry").val()];
$.each(brands, function(key, brand){
$("#myList").append('<li class="brand-logo-bg ' + brand.Brand.toLowerCase() + ' green-underline" data-brand-name="' + brand.Brand + '"><a href="' + brand.Link + '" target="_blank">' + brand.Brand + '</a></li>');
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="select-choice" id="selectCountry">
<option value=""></option>
</select>
<div class="brand-logo--wrapper container">
<ul class="flex" id="myList"></ul>
</div>I hope it will help!
Hello @ImranR, as I can see there is a lot of solution. My distinctively, dynamically use key for feeding the select, provide the anchor text and links, and use 100% jQuery. Moreover, I thought aboutbrand.Brand.toLowerCase()in order to keep the same class name format. I hope it is fitting with your needs.
– user10421833
Nov 21 '18 at 14:19
add a comment |
0
0
0
As solution, I first loop through the country keys and add them into the select with append(). Then when someone select one country, it update the list with their names and links that belong to the country.
objs = {
"US": [
{ "Brand": "Brand1", "Link": "http://www.example.com/" }
],
"Germany": [
{ "Brand": "Brand1", "Link": "http://www.example.com/de" },
{ "Brand": "Brand2", "Link": "http://www.example.com/germany" }
],
"France": [
{ "Brand": "Brand1", "Link": "http://www.example.com/france" },
{ "Brand": "Brand3", "Link": "http://www.example.com/fr" },
{ "Brand": "Brand4", "Link": "http://www.example.com/french-site" },
{ "Brand": "Brand5", "Link": "http://www.example.com/francais" }
],
"UK": [
{ "Brand": "Brand1", "Link": "http://www.example.net/" },
{ "Brand": "Brand3", "Link": "http://www.example.org" },
{ "Brand": "Brand6", "Link": "http://www.example.co.uk" }
]
};
$.each(objs, function(country, brands){
$("#selectCountry").append('<option value="' + country + '">' + country + '</option>');
});
$("#selectCountry").change(function(){
let brands = objs[$("#selectCountry").val()];
$.each(brands, function(key, brand){
$("#myList").append('<li class="brand-logo-bg ' + brand.Brand.toLowerCase() + ' green-underline" data-brand-name="' + brand.Brand + '"><a href="' + brand.Link + '" target="_blank">' + brand.Brand + '</a></li>');
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="select-choice" id="selectCountry">
<option value=""></option>
</select>
<div class="brand-logo--wrapper container">
<ul class="flex" id="myList"></ul>
</div>I hope it will help!
As solution, I first loop through the country keys and add them into the select with append(). Then when someone select one country, it update the list with their names and links that belong to the country.
objs = {
"US": [
{ "Brand": "Brand1", "Link": "http://www.example.com/" }
],
"Germany": [
{ "Brand": "Brand1", "Link": "http://www.example.com/de" },
{ "Brand": "Brand2", "Link": "http://www.example.com/germany" }
],
"France": [
{ "Brand": "Brand1", "Link": "http://www.example.com/france" },
{ "Brand": "Brand3", "Link": "http://www.example.com/fr" },
{ "Brand": "Brand4", "Link": "http://www.example.com/french-site" },
{ "Brand": "Brand5", "Link": "http://www.example.com/francais" }
],
"UK": [
{ "Brand": "Brand1", "Link": "http://www.example.net/" },
{ "Brand": "Brand3", "Link": "http://www.example.org" },
{ "Brand": "Brand6", "Link": "http://www.example.co.uk" }
]
};
$.each(objs, function(country, brands){
$("#selectCountry").append('<option value="' + country + '">' + country + '</option>');
});
$("#selectCountry").change(function(){
let brands = objs[$("#selectCountry").val()];
$.each(brands, function(key, brand){
$("#myList").append('<li class="brand-logo-bg ' + brand.Brand.toLowerCase() + ' green-underline" data-brand-name="' + brand.Brand + '"><a href="' + brand.Link + '" target="_blank">' + brand.Brand + '</a></li>');
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="select-choice" id="selectCountry">
<option value=""></option>
</select>
<div class="brand-logo--wrapper container">
<ul class="flex" id="myList"></ul>
</div>I hope it will help!
objs = {
"US": [
{ "Brand": "Brand1", "Link": "http://www.example.com/" }
],
"Germany": [
{ "Brand": "Brand1", "Link": "http://www.example.com/de" },
{ "Brand": "Brand2", "Link": "http://www.example.com/germany" }
],
"France": [
{ "Brand": "Brand1", "Link": "http://www.example.com/france" },
{ "Brand": "Brand3", "Link": "http://www.example.com/fr" },
{ "Brand": "Brand4", "Link": "http://www.example.com/french-site" },
{ "Brand": "Brand5", "Link": "http://www.example.com/francais" }
],
"UK": [
{ "Brand": "Brand1", "Link": "http://www.example.net/" },
{ "Brand": "Brand3", "Link": "http://www.example.org" },
{ "Brand": "Brand6", "Link": "http://www.example.co.uk" }
]
};
$.each(objs, function(country, brands){
$("#selectCountry").append('<option value="' + country + '">' + country + '</option>');
});
$("#selectCountry").change(function(){
let brands = objs[$("#selectCountry").val()];
$.each(brands, function(key, brand){
$("#myList").append('<li class="brand-logo-bg ' + brand.Brand.toLowerCase() + ' green-underline" data-brand-name="' + brand.Brand + '"><a href="' + brand.Link + '" target="_blank">' + brand.Brand + '</a></li>');
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="select-choice" id="selectCountry">
<option value=""></option>
</select>
<div class="brand-logo--wrapper container">
<ul class="flex" id="myList"></ul>
</div>objs = {
"US": [
{ "Brand": "Brand1", "Link": "http://www.example.com/" }
],
"Germany": [
{ "Brand": "Brand1", "Link": "http://www.example.com/de" },
{ "Brand": "Brand2", "Link": "http://www.example.com/germany" }
],
"France": [
{ "Brand": "Brand1", "Link": "http://www.example.com/france" },
{ "Brand": "Brand3", "Link": "http://www.example.com/fr" },
{ "Brand": "Brand4", "Link": "http://www.example.com/french-site" },
{ "Brand": "Brand5", "Link": "http://www.example.com/francais" }
],
"UK": [
{ "Brand": "Brand1", "Link": "http://www.example.net/" },
{ "Brand": "Brand3", "Link": "http://www.example.org" },
{ "Brand": "Brand6", "Link": "http://www.example.co.uk" }
]
};
$.each(objs, function(country, brands){
$("#selectCountry").append('<option value="' + country + '">' + country + '</option>');
});
$("#selectCountry").change(function(){
let brands = objs[$("#selectCountry").val()];
$.each(brands, function(key, brand){
$("#myList").append('<li class="brand-logo-bg ' + brand.Brand.toLowerCase() + ' green-underline" data-brand-name="' + brand.Brand + '"><a href="' + brand.Link + '" target="_blank">' + brand.Brand + '</a></li>');
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="select-choice" id="selectCountry">
<option value=""></option>
</select>
<div class="brand-logo--wrapper container">
<ul class="flex" id="myList"></ul>
</div>answered Nov 21 '18 at 14:12
user10421833
Hello @ImranR, as I can see there is a lot of solution. My distinctively, dynamically use key for feeding the select, provide the anchor text and links, and use 100% jQuery. Moreover, I thought aboutbrand.Brand.toLowerCase()in order to keep the same class name format. I hope it is fitting with your needs.
– user10421833
Nov 21 '18 at 14:19
add a comment |
Hello @ImranR, as I can see there is a lot of solution. My distinctively, dynamically use key for feeding the select, provide the anchor text and links, and use 100% jQuery. Moreover, I thought aboutbrand.Brand.toLowerCase()in order to keep the same class name format. I hope it is fitting with your needs.
– user10421833
Nov 21 '18 at 14:19
Hello @ImranR, as I can see there is a lot of solution. My distinctively, dynamically use key for feeding the select, provide the anchor text and links, and use 100% jQuery. Moreover, I thought about
brand.Brand.toLowerCase() in order to keep the same class name format. I hope it is fitting with your needs.– user10421833
Nov 21 '18 at 14:19
Hello @ImranR, as I can see there is a lot of solution. My distinctively, dynamically use key for feeding the select, provide the anchor text and links, and use 100% jQuery. Moreover, I thought about
brand.Brand.toLowerCase() in order to keep the same class name format. I hope it is fitting with your needs.– user10421833
Nov 21 '18 at 14:19
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53413381%2fhow-to-create-a-jquery-loop-to-change-anchor-links-based-on-json-file%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
