Populating values of an Object in a HTML element

Question

I am populating a based on the values from an object.

var myJSON =[  
   {  
       "ID":1417,
       "BF":74,
       "IL":17,
       "Tw":17
   },
   {  
       "ID":1415,
       "BF":63,
       "IL":7,
       "Tw":19
   },
   {  
       "ID":1414,
       "BF":297,
       "IL":2,
       "Tw":30
   },
   {  
       "ID":1413,
       "BF":114,
       "IL":39,
       "Tw":69
   },
   {  
       "ID":1412,
       "BF":592,
       "IL":14,
       "Tw":24
   },
   {  
       "ID":1411,
       "BF":151,
       "IL":18,
       "Tw":57
   }
]

I want to read values from this JavaScript object and populate it in the HTML below:

<div>
  <a class="resp-button__link">
      <div class="res-button res-button--kof resp-sharing-button--small">
      <div aria-hidden="true" class="resp-sharing-button__icon resp-sharing-button__icon--solid">
        <span>document.write(javascript:getBF(1415));</span>
      </div>
      </div>
  </a>
   <a class="resp-button__link">
      <div class="res-button res-button--bhof resp-sharing-button--small">
      <div aria-hidden="true" class="resp-sharing-button__icon resp-sharing-button__icon--solid">
        <span>document.write(javascript:getIL(1415));</span>
      </div>
      </div>
  </a>
  <a class="resp-button__link">
      <div class="res-button res-button--thof resp-sharing-button--small">
      <div aria-hidden="true" class="resp-sharing-button__icon resp-sharing-button__icon--solid">
        <span>document.write(javascript:getTw(1415));</span>
      </div>
      </div>
  </a>
</div>

There are many such divs on the page and none of them have an id on them.

UPDATE: I have updated the HTML with css classes and given the outer div an ID.

<div id="1415">
  <a class="kof">
      <div class="res-button res-button--kof resp-sharing-button--small">
      <div aria-hidden="true" class="resp-sharing-button__icon resp-sharing-button__icon--solid">
        <span>BF</span>
      </div>
      </div>
  </a>
   <a class="bhof">
      <div class="res-button res-button--bhof resp-sharing-button--small">
      <div aria-hidden="true" class="resp-sharing-button__icon resp-sharing-button__icon--solid">
        <span>IL</span>
      </div>
      </div>
  </a>
  <a class="thof">
      <div class="res-button res-button--thof resp-sharing-button--small">
      <div aria-hidden="true" class="resp-sharing-button__icon resp-sharing-button__icon--solid">
        <span>Tw</span>
      </div>
      </div>
  </a>
</div>

Can you suggest how to retrieve the values now and populate the span.

Live Demo Updated: Live Demo

Answer 1

For your specific code -

1. Remove the lines $(function () { and });
2. You need to execute the method getIL(...) etc. Write those in the Javascript file or <Script> tags.
3. You can assign ID to each span tag and do like this

// HTML

<span id="1415"></span>

// JS code

var _1415 = document.getElementByID('1415);
_1415.innerHTML = getIL('1415);

This will put the value of 1415 in the span tag.

You can use loops and some dynamic code to reduce the number of repetitions.

Answer 2

You can't write json values using document.write. Because using document.write() after an HTML document is fully loaded, will delete all existing HTML and write the document.write content. So better to use another way to set the content, Like:

document.getElementById("demo").innerHTML = 'content'

In your case you can put like this,

<a class="resp-button__link">
      <div class="res-button res-button--kof resp-sharing-button--small">
      <div aria-hidden="true" class="resp-sharing-button__icon resp-sharing-button__icon--solid">
        <span id="content1415"></span> <!--added id to span element-->
      </div>
      </div>
  </a>

In javascript,

document.getElementById("content1415").innerHTML = getBF(1415);

Answer 3

The reason you're not seeing your functions get called is that you've just put the text document.write(javascript:getIL(1415)); (for instance) in the spans. If you wanted that interpreted as code, you'd need script tags around it. But then you'd also need your functions to be globals (which they aren't currently — which is good).

document.write has essentially no place in modern web programming. Instead, if you need to apply this data to the spans after the fact, I'd probably use data-* attributes to specify the type of information (e.g., "BF" or "Tw") and the ID:

<span data-type="BF" data-id="1415"></span>

then find the spans with those attributes and fill them in:

$("span[data-type][data-id]").each(function() {
    const span = $(this);
    const type = span.attr("data-type");
    const id   = span.attr("data-id");
    const ob   = findById(id);
    const val  = ob && ob[type];
    if (val) {
        span.text(val);
    }
});

Note that I just have a single findById function there, rather than individual accessors for each bit of information, since we can just use the type from the span as the name of the property to get.

Live Example:

$(function () {
    const myData = [ 
       {  
           "ID":1417,
           "BF":74,
           "IL":17,
           "Tw":17
       },
       {  
           "ID":1415,
           "BF":63,
           "IL":7,
           "Tw":19
       },
       {  
           "ID":1414,
           "BF":297,
           "IL":2,
           "Tw":30
       },
       {  
           "ID":1413,
           "BF":114,
           "IL":39,
           "Tw":69
       },
       {  
           "ID":1412,
           "BF":592,
           "IL":14,
           "Tw":24
       },
       {  
           "ID":1411,
           "BF":151,
           "IL":18,
           "Tw":57
       }
    ];

    const findById = id => myData.find((elem) => elem.ID == id);

    $("span[data-type][data-id]").each(function() {
        const span = $(this);
        const type = span.attr("data-type");
        const id   = span.attr("data-id");
        const ob   = findById(id);
        const val  = ob && ob[type];
        if (val) {
            span.text(val);
        }
    });
});

<div>
  <a class="resp-button__link">
      <div class="res-button res-button--kof resp-sharing-button--small">
      <div aria-hidden="true" class="resp-sharing-button__icon resp-sharing-button__icon--solid">
        <span data-type="BF" data-id="1415"></span>
      </div>
      </div>
  </a>
   <a class="resp-button__link">
      <div class="res-button res-button--bhof resp-sharing-button--small">
      <div aria-hidden="true" class="resp-sharing-button__icon resp-sharing-button__icon--solid">
        <span data-type="IL" data-id="1415"></span>
      </div>
      </div>
  </a>
  <a class="resp-button__link">
      <div class="res-button res-button--thof resp-sharing-button--small">
      <div aria-hidden="true" class="resp-sharing-button__icon resp-sharing-button__icon--solid">
        <span data-type="Tw" data-id="1415"></span>
      </div>
      </div>
  </a>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

You might consider reformatting your data so that instead of an array of objects, you have an object with a property for each ID. So instead of:

const myData = [ 
   {  
       "ID":1417,
       "BF":74,
       "IL":17,
       "Tw":17
   },
   {  
       "ID":1415,
       "BF":63,
       "IL":7,
       "Tw":19
   },
   // ...
];

you'd have:

const myData = {
   1417: {  
       "ID":1417, // You could include this ID or leave it out
       "BF":74,
       "IL":17,
       "Tw":17
   },
   1415: {  
       "ID":1415,
       "BF":63,
       "IL":7,
       "Tw":19
   },
   // ...
};

Then we don't need findById(id) anymore, just myData[id].