Cannot get json to loop properly in javascript

Question

I cannot figure out how to loop though this JSON return properly. It seems formatted properly but using JSON.Parse() just isnt working for me. It does work for the first two $POST variables that are returned and I can use them without issue. Im wondering if im having so many issues because I'm getting this JSON return from the echo'd JSON array that im echoing out back to the ajax. Whats strange to me is that ive saved this to a local.json file and I can parse it without issue.

{
    "0": {
      "Name": "QG",
      "Guid": "3e2e4830-7954-4248-b580-03aa04f3add8",
      "TypeName": "PresentationFolder",
      "LongTypeName": "Altiris.NS.ItemManagement.PresentationFolder",
      "TypeGuid": "f1e8956a-a158-487f-8185-4c3b492734e7",
      "ParentFolderName": "HELLO_WORLD",
      "ParentFolderGuid": "e3ceea75-510e-4900-bb5f-6b0d47309bd3",
      "Attributes": "Normal",
      "Enabled": "false",
      "IsSchedulableItem": "false",
      "ScheduleEnabled": "false",
      "SharedScheduleGuid": "00000000-0000-0000-0000-000000000000"
    },
    "1": {
      "Name": "OR",
      "Guid": "51f61b92-2b88-4820-a3a4-042c79844e5d",
      "TypeName": "PresentationFolder",
      "LongTypeName": "Altiris.NS.ItemManagement.PresentationFolder",
      "TypeGuid": "f1e8956a-a158-487f-8185-4c3b492734e7",
      "ParentFolderName": "HELLO_WORLD",
      "ParentFolderGuid": "e3ceea75-510e-4900-bb5f-6b0d47309bd3",
      "Attributes": "Normal",
      "Enabled": "false",
      "IsSchedulableItem": "false",
      "ScheduleEnabled": "false",
      "SharedScheduleGuid": "00000000-0000-0000-0000-000000000000"
    },
    "2": {
      "Name": "4O",
      "Guid": "90ccb0c9-ab7a-4d3e-94d0-09a9983bbce7",
      "TypeName": "PresentationFolder",
      "LongTypeName": "Altiris.NS.ItemManagement.PresentationFolder",
      "TypeGuid": "f1e8956a-a158-487f-8185-4c3b492734e7",
      "ParentFolderName": "HELLO_WORLD",
      "ParentFolderGuid": "e3ceea75-510e-4900-bb5f-6b0d47309bd3",
      "Attributes": "Normal",
      "Enabled": "false",
      "IsSchedulableItem": "false",
      "ScheduleEnabled": "false",
      "SharedScheduleGuid": "00000000-0000-0000-0000-000000000000"
    },
    "3": {
      "Name": "VV",
      "Guid": "16047f72-2ee0-4cc0-acd8-0c19e9a2694c",
      "TypeName": "PresentationFolder",
      "LongTypeName": "Altiris.NS.ItemManagement.PresentationFolder",
      "TypeGuid": "f1e8956a-a158-487f-8185-4c3b492734e7",
      "ParentFolderName": "HELLO_WORLD",
      "ParentFolderGuid": "e3ceea75-510e-4900-bb5f-6b0d47309bd3",
      "Attributes": "Normal",
      "Enabled": "false",
      "IsSchedulableItem": "false",
      "ScheduleEnabled": "false",
      "SharedScheduleGuid": "00000000-0000-0000-0000-000000000000"
    },
    "4": {
      "Name": "5F",
      "Guid": "4e7bcd95-44fd-4d10-a586-14a5e77f6e22",
      "TypeName": "PresentationFolder",
      "LongTypeName": "Altiris.NS.ItemManagement.PresentationFolder",
      "TypeGuid": "f1e8956a-a158-487f-8185-4c3b492734e7",
      "ParentFolderName": "HELLO_WORLD",
      "ParentFolderGuid": "e3ceea75-510e-4900-bb5f-6b0d47309bd3",
      "Attributes": "Normal",
      "Enabled": "false",
      "IsSchedulableItem": "false",
      "ScheduleEnabled": "false",
      "SharedScheduleGuid": "00000000-0000-0000-0000-000000000000"
    },
    "5": {
      "Name": "FR",
      "Guid": "1ca5a5ce-ac5c-4fd7-8f10-14a8585d4de9",
      "TypeName": "PresentationFolder",
      "LongTypeName": "Altiris.NS.ItemManagement.PresentationFolder",
      "TypeGuid": "f1e8956a-a158-487f-8185-4c3b492734e7",
      "ParentFolderName": "HELLO_WORLD",
      "ParentFolderGuid": "e3ceea75-510e-4900-bb5f-6b0d47309bd3",
      "Attributes": "Normal",
      "Enabled": "false",
      "IsSchedulableItem": "false",
      "ScheduleEnabled": "false",
      "SharedScheduleGuid": "00000000-0000-0000-0000-000000000000"
    },
    "6": {
      "Name": "6B",
      "Guid": "f76307dd-4500-4ace-a756-1b4b207801c2",
      "TypeName": "PresentationFolder",
      "LongTypeName": "Altiris.NS.ItemManagement.PresentationFolder",
      "TypeGuid": "f1e8956a-a158-487f-8185-4c3b492734e7",
      "ParentFolderName": "HELLO_WORLD",
      "ParentFolderGuid": "e3ceea75-510e-4900-bb5f-6b0d47309bd3",
      "Attributes": "Normal",
      "Enabled": "false",
      "IsSchedulableItem": "false",
      "ScheduleEnabled": "false",
      "SharedScheduleGuid": "00000000-0000-0000-0000-000000000000"
    },
    "7": {
      "Name": "AK",
      "Guid": "3ffbb7a5-e5a4-458f-a9c7-1f8a29df58dc",
      "TypeName": "PresentationFolder",
      "LongTypeName": "Altiris.NS.ItemManagement.PresentationFolder",
      "TypeGuid": "f1e8956a-a158-487f-8185-4c3b492734e7",
      "ParentFolderName": "HELLO_WORLD",
      "ParentFolderGuid": "e3ceea75-510e-4900-bb5f-6b0d47309bd3",
      "Attributes": "Normal",
      "Enabled": "false",
      "IsSchedulableItem": "false",
      "ScheduleEnabled": "false",
      "SharedScheduleGuid": "00000000-0000-0000-0000-000000000000"
    },
    "8": {
      "Name": "MK",
      "Guid": "e51e3daa-d10f-43ce-b3ce-202bb9e5f227",
      "TypeName": "PresentationFolder",
      "LongTypeName": "Altiris.NS.ItemManagement.PresentationFolder",
      "TypeGuid": "f1e8956a-a158-487f-8185-4c3b492734e7",
      "ParentFolderName": "HELLO_WORLD",
      "ParentFolderGuid": "e3ceea75-510e-4900-bb5f-6b0d47309bd3",
      "Attributes": "Normal",
      "Enabled": "false",
      "IsSchedulableItem": "false",
      "ScheduleEnabled": "false",
      "SharedScheduleGuid": "00000000-0000-0000-0000-000000000000"
    },
    "9": {
      "Name": "VH",
      "Guid": "c332aa7b-0a3a-4b24-920a-20e4273c7902",
      "TypeName": "PresentationFolder",
      "LongTypeName": "Altiris.NS.ItemManagement.PresentationFolder",
      "TypeGuid": "f1e8956a-a158-487f-8185-4c3b492734e7",
      "ParentFolderName": "HELLO_WORLD",
      "ParentFolderGuid": "e3ceea75-510e-4900-bb5f-6b0d47309bd3",
      "Attributes": "Normal",
      "Enabled": "false",
      "IsSchedulableItem": "false",
      "ScheduleEnabled": "false",
      "SharedScheduleGuid": "00000000-0000-0000-0000-000000000000"
    },
    "10": {
      "Name": "3K",
      "Guid": "d33da5b4-29cf-401f-8880-27d773d56d2b",
      "TypeName": "PresentationFolder",
      "LongTypeName": "Altiris.NS.ItemManagement.PresentationFolder",
      "TypeGuid": "f1e8956a-a158-487f-8185-4c3b492734e7",
      "ParentFolderName": "HELLO_WORLD",
      "ParentFolderGuid": "e3ceea75-510e-4900-bb5f-6b0d47309bd3",
      "Attributes": "Normal",
      "Enabled": "false",
      "IsSchedulableItem": "false",
      "ScheduleEnabled": "false",
      "SharedScheduleGuid": "00000000-0000-0000-0000-000000000000"
    }

UPDATE: I was finally able to to get better results and get the JSON displaying correctly. By setting my variable to var json = data.body[0]; and outputting like this $('.modal-body').html('<pre>' + JSON.stringify(json, null, 2) + '</pre>'); I just cant figure out this .each() statement now to iterate though all of the objects I only get the last value at the bottom of this JSON.

FINAL CODE IT WORKS :D

if (data.body[0][1] !== undefined) {
var json = data.body[0];
} else {
var json = data.body;
}

const mappedItems = $.map(json, function(item) {
const html = `<div class='table-responsive' style='padding-top:20px;'>

    <table class="table color-bordered-table info-bordered-table">
        <thead>
            <tr style="white-space: nowrap; text-align: center;">
                <th>IATA</th>
                <th>Guid</th>
                <th>Type Name</th>
                <th>Long Type Name</th>
                <th>Type Guid</th>
                <th>Parent Folder Name</th>
                <th>Parent Folder Guid</th>
                <th>Attributes</th>
                <th>Enabled</th>
                <th>Is Scheduled Item</th>
                <th>Schedule Enabled</th>
                <th>Drill Down</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>${item.Name}</td>
                <td>${item.Guid}</td>
                <td>${item.TypeName}</td>
                <td style="inline-size: 160px;word-break: break-all;">${item.LongTypeName}</td>
                <td>${item.TypeGuid}</td>
                <td>${item.ParentFolderName}</td>
                <td>${item.ParentFolderGuid}</td>
                <td>${item.Attributes}</td>
                <td>${item.Enabled}</td>
                <td>${item.IsSchedulableItem}</td>
                <td>${item.ScheduleEnabled}</td>
                <td><button type="button" name="'.$value->Name.'" value="'.$value->Guid.'" class="btn btn-primary"
                        style="width:150px" onclick="modalData(this)">Full screen</button></td>
            </tr>
        </tbody>
    </table>
</div>`;
return `${html}`;
});
$('.modal-body').html(mappedItems);

First, what is value? Second, for each iteration of the loop, you are replacing the child HTML of .modal-body. Therefore, at the completion of your loop, the HTML of .modal-body will contain the data of the last element in your parsed JSON object. — 76484
– 76484, Commented Dec 31, 2022 at 15:13
@76484 I love you! Ive been working on this for like 28 hours straight and I just realized it when I read your comment ive been overwriting it this entire time! Please post your answer so i can accept it thank you very much — demo7up
– demo7up, Commented Dec 31, 2022 at 15:24

76484 · Accepted Answer · 2022-12-31 15:31:20Z

1

The issue is that you are setting the inner HTML value for the .modal-body element on each iteration of your $.each loop. This means that, upon completion of the loop, the inner HTML of .modal-body will be the data corresponding to only the last item in your parsed JSON.

The approach I would take to this problem is to use $.map instead of $.each. I would map the first-level properties of the parsed JSON into the values I want to inject into the HTML of .modal-body. I would then join these array elements with a suitable delimiter, which will produce a string I can insert into .modal-body.html().

The result would look something like:

const mappedItems = $.map(json, function(item) {
  return `${item.Name}`;
});

$('.modal-body').html(mappedItems.join('<br>'));

Here is a fiddle for reference.

answered Dec 31, 2022 at 15:31

76484

9,0013 gold badges23 silver badges33 bronze badges

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

4 Comments

demo7up Over a year ago

I was look at the fiddle and I dont see where 'newhtml' is defined?

76484 Over a year ago

@demo7up: That may have been due to an old fiddle with a variable name that I have since changed. I have reset the fiddle's base now, so I believe the link should be correct. mappedItems is the only variable I have defined.

demo7up Over a year ago

One more question if you dont mind, This works great if Json returns more than 1 obj, but what if theres only 1 everything returns undefined?

76484 Over a year ago

@demo7up: For different data structures (or shapes) you will need different code. You will need to construct your application in such a way that the shape of your data is consistent and doesn't change from one API call to another. If you have a single object as the value for json, you could wrap it in an array ([]) to be passed to the $.map() call and the rest of the code could remain unchanged. For example: jsfiddle.net/76484/2wy4osbv

Collectives™ on Stack Overflow

Cannot get json to loop properly in javascript

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related