trying to get values form a json object in a nested array

Question

So the JSON I need to use is structured like this:

[
    {
        "result":"OK",
        "message":"Display",
        "value":200,
        "rows":29
    } , 
    [
        {
            "personID":1,
            "img_path":"/1234/",
            "img":"00001.jpg"
        },
        {
            "personID":2,
            "img_path":"/1234/",
            "img":"00002.jpg"
        },
    ]
]

How do it get JUST this part?:

 personID: 1
 img_path: /1234/
 img: 00001.jpg

Here's what I'm doing currently, which is outputs the full JSON... (exactly as it's shown in the first codeblock I added... the one that was showing how the JSON is structured).

var fullURL = the_URL_where_Im_getting_the_json

        function readTextFile(file, callback) 
        {
            var rawFile = new XMLHttpRequest();
            rawFile.overrideMimeType("application/json");
            rawFile.open("GET", file, true);
            rawFile.onreadystatechange = function() {
                if (rawFile.readyState === 4 && rawFile.status == "200") 
                {
                    callback(rawFile.responseText);
                }
            }
            rawFile.send(null);
        }

readTextFile(fullURL, function(text){

    var data = JSON.parse(text);
    console.log(data); 
    }
);

I appreciate you time and help. Thanks.

Answer 1

Trying to access this via indexes doesn't seem too robust. If you know the shape is going to be consistent with this type of output, you can deconstruct the data into info and results and then iterate over them. If you know what identifier you are looking for, for example, you can use find.

I have extended this example a bit to try to show how using functions like map and find can work over larger sets of data, as whatever project you are working on gets bigger. Front-end frameworks like React do a lot of this stuff for you.

 const data = [{ "result": "OK", "message": "Display", "value": 200, "rows": 29 }, [{ "personID": 1, "img_path": "/1234/", "img": "00001.jpg" }, { "personID": 2, "img_path": "/1234/", "img": "00002.jpg" }, ] ] const [info, results] = data; document.getElementById('information').innerHTML = Object.entries(info).map(([key, value]) => ` <div> <span class="key">${key.toUpperCase()}:</span> <span class="value">${value}</span> </div>`).join(''); document.getElementById('results').innerHTML = results.map(result => { return `<div>ID: ${result.personID}, path: ${result.img_path}</div>` }).join(''); document.getElementById('find').addEventListener('keyup', function() { document.getElementById('target').innerHTML = (results.find(result => result.personID == this.value) || { img: 'Not Found' }).img })

 .cards { display: flex; }.card { box-shadow: 1px 1px 10px; padding: 16px; width: 25%; margin: 6px; }.card-title { font-size: 2em; border-bottom: 1px solid black; padding: 6px 6px 6px 0px; }.card-content { display: flex; flex-direction: column; align-items: space-between; }.card-content>div { margin: 6px; display: flex; justify-content: space-between; } input { width: 50px; }

 <div class="cards"> <div class="card"> <div class="card-title"> Information </div> <div id="information" class="card-content"></div> </div> <div class="card"> <div class="card-title"> All People </div> <div id="results" class="card-content"></div> </div> <div class="card"> <div class="card-title"> Find IMG </div> Person ID: <input id="find" /> <div id="target" class="card-content" /> </div> </div>

Answer 2

I really feel the data in your file should be modified for consistency.

For now you can do this:

//loop through this if you want data of all objects in the 2nd item i.e data[1][0...n]
var objectData = data[1][0] 
var personID = objectData.personID
var img = objectData.img
var img_path = objectData.img_path