0

I am trying to write some JavaScript code to load JSON from a URL and then display it in a linked listview that navigates to a new panel within the webapp that I am creating. I have successfully rendered the listview from the JSON data however, I cannot seem to get a new panel open. Any ideas? My code so far it below - 

<li class="divider">Brown Eyes</li> 
<div id="output1"></div>

<li class="divider">Green Eyes</li>
<div id="output2"></div>

<script>
var myContainer = "";
var panel_view = "";

var a = new XMLHttpRequest();
a.open("GET", "https://api.myjson.com/bins/1dwnm", true);
a.onreadystatechange = function () {
    console.log(a);
    if (a.readyState == 4) {
        var obj = JSON.parse(a.responseText);
        for (i = 0; i < obj.length; i++) {

            if (obj[i].eyeColor == 'brown') {
            var myContainer = '<ul class="list"><li><a href="#item_profiles'+i+'" class="icon pin">' + obj[i].name.first + " " + obj[i].name.last + " - " + obj[i].eyeColor + '</li></ul>';
            document.getElementById('output1').innerHTML += myContainer;    
            }

            if (obj[i].eyeColor == 'green') {
            var myContainer = '<ul class="list"><li><a href="#item_profiles'+i+'" class="icon pin">' + obj[i].name.first + " " + obj[i].name.last + " - " + obj[i].eyeColor + '</li></ul>';
            document.getElementById('output2').innerHTML += myContainer;    
            }
        }
    }

}
a.send();

panel_view += '<div class="panel" data-title="'+obj[i].name.first+'" id="item_profiles'+i+'" data-footer="none"><img src="http://localhost:3000/uploads/'+obj[i].name.first+'" style="width:100%;height:auto;"><p style="padding-left: 10px; padding-right: 10px;">'+obj[i].name.first+'</p></div>';

$('#profiles_panel').after(panel_view);
</script>

enter image description here

EDITED -

So, the purpose of this is to achieve the below code to use just Native JavaScript as oppose to jQuery. Here is the jQuery version of the code - 

     <script type="text/javascript">
    $(document).ready(function () {
        var panel_view_admissions = "";
        $.getJSON( 'http://localhost:3000/admissions', function(data) {                   
            $.each( data, function(i, name) {
                $('ul.list-admissions').append('<li><a href="#item_admissions'+i+'" class="icon pin">'+name.title+'</a></li>');
                panel_view_admissions += '<div class="panel" data-title="'+name.title+'" id="item_admissions'+i+'" data-footer="none"><img src="http://localhost:3000/uploads/'+name.image+'" style="width:100%;height:auto;"><p style="padding-left: 10px; padding-right: 10px;">'+name.content+'</p></div>';
            });
            $('#admissions_panel').after(panel_view_admissions);
        });

    });  
</script>
Kerbol
  • 588
  • 2
  • 9
  • 24
  • One important thing to understand; JSON is just a string format. Once you run `JSON.parse()` on it, it's just a JavaScript Object. For this question, please look at the error console. You should be getting an error at that line where you set the `panel_view`, since `obj` would no longer be available. – Heretic Monkey May 19 '17 at 20:59
  • @MikeMcCaughan - correct - I am getting the following from the console "obj is not defined". – Kerbol May 19 '17 at 21:31
  • Possible duplicate of [Why is my variable unaltered after I modify it inside of a function? - Asynchronous code reference](http://stackoverflow.com/questions/23667086/why-is-my-variable-unaltered-after-i-modify-it-inside-of-a-function-asynchron) – Heretic Monkey May 19 '17 at 21:32

0 Answers0