How to access JSON string containing null value in Javascript

Question

I have this JSON I retrieve from an API that contains null values. How do I better traverse the JSON and abstract the functionality?

const colletionjson = 
      { "collections": 
        [ { "title"          : "Home page"
          , "description"    : null
          , "image"          : null
          } 
        , { "title"          : "Products"
          , "description"    : "Products"
          , "image"          : { "src": "https:www.example.com" } 
          , "products_count" : 3
          } 
        ] 
      } 

$.each(collectionjson, function (key, value) {
  $.each(value, function (key, value) {

    var collectionTitle = value.title;
    var collectionDescription = value.description;

    if (value == "image" && $.isArray(value)) {
      var collectionImage = value.image.src;
    } else {
      var collectionImage = "";
    }
  });
});
  // Do something with the data

There is no JSON in your question. JSON. by definition, is string data. It is the string representation of a JS object. What you have, is just a JS object, and calling that JSON/tagging it as JSON is going to simply get you the wrong people looking at your post. So: do you have _actual_ JSON? (if so, show that). If not, best to name things what they really are and remove any mention of JSON. — Mike 'Pomax' Kamermans, Nov 19 '20 at 00:10
[What is JSON anyway](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/JSON) — Randy Casburn, Nov 19 '20 at 00:14
This looks like this after @Mike'Pomax'Kamermans edited it. It is just looking pretty. — pensebien, Nov 19 '20 at 00:15
Sure it makes sense. I posted what was return as an object from the parser. — pensebien, Nov 19 '20 at 00:23
Since it is parsed it is no longer JSON, but a JavaScript object. However, let's not stick too long at the [difference between JSON and object literal notation](/q/2904131/3982562). What is the actual question about? *"How do I better traverse the JSON and abstract the functionality?"* is pretty vague. What is it exactly that you don't understand or have trouble with? — 3limin4t0r, Nov 19 '20 at 00:27

score 1 · Accepted Answer · answered Nov 19 '20 at 00:51

you can now use Optional chaining (?.) with ECMAScript 2020

sample code

const colletionjson =   // just a name
      { collections: 
        [ { title          : 'Home page'
          , description    : null
          , image          : null
          } 
        , { title          : 'Products'
          , description    : 'Products'
          , image          : { src : 'https:www.example.com' } 
          , products_count : 3
          } 
        ] 
      } 

colletionjson.collections.forEach((collection, i) =>
  {
  let collectionTitle       = collection.title
    , collectionDescription = collection.description  || ''
    , collectionImage       = collection.image?.src || '' 
    ;
  console.log (`index: ${i}, title: ${collectionTitle}, description: ${collectionDescription}, image: ${collectionImage}` )
  })

score 0 · Answer 2 · answered Nov 19 '20 at 00:26

if (colletionjson.collections && Array.isArray(colletionjson.collections)) {
  colletionjson.collections.forEach(value => {
    const collectionTitle = value.title;
    const collectionDescription = value.description;
    let collectionImage = '';
    if (value.image && value.image.src) {
      collectionImage = value.image.src;
      // do something with this value
    } 
  })
}

How to access JSON string containing null value in Javascript

2 Answers2