babbli babbli - 5 months ago 10
JSON Question

How to print an array in an array from JSON in Javascript

so i am trying to print all the names of the friends array in a single line with commas , ( I am trying to learn JS and JSON and have very less programming knowldge)
here is my data file from the internet
http://www.json-generator.com/

my array
[
{
"age": 25,
"eyeColor": "blue",
"name": "Leon Pickett",
"phone": "+1 (834) 535-2787",
"balance": "$3,632.41",
"address": "856 Woodhull Street, Southmont, Wisconsin, 373",
"friends": [
{"id": 0,"name": "Bonnie Dudley"},
{"id": 1,"name": "Blair Hopkins"},
{"id": 2,"name": "Burris Lara"}
],},
{
"age": 29,
"eyeColor": "brown",
"name": "Rosales Raymond",
"balance": "$3,632.41",
"phone": "+1 (935) 462-3887",
"address": "745 Havens Place, Norvelt, Florida, 6999",
"friends": [
{"id": 0,"name": "Theresa Burt"},
{"id": 1,"name": "Mooney Whitney"},
{"id": 2,"name": "Hebert Gill"}
]}]

here is my code



var xmlhttp = new XMLHttpRequest();
var txt = "jsontst1.txt";

xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
var myArr = JSON.parse(xmlhttp.responseText);
myFunction(myArr);
}
};

xmlhttp.open("GET", txt, true);
xmlhttp.send();

function myFunction(arr) {
var out = "";
var out2 = "";
var i, j;
for (i = 0; i < arr.length; i++) {
var frndlngth = arr[i].friends.length;

for (j = 0; j < frndlngth; j++) {
var frnds = arr[i].friends[j];
out2 += frnds.name;
}

out +=
"Name = " + arr[i].name + "<br>" +
"Age = " + arr[i].age + "<br>" +
"Phone = " + arr[i].phone + "<br>" +
"Balance = " + arr[i].balance + "<br>" +
"Eyecolor = " + arr[i].eyeColor + "<br>" +
"Address = " + arr[i].address + "<br>" +
"Friends = " + out2 + "<hr>";
}

document.getElementById("id01").innerHTML = out;
}





in output the Friends displays value of previous array also ? what am i doing wrong here ?

Answer

Reason is out2 variable is global hence value is being appended in it, not resetting it after outer loop.

Make it local in a for-loop

function myFunction(arr) {
  var out = "";
  var i, j;
  for (i = 0; i < arr.length; i++) {
    var out2 = "";
    var frndlngth = arr[i].friends.length;
    for (j = 0; j < frndlngth; j++) {
      var frnds = arr[i].friends[j];
      out2 += frnds.name;
    }
    out +=
      "Name = " + arr[i].name + "<br>" +
      "Age = " + arr[i].age + "<br>" +
      "Phone = " + arr[i].phone + "<br>" +
      "Balance = " + arr[i].balance + "<br>" +
      "Eyecolor = " + arr[i].eyeColor + "<br>" +
      "Address = " + arr[i].address + "<br>" +
      "Friends = " + out2 + "<hr>";
  }
  document.getElementById("id01").innerHTML = out;
}
var input = [{
  "age": 25,
  "eyeColor": "blue",
  "name": "Leon Pickett",
  "phone": "+1 (834) 535-2787",
  "balance": "$3,632.41",
  "address": "856 Woodhull Street, Southmont, Wisconsin, 373",
  "friends": [{
    "id": 0,
    "name": "Bonnie Dudley"
  }, {
    "id": 1,
    "name": "Blair Hopkins"
  }, {
    "id": 2,
    "name": "Burris Lara"
  }],
}, {
  "age": 29,
  "eyeColor": "brown",
  "name": "Rosales Raymond",
  "balance": "$3,632.41",
  "phone": "+1 (935) 462-3887",
  "address": "745 Havens Place, Norvelt, Florida, 6999",
  "friends": [{
    "id": 0,
    "name": "Theresa Burt"
  }, {
    "id": 1,
    "name": "Mooney Whitney"
  }, {
    "id": 2,
    "name": "Hebert Gill"
  }]
}];
myFunction(input);
<div id="id01"></div>

Fiddle Demo