javascript - make JSON attributes keys links on the first level

Question

I need to prettify some JSON to display within an HTML <pre> section.

The working javascript code I use is..

function transformJson(k, v) {

  if (k === 'href' && typeof v === 'string') {
      var label = v.replace(/&/gi, '&amp;');
    return '<a href=' + v + '>' + label + '</a>';
  }
  return v;
}

function jsonFormat(jsonString) {

   var jsonObj = JSON.parse(jsonString, transformJson);
   return JSON.stringify(jsonObj, undefined, 2)
            .replace(/\s"(\w*)":/g, ' "<span class="key">$1</span>":')
            .replace(/:\s"(.*)"/g, ': "<span class="string">$1</span>"');
};

Now I would like to make all attributes keys at the first level, regardless of the attribute value, links to "/documentation#attributeKeyText".

var jsonToPrettify = {
  "href": "link/me",
  "nonHrefButMakeThisKeyALink": "some_text",
  "obj": {
    "href": "link/me",
    "thisKeyWontBeALinkInsteadBecauseHasAParent": "some_text"
  }
}

console.log( jsonFormat( JSON.stringify( jsonToPrettify ) ) );

How can I achieve that? How can I check that the current attribute has no parent object?

Thanks

UPDATE:

Output of the current version is:

{
  "<span class="key">href</span>": "<span class="string"><a href=link/me>link/me</a></span>",
  "<span class="key">nonHrefButMakeThisKeyALink</span>": "<span class="string">some_text</span>",
  "<span class="key">obj</span>": {
    "<span class="key">href</span>": "<span class="string"><a href=link/me>link/me</a></span>",
    "<span class="key">thisKeyWontBeALinkInsteadBecauseHasAParent</span>": "<span class="string">some_text</span>"
  }
}

So I just want the span nonHrefButMakeThisKeyALink to be a link instead..

What's the point of stringifying the object to JSON and then parse it and then stringify it again? — Oriol
– Oriol, Commented Apr 14, 2016 at 17:34
I receive the json in string form from another service. That console.log is just to allow to copy the whole question in the console and see it in action.. — Gabe
– Gabe, Commented Apr 14, 2016 at 17:36

lukbl · Accepted Answer · 2016-04-14 21:41:30Z

1

Topmost object is passed to function provided as parameter for JSON.parse() under empty key. You need to include that in your transformJson:

function transformJson(k, v) {
  if (k === 'href' && typeof v === 'string') {
    var label = v.replace(/&/gi, '&amp;');
    return '<a href=' + v + '>' + label + '</a>';
  } else if (k === '') {
    for (var x in v) {
      //skipping 'href' because it's handled by previous 'if'
      if (x !== 'href' && typeof v[x] === 'string') {
        var label = v[x].replace(/&/gi, '&amp;');
        v[x] = '<a href=/documentation#' +  x  + '>' + label + '</a>';
      }
    }
  }
  return v;
}

answered Apr 14, 2016 at 21:41

lukbl

1,7831 gold badge9 silver badges13 bronze badges

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

Comments

Gabe · Accepted Answer · 2016-04-14 23:17:39Z

0

Simply adding this after JSON.parse did the trick..

var newObj = {};

for(var attr in jsonObj){
    if( jsonObj[attr].constructor != Object && attr != 'href'){
        newObj['<a href="/documentation#'+attr+'">'+attr+'</a>'] = jsonObj[attr];
    }else{
        newObj[attr] = jsonObj[attr];
    }
}

(And then clearly JSON.stringify applied to newObj)

edited Apr 14, 2016 at 23:17

answered Apr 14, 2016 at 22:53

Gabe

6,3996 gold badges59 silver badges97 bronze badges

Collectives™ on Stack Overflow

javascript - make JSON attributes keys links on the first level

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related