Jquery replacing text dynamically based on JSON values

Question

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>

Could you elaborate with an example, it's kind of hard to understand exactly what you need? Especially this sentence "If JSON returns G F and I only G, F and I will have href and the rest of the alphabets will have" — nem035
– nem035, Commented Nov 12, 2015 at 18:59
I'm having a little trouble understanding what you want to do. Let's see if I am understanding. You have a set of A-Z links to page anchors. You receive data from the server with the data to display in the page, as well as the applicable letters. You want to remove links from any letters that don't have entries? If that's correct, please try to clarify what is, and is not, working. — Surreal Dreams
– Surreal Dreams, Commented Nov 12, 2015 at 19:50

nem035 · Accepted Answer · 2015-11-12 19:48:12Z

1

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

edited Nov 12, 2015 at 19:48

answered Nov 12, 2015 at 19:07

nem035

35.5k6 gold badges93 silver badges104 bronze badges

Sign up to request clarification or add additional context in comments.

11 Comments

DinoMyte Over a year ago

I would recommend $.trim($(a).text()) to avoid any spaces.

user244394 Over a year ago

@nem What about those that have href previously and I want to replace the old href with span and the new JSON letters with href

nem035 Over a year ago

how can you replace an href with a span? Do you want to remove href for unmatched elements?

user244394 Over a year ago

@nem yes remove href for unmatched elements for alphabetNavMobile and alphabetNav to show link is disabled here my fiddle FIDDLE currently it returing duplicates jsfiddle.net/dev2020/ohbogqyw/3

nem035 Over a year ago

Wait, remove href or convert the <a> into a span? If you want to just remove href but keep it as a link, just add an else statement that calls removeAttr, as I've shown in my edit. Your fiddle has too much code to look at, it would be easier if you would tell me what you need.

|

Collectives™ on Stack Overflow

Jquery replacing text dynamically based on JSON values

1 Answer 1

11 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

11 Comments

Your Answer

Sign up or log in

Post as a guest

Related