CODEWITHSUNDEEP
javascriptjquery
user244394
user244394

Reputation: 13448

Jquery replacing text dynamically based on JSON values

I Have the following list of letter one for Desktop and another for mobile.

I am trying to add an href property to all the links whose inner text matches the JSON response: and those that doesnt match JSOn response for the letters replace them with to show they are disabled. Based on the Alphabets Group list available in JSON, If the letters returned from JSON response doesnt not match the letters in alphabetnav or alphabetnavmobile I want to replace and update for both alphabetnav and alphabetNavMobile

Here is my code FIDDLE DEMO I am getting lot of duplicates

Example

<div class="alphabetnav"><a href="#A">A</a> <a href="#B">B</a> <a href="#C">C</a> <a href="#D">D</a> <a href="#E">E</a> <a href="#F">F</a> <a href="#G">G</a> <a href="#H">H</a> <a href="#I">I</a> <a href="#J">J</a> <a href="#K">K</a> <a href="#L">L</a> <a href="#M">M</a> <a href="#N">N</a> <a href="#O">O</a> <a href="#P">P</a> <a href="#Q">Q</a> <a href="#R">R</a> <a href="#S">S</a> <a href="#T">T</a> <a href="#U">U</a> <a href="#V">V</a> <a href="#W">W</a> <a href="#X">X</a> <a href="#Y">Y</a> <a href="#Z">Z</a></div>

<div class="alphabetNavMobile"><a href="#A">A</a> <a href="#B">B</a> <a href="#C">C</a> <a href="#D">D</a> <a href="#E">E</a> <a href="#F">F</a> <a href="#G">G</a> <a href="#H">H</a> <a href="#I">I</a> <a href="#J">J</a> <a href="#K">K</a> <a href="#L">L</a> <a href="#M">M</a> <a href="#N">N</a> <a href="#O">O</a> <a href="#P">P</a> <a href="#Q">Q</a> <a href="#R">R</a> <a href="#S">S</a> <a href="#T">T</a> <a href="#U">U</a> <a href="#V">V</a> <a href="#W">W</a> <a href="#X">X</a> <a href="#Y">Y</a> <a href="#Z">Z</a></div>

If JSON returns G F and I only G, F and I will have href and the rest of the alphabets will have <span>

OUTPUT

 <div class="alphabetnav">
    <span> A</span><span> B</span><span>C</span><span> D</span> <span> E</span> <a href="#F">F</a <a href="#G">G</a> <span> H</span>... ....
    </div>

    <div class="alphabetNavMobile">
    <span> A</span><span> B</span><span>C</span><span> D</span> <span> E</span> <a href="#F">F</a <a href="#G">G</a><span> H</span> ... ....
    </div>

Upvotes: 1

Views: 171

Answers (1)

nem035
nem035

Reputation: 35481

It seems that you want to add an href property to all the links whose inner text matches the JSON response:

Well, let's say you receive your letters as an array, then you can grab all links and add an href to those whose text is in the provided letters:

var letters = ['G', 'F'];

$('a').each(function(idx, a) {                // grab all links, and for each of them
    var testLetter = $(a).text().trim();      // grab the inner text which should be the letter (without any trailing or leading whitespace)
    if (letters.indexOf(testLetter) !== -1) { // if the letter is in the data received from the JSON
        $(a).attr('href', '#' + testLetter);  // add the href attribute with that letter
    } else if($(a).attr('href')) {            // otherwise, if the link has an href that doesn't match any letters
        $(a).removeAttr('href');              // remove it
    }
});


var letters = ['G', 'F'];
$('a').each(function(idx, a) {
  var testLetter = $(a).text().trim();
  if (letters.indexOf(testLetter) !== -1) {
    $(a).attr('href', '#' + testLetter);
    console.log('adding href to ' + testLetter);
  } else if ($(a).attr('href')) {
    console.log('removing href from ' + testLetter);
    $(a).removeAttr('href');
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#A">A</a>
<a href="#B">B</a>
<a>C</a>
<a>D</a>
<a>E</a>
<a>F </a>
<a>G</a>
<a>H</a>
<a>I</a>
<a>J</a>
<a>K</a>
<a>L</a>
<a>M</a>
<a>N</a>
<a>O</a>
<a>P</a>
<a>Q</a>
<a>R</a>
<a>S</a>
<a>T</a>
<a>U</a>
<a>V</a>
<a>W</a>
<a>X</a>
<a>Y</a>
<a>Z</a>

If you want all links within the alphabetnav and alphabetNavMobile, then just extract the function above as a named function and use the following selectors and call the function on both of the divs:

function addAndReplaceLinks(idx, a) { /* code from the anonymous function above */ }

// apply the function to both divs
$('.aphabetnav a').each(addAndReplaceLinks)         // select all links from the alphabetnav and do the replacements
$('.alphabetNavMobile a').each(addAndReplaceLinks); // select all links from the alphabetNavMobile and do the replacements

Upvotes: 1

Related Questions