CODEWITHSUNDEEP
javascriptjsonloopsiteratoriteration
Jrapa86
Jrapa86

Reputation: 127

Simple iteration of nested JSON object

I'm having a great deal of difficulty iterating over a simple nested json. For some reason I cannot seem to get my desired output. I am looking to iterate over :

{
    "onShift": {
       "fastTrack1": {
         "name": "Bob, bob",
         "shift": "7a-7p",
         "service": "Fasttrack",
         "spectra": "722413",
         "office": "",
         "cell": ""
       },
       "fastTrack2": {
         "name": "Bill, Bill",
         "shift": "7a-7p",
         "service": "Fasttrack2",
         "spectra": "54827",
         "office": "",
         "cell": "123-456-9090"
       },
      
       "incoming": {
         "incoming_fastTrack1": {
           "name": "Billy, Bob",
           "shift": "7p-7a",
           "service": "Fasttrack",
           "spectra": "54821",
           "office": "",
           "cell": "123-456-8909"
       },
       "incoming_fastTrack2": {
         "name": "Funny, Bob",
         "shift": "7p-7a",
         "service": "Fasttrack2",
         "spectra": "3478",
         "office": "",
         "cell": ""
       },
      
       "shiftEnd": {
         "ended_E_MD": {
           "name": "Kissy Bob",
           "shift": "7a-3p",
           "service": "Area E",
           "spectra": "3281",
           "office": "",
           "cell": "123-456-12345"
         },
         "ended_D_MD": {
           "name": "funky bob",
           "shift": "7a-3p",
           "service": "Area D",
           "spectra": "0003",
           "office": "",
           "cell": ""
         },
         "ended_DE_MD": {
           "name": "Jimmy, Bob",
           "shift": "10a-6p",
           "service": "Area D-E",
           "spectra": "0002",
           "office": "",
           "cell": ""
         },
         "ended_Tr_MD": {
           "name": "Jim, Bob",
           "shift": "8a-4p",
           "service": "Triage",
           "spectra": "0001",
           "office": "",
           "cell": ""
         }
       }
}

How I am trying to iterate is like this (one of the many way's I've tried):

$.getJSON("../data/json/erCall.json", function(data){
        for (var i in data['onShift']){
           
        var name = data['onShift'][i].name;
        var spec = data['onShift'][i].service;
        var shift = data['onShift'][i].shift;
        var cell = data['onShift'][i].cell;
        var off  = data['onShift'][i].office;
        
$("#dataTargetOnCall").append('<tr><td>'+name+'</td><td>'+service+'</td>...etc');
        }
     
    });

I've also tried:

 $.getJSON("../data/json/erCall.json", function(data){
            for (var i in data){
              for (var j in data[i]){
           
        var name = data[i]['onShift'].name;
        var spec = data[i]['onShift'].service;
        var shift = data[i]['onShift'].shift;
        var cell = data[i]['onShift'].cell;
        var off  = data[i]['onShift'].office;

... and so on

My intention is to iterate all of the listings under "onShift" and output all of the items (about 20) into a table. It basically outputs which doctors are on shift. I know how to format the append() function, however that's only after I am able to capture the data from the JSON of course.

What can I try next?

Upvotes: 0

Views: 176

Answers (4)

Pavlos Karalis
Pavlos Karalis

Reputation: 2976

You said json object? as in it's not an array? Anyway, if that's the case you need to build the for loop around the property keys, not index values, like so:

const yourObj = {one: {a: 'a', b: 'b'}, two: {a: 'a', b: 'b'} }

const keys = Object.keys(yourObj);

for (let i = 0; i < keys.length; i ++) {
    let a = yourObj[keys[i]].a
    let b = yourObj[keys[i]].b

    console.log(a,b)
}

Edit: rewrote your object

const objt = {
    "onShift": {
        "fastTrack1": {
            "name": "Bob, bob",
            "shift": "7a-7p",
            "service": "Fasttrack",
            "spectra": "722413",
            "office": "",
            "cell": ""
        },

        "fastTrack2": {
            "name": "Bill, Bill",
            "shift": "7a-7p",
            "service": "Fasttrack2",
            "spectra": "54827",
            "office": "",
            "cell": "123-456-9090"
        },
      
        "incoming": {
            "incoming_fastTrack1": {
                "name": "Billy, Bob",
                "shift": "7p-7a",
                "service": "Fasttrack",
                "spectra": "54821",
                "office": "",
                "cell": "123-456-8909"
            },

            "incoming_fastTrack2": {
                "name": "Funny, Bob",
                "shift": "7p-7a",
                "service": "Fasttrack2",
                "spectra": "3478",
                "office": "",
                "cell": ""
            },
      
            "shiftEnd": {
                "ended_E_MD": {
                    "name": "Kissy Bob",
                    "shift": "7a-3p",
                    "service": "Area E",
                    "spectra": "3281",
                    "office": "",
                    "cell": "123-456-12345"
                },

                "ended_D_MD": {
                    "name": "funky bob",
                    "shift": "7a-3p",
                    "service": "Area D",
                    "spectra": "0003",
                    "office": "",
                    "cell": ""
                },

                "ended_DE_MD": {
                    "name": "Jimmy, Bob",
                    "shift": "10a-6p",
                    "service": "Area D-E",
                    "spectra": "0002",
                    "office": "",
                    "cell": ""
                },

                "ended_Tr_MD": {
                    "name": "Jim, Bob",
                    "shift": "8a-4p",
                    "service": "Triage",
                    "spectra": "0001",
                    "office": "",
                    "cell": ""
                }  
            }
        }
    }
}

Upvotes: 1

Jrapa86
Jrapa86

Reputation: 127

After looking through all the answers and reviewing my code I realize that I mistook my JSON as a nested object, when in fact it is an array. This leads me to a new question:

How do I dynamically create a nested object such that it contains all of the listings? When I try it, only the single first iteration shows up.

I cant seem to figure out how to create a nested object with multiple objects within it.

Upvotes: 0

Mister Jojo
Mister Jojo

Reputation: 22355

as the structure of your data is nested without logic, the best way is to use an intermediate table to reference your target elements

const data = 
  { onShift: 
    { fastTrack1: { name: 'Bob, bob',   shift: '7a-7p', service: 'Fasttrack',  spectra: '722413', office: '', cell: '' } 
    , fastTrack2: { name: 'Bill, Bill', shift: '7a-7p', service: 'Fasttrack2', spectra: '54827',  office: '', cell: '123-456-9090' } 
    , incoming: 
      { incoming_fastTrack1: { name: 'Billy, Bob', shift: '7p-7a', service: 'Fasttrack',  spectra: '54821', office: '', cell: '123-456-8909' } 
      , incoming_fastTrack2: { name: 'Funny, Bob', shift: '7p-7a', service: 'Fasttrack2', spectra: '3478',  office: '', cell: '' } 
      , shiftEnd: 
        { ended_E_MD:  { name: 'Kissy Bob',  shift: '7a-3p',  service: 'Area E',   spectra: '3281', office: '', cell: '123-456-12345' } 
        , ended_D_MD:  { name: 'funky bob',  shift: '7a-3p',  service: 'Area D',   spectra: '0003', office: '', cell: '' } 
        , ended_DE_MD: { name: 'Jimmy, Bob', shift: '10a-6p', service: 'Area D-E', spectra: '0002', office: '', cell: '' } 
        , ended_Tr_MD: { name: 'Jim, Bob',   shift: '8a-4p',  service: 'Triage',   spectra: '0001', office: '', cell: '' } 
        } 
      } 
    } 
  } 
const
  onShiftTarget =
    [ 'fastTrack1'
    , 'fastTrack2'
    , 'incoming/incoming_fastTrack1'
    , 'incoming/incoming_fastTrack2'
    , 'incoming/shiftEnd/ended_E_MD'
    , 'incoming/shiftEnd/ended_D_MD'
    , 'incoming/shiftEnd/ended_DE_MD'
    , 'incoming/shiftEnd/ended_Tr_MD'
    ]
    
for( let st of onShiftTarget)
  {
  let target = st.split('/').reduce((a,c)=>a[c], data.onShift)

  console.log( target.name, target.shift ,  target.service )
  }

Upvotes: 0

richytong
richytong

Reputation: 2462

Here's a real clean way with rubico

const data = {
  "onShift": {
    "fastTrack1": { "name": "Bob, bob", "shift": "7a-7p", "service": "Fasttrack", "spectra": "722413", "office": "", "cell": "" },
    "fastTrack2": { "name": "Bill, Bill", "shift": "7a-7p", "service": "Fasttrack2", "spectra": "54827", "office": "", "cell": "123-456-9090" },
  },
  "incoming": {
    "incoming_fastTrack1": { "name": "Billy, Bob", "shift": "7p-7a", "service": "Fasttrack", "spectra": "54821", "office": "", "cell": "123-456-8909" },
    "incoming_fastTrack2": { "name": "Funny, Bob", "shift": "7p-7a", "service": "Fasttrack2", "spectra": "3478", "office": "", "cell": "" },
  },
  "shiftEnd": {
     "ended_E_MD": { "name": "Kissy Bob", "shift": "7a-3p", "service": "Area E", "spectra": "3281", "office": "", "cell": "123-456-12345" },
     "ended_D_MD": { "name": "funky bob", "shift": "7a-3p", "service": "Area D", "spectra": "0003", "office": "", "cell": "" },
     "ended_DE_MD": { "name": "Jimmy, Bob", "shift": "10a-6p", "service": "Area D-E", "spectra": "0002", "office": "", "cell": "" },
     "ended_Tr_MD": { "name": "Jim, Bob", "shift": "8a-4p", "service": "Triage", "spectra": "0001", "office": "", "cell": "" }
  },
}

const { map } = rubico

map(map(agent => {
  console.log(agent)

  const {
    name, spectra, shift, cell, off,
  } = agent

  // $("#dataTargetOnCall").append('<tr><td>'+name+'</td><td>'+service+'</td>...etc');
}))(data)
<script src="https://unpkg.com/rubico"></script>

Documentation for map

Disclaimer: I am the author of rubico

Upvotes: 1

Related Questions