Help with a for loop within another for loop to get data from an array inside a json object

[Dan_S]

Hi, Im currently working through the test your skills section of this page:

Test your skills: JSON - Learn web development | MDN

I have this code which allows me to get the cats names from the JSON object and puts them inside the motherInfo string and formats it as per the requirement.

const section = document.querySelector('section');

let para1 = document.createElement('p');

let para2 = document.createElement('p');

let motherInfo = 'The mother cats are called ';

let kittenInfo;

const requestURL = 'https://mdn.github.io/learning-area/javascript/oojs/tasks/json/sample.json';

fetch(requestURL)

    .then(response => response.text())

    .then(text => displayCatInfo(text))

function displayCatInfo(catString) {

    let total = 0;

    let male = 0;

    //create an object to hold parsed JSON cat string from function

    const cats = JSON.parse(catString);

    console.log(cats);

    //create an empty array to hold mother cat names

    let catNameArr = [];

    let catKittenArr = [];

    //run for loop to go through each array object aka each cat,

    for (const cat of cats) {

        //push each cat name into my array

        catNameArr.push(cat.name);

    }

    //now split the array into a string separated by the word AND

    console.log(catNameArr.join(" and "));

    //for our actual string use comma instead of AND

    let motherNameStr = catNameArr.join(", ");

    //check if our motherNameStr ends with full stop

    if (motherNameStr.charAt(motherNameStr.length - 1) != ".") {

        //if not, add a full stop

        motherNameStr += ".";

    }

    //set motherInfo as our amended string

    motherInfo = motherNameStr;

    // Don't edit the code below here!

    para1.textContent = motherInfo;

    para2.textContent = kittenInfo;

}

section.appendChild(para1);

section.appendChild(para2);

I am trying to include another LOOP inside my current for loop which allows me to loop through the kittens array of each cat, however I have no idea how to do this, I have tried using a FOR IN, but it never gets the values I want, please could someone point me in the right direction

Thanks in advance for any help / support

Dan

[Dan_S]

I resolved this myself using the following:

const section = document.querySelector('section');
let para1 = document.createElement('p');

let para2 = document.createElement('p');

let motherInfo = 'The mother cats are called ';

let kittenInfo;

const requestURL = 'https://mdn.github.io/learning-area/javascript/oojs/tasks/json/sample.json';

fetch(requestURL)

    .then(response => response.text())

    .then(text => displayCatInfo(text))

function displayCatInfo(catString) {

    let total = 0;

    let male = 0;

    //create an object to hold parsed JSON cat string from function

    const cats = JSON.parse(catString);

    console.log(cats);

    //create an empty array to hold mother cat names

    let catNameArr = [];

    let catKittenArr = [];

    let  kittenCount = 0;

    let kittens;

    //use a for loop to itterate through cats array

    for (let i = 0, l = cats.length; i < l; i++) {

        //push cat name into our mother cats array

        catNameArr.push(cats[i].name);

       

        //set kittens array variable to the array of kittens for each cat we loop through

        kittens = cats[i].kittens;

        //loop through each kitten in our kittens array

        for (const kitten of kittens) {

            //push kitten name into our new array

            catKittenArr.push(kitten.name);

        }

    }

    //log how many mother cats we have based on length of array items

    console.log("Mother cat count:" + catNameArr.length);

    //log how many kittens we have based on length of array items

    console.log("Kitten count: " + catKittenArr.length);

    //console.log(kittenInfo);

    //now split the array into a string separated by the word AND

    console.log(catNameArr.join(" and "));

    console.log(catKittenArr.join(" and "));

    //for our actual string use comma instead of AND

    let motherNameStr = catNameArr.join(", ");

    let kittenNameStr = catKittenArr.join(", ");

    //check if our motherNameStr ends with full stop

    if (motherNameStr.charAt(motherNameStr.length - 1) != ".") {

        //if not, add a full stop

        motherNameStr += ".";

    }

    //check if our kittenNameStr ends with full stop

    if (kittenNameStr.charAt(kittenNameStr.length - 1) != ".") {

        //if not, add a full stop

        kittenNameStr += ".";

    }

    //set motherInfo as our amended string

    motherInfo = `There are ${catNameArr.length} mother cats, their names are ${motherNameStr}`;

    //set kittenInfo string to our amended string

    kittenInfo = `There are a total of ${catKittenArr.length} kittens, their names are ${kittenNameStr}`;        

    // Don't edit the code below here!

    para1.textContent = motherInfo;

    para2.textContent = kittenInfo;

}

section.appendChild(para1);

section.appendChild(para2);