Including an external JSON file to work with Bootstrap

Question

I have this code and I am looking to include an external JSON file on my foreach() loop in order to display.

The JSON looks like this:

"items":[{"title":"ONE","content":"Something-1"},
{"title":"TWO","content":"Something-2"},
{"title":"THREE","content":"Something-3"}]

I have this code:

var data = 'doc.json';
$.getJSON(data)

var success = function(data) {
  data.items.forEach(function(item, index) {

    $('.latestinfo').append(
      '<div class="panel panel-default">' +
      '<div class="card-header top" role="tab" id="heading_' + index + '">' +
      '<h4 class="mb-0">' +
      '<a role="button" class=" btn btn-link " data-toggle="collapse" data-parent="#accordion" href="#collapse_' + index + '" aria-expanded="true" aria-controls="collapse_' + index + '">' +
      item.title +
      '</a>' +
      '</h4>' +
      '</div>' +
      '<div id="collapse_' + index + '" class="collapse " role="tabpanel" data-parent="#accordion" aria-labelledby="heading_' + index + '">' +
      '<div class="panel-body">' + // improves readability with the +, concatenates strings
      item.content +
      '</div>' +
      '</div>' +
      '</div>'
    );
  });
}

success(data);

Try the answer https://stackoverflow.com/questions/54776693/including-an-external-json-file-to-work-with-bootstrap/54779115#54779115 — Googlian, Feb 20 '19 at 05:06

Googlian · Answer 1 · 2019-02-20T05:06:19.017

You have to change your JSON file like below

{
  "items": [
    {
      "title": "ONE",
      "content": "Something-1"
    },
    {
      "title": "TWO",
      "content": "Something-2"
    },
    {
      "title": "THREE",
      "content": "Something-3"
    }
  ]
}

So now you can access items array using this method.

$.get('https://api.myjson.com/bins/v5ko2', function(result, status) {

    var data = result.items;

    // console.log(data);

    $.each(data, function(i, item) {

        console.log(item.title);

        // Now follow you append code here
        // $('.latestinfo').append("");

    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

score 0 · Answer 2 · answered Feb 20 '19 at 05:01

0

You should send a callback function in $.getJSON(jsonpath,callbackFn) method, so that when the JSON gets fetched you can access the JSON in the callback function's data parameter.

var data = 'doc.json';

$.getJSON(data, function(data) {
  data.items.forEach(function(item, index) {

    $('.latestinfo').append(
      '<div class="panel panel-default">' +
      '<div class="card-header top" role="tab" id="heading_' + index + '">' +
      '<h4 class="mb-0">' +
      '<a role="button" class=" btn btn-link " data-toggle="collapse" data-parent="#accordion" href="#collapse_' + index + '" aria-expanded="true" aria-controls="collapse_' + index + '">' +
      item.title +
      '</a>' +
      '</h4>' +
      '</div>' +
      '<div id="collapse_' + index + '" class="collapse " role="tabpanel" data-parent="#accordion" aria-labelledby="heading_' + index + '">' +
      '<div class="panel-body">' + // improves readability with the +, concatenates strings
      item.content +
      '</div>' +
      '</div>' +
      '</div>'
    );
  });
})

answered Feb 20 '19 at 05:01

Nithya Rajan

4,722
19
30

Hello, Thanks for your response! It is saying that the $.getJSON is not a function, is it because i dont have the right jquery version? – Ian Millan Feb 20 '19 at 18:22
What version of Jquery u r using? – Nithya Rajan Feb 20 '19 at 18:32
https://stackoverflow.com/questions/40600396/jquery-issue-typeerror-getjson-is-not-a-function this answer will help you. You should use the full version of Jquery instead of slim version – Nithya Rajan Feb 20 '19 at 18:34
I changed it and worked! the only thing i had to change is the source specification, it should be and https source, if not it gives me an error. Thanks for your response!! – Ian Millan Feb 20 '19 at 18:48

Including an external JSON file to work with Bootstrap

2 Answers2