Fetching JSON data from array's array list in javascript

Question

I am using JSON to store and retrieve some values from json file. I am trying to fetch the JSON data using javascript. The JSON data has array in array list. I am able to fetch the object list but unable to fetch inner array. Below is my JSON Data and it's format. What am I missing?

artifacts.json

{
    "artifacts": [
        {
            "technology": "Agile Software Development",
            "techBasedArtifacts": [
                {
                    "title": "Agile 1",
                    "artifactLink": "https://www.google.com/"
                },
                {
                    "title": "Agile 2",
                    "artifactLink": "https://www.google.com/"
                }
            ]
        },
        {
            "technology": "UI Development",
            "techBasedArtifacts": [
                {
                    "title": "UI 1",
                    "artifactLink": "https://www.google.com/"
                },
                {
                    "title": "UI 2",
                    "artifactLink": "https://www.google.com/"
                }
            ]
        }
    ]
}

app.js

"use-strict";

let requestURL = "./artifacts.json";
let request = new XMLHttpRequest();
request.open('GET', requestURL);
request.responseType = 'text';
request.send();

request.onload = () => {
    const a = request.response;
    const b = JSON.parse(a);
    console.log(b.artifacts)                      //Shows object array which is good
    console.log(b.artifacts.techBasedArtifacts)  // Shows undefined
}

You need to iterate over the artifacts array and for each object grab the techBasedArtifacts array. Then you'd probably need to iterate over that array too depending on the information you need. — Andy
– Andy, Commented Sep 4, 2021 at 17:30

R.Batyrshin · Accepted Answer · 2021-09-04 17:45:11Z

1

IMO artifacts is an array, but not an object. You are accessing the "techBasedArtifacts" field as from an object:

console.log(b.artifacts[0].techBasedArtifacts);

answered Sep 4, 2021 at 17:45

R.Batyrshin

387 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Venkat Sai Over a year ago

I missed giving index to artifacts instead I kept trying indexing with technology and techBasedArtifacts. Thank you for your answer. It worked!

Venkat Sai Over a year ago

Yes, you are correct that artifacts is an array and techBasedArtifacts field is from object. How do I get the title values associated with technology like UI Development-> UI 1, UI 2. I tried using b.artifacts[i].techBasedArtifacts[i].title, it shows 1st title of 1st array and 2nd title of 2nd array. Any changes to do in my json format? Thank you for your time!

Dharman · Accepted Answer · 2021-09-04 17:53:52Z

1

If you want to fetch techBasedArtifacts of a specific index then you can use like

console.log(b.artifacts[0].techBasedArtifacts)

You can access the sub array of 0th index.

If you want to get all the techBasedArtifacts of all the indexes, then you have to iterate the array and merge all the techBasedArtifacts into single array.

var result = b.artifacts.map(x => x.techBasedArtifacts).reduce((x, y) => { return x = [...x, ...y];})
console.log(result); // will give you merged result set.

edited Sep 4, 2021 at 17:53

Dharman♦

33.9k27 gold badges106 silver badges157 bronze badges

answered Sep 4, 2021 at 17:48

Kiran Shetty

9157 silver badges11 bronze badges

4 Comments

Venkat Sai Over a year ago

Thanks for your answer! :) Taking your first answer in consideration, If I want to get techBasedArtifacts title alone, I tried using artifacts[0].techBasedArtifacts.title and it gives undefined. So I tried using JSON.stringify but it shows all contents under techBasedArtifacts. How can I bring techBasedArtifacts title? Thank you for your time!

Kiran Shetty Over a year ago

Due to techBasedArtifacts is also an array you have to access it through index only, So you have to call it like artifacts[0].techBasedArtifacts[0].title.

Venkat Sai Over a year ago

I played around with your suggestion and getting techBasedArtifacts titles by accessing through index like artifact[i].techBasedArtifacts[i].title shows 1st title of 1st array and 2nd title of 2nd array. But I tried to get techBasedArtifacts titles connected with technology and is there any problem in my json format? Thank you for your time!

Kiran Shetty Over a year ago

if you want all the techBasedArtifacts in comma separated format like UI 1, UI 2 then you can simply map the elements to get the titles which will give you an array of titles then you can simply use the join method using comma as a delimiter to convert it as a single string. ex: b.artifacts[0].techBasedArtifacts.map(x => x.title).join(', '), I hope this can help you with your requirement.

Collectives™ on Stack Overflow

Fetching JSON data from array's array list in javascript

2 Answers 2

2 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related