These are chat archives for FreeCodeCamp/Help

22nd
Jan 2019
Daniel Feldman
@Feldbot
Jan 22 02:24

Hi, I'm trying to get some general advice on how to process JSON with JavaScript or jQuery when it comes to null values. Here is an example—say I have a list of people that I want to render to the DOM that looks like this:

var result = {
  firstName: "Foo",
  middleName: null,
  lastName: "Bar"  
};

I want to render only properties that have values, in this case Foo Bar, since middleName is null. But if middleName had a property, say middleName: "Baz", I'd want to render Foo Baz Bar. I'm not sure if I need to set up my JavaScript with conditionals where it would eliminate null values, or process the JSON to begin with to strip out values, or another technique altogether. I'm trying to find a solution that would be flexible enough to accept either use case when I render to the DOM. Any thoughts?

@tundeiness https://freesound.org/ is a good place to store and explore sounds for download.
Christopher McCormack
@cmccormack
Jan 22 02:51
@Feldbot the value of middleName will be falsy so you could do something as simple as result.middleName || '' in your concatenation, or maybe a ternary like ... result.middleName ? result.middleName + ' ' : ''
Daniel Feldman
@Feldbot
Jan 22 03:03

@cmccormack That seems like it would work well for this example. Do you have any advice on how to scale that approach up to a more complex JSON set with nested null values? Also, I'm wondering how to tie this idea together with the DOM template which that might look like this:

$(".container").append(
'<span>' + result.firstName + '</span>' \  
'<span>' + result.middleName + '</span>' \  
'<span>' + result.lastName + '</span>' \  
');

In some cases I'd rather not write the element if it is null. In my example if it returned an empty string it wouldn't matter, but in some cases I might have a <p> tag or other block level element that by returning an empty string it would keep the element leaving more space than what I want.

Christopher McCormack
@cmccormack
Jan 22 03:05
@Feldbot wrap the element with the ternary instead. Consider using an iterator to append your elements instead of trying to do it all in one argument
Daniel Feldman
@Feldbot
Jan 22 03:07
@cmccormack Can you give me an example, not sure I quite follow that...
Claudio Restifo
@Marmiz
Jan 22 03:07
@Feldbot In case you are not sure what key-value will be null, and may differ from each object I would manipulate the obj first and filter out any false value. Then i'd keep my render function as dumb as possible since the data that will read will be cleaned.
Christopher McCormack
@cmccormack
Jan 22 03:13
@Feldbot haven't used jquery in a while but maybe something like this
@Marmiz agreed, that's what I did in my example actually
@Feldbot good luck I gotta run
Daniel Feldman
@Feldbot
Jan 22 03:14
@cmccormack @Marmiz Thanks. I'll work on this, appreciate the suggestions very much!
Claudio Restifo
@Marmiz
Jan 22 03:16

@cmccormack I'd go with something like:

const cleanObj = (obj) => 
  Object.keys(obj)
    .filter(k => obj[k])
    .reduce((acc, key) => ((acc[key] = obj[key]), acc), {});

So that you process the object directly and in this case filter out any false value.
You can extend it to accept any filter function as arg in case

Daniel Feldman
@Feldbot
Jan 22 03:26
@Marmiz Can you offer a little commentary on what is going on in that example? I'm having a hard time understanding that.
Claudio Restifo
@Marmiz
Jan 22 03:31

@Feldbot oh sorry, it's just a little function that takes an object obj,
creates an array containing the keys of the object; than filter out any key that holds a falsy value.

At the end you create a new object containing only key/value from the filtered array:

const cleanObj = (obj) => 
  Object.keys(obj)
    .filter(k => obj[k])
    .reduce((acc, key) => ((acc[key] = obj[key]), acc), {});

const o = {
  name: 'test',
  value: 1,
  books: undefined,
  foo: 'bar',
  baz: () => console.log('baz')
}

cleanObj(o) //{ name: 'test', value: 1, foo: 'bar', baz: [Function] }
Daniel Feldman
@Feldbot
Jan 22 03:38
@Marmiz Thanks very much, this is a helpful example! I need to refresh my memory on these methods to figure out how they are working when I am fresh tomorrow. Is this sort of a go-to for working with JSON? It seems like there are always going to be falsey values hiding out. Better to clean up the data first as a best practice then render? Will this work to get out deeply nested falsey values? No easier way to tackle this problem really it seems.
Claudio Restifo
@Marmiz
Jan 22 03:41

@Feldbot

Better to clean up the data first as a best practice then render?

Depends on your needs. If you don't want to render anything I like to remove them first.
But maybe you wanted to render a message instead (like "you have no messages")...

Will this work to get out deeply nested falsey values
no unfortunately. Going deeper requires looping :)

but don't get too hung up on this function... was just an idea, you knows best what works for you :)
Daniel Feldman
@Feldbot
Jan 22 03:46
@Marmiz Can you recommend any resources to understand this better? I spent many hours today reading stackoverflow trying to understand the basic premises of rendering JSON and eliminating null values but I couldn't really find any consensus. I really need some basic background or high-level info on strategies for rendering only what you need from JSON, skipping null and such.
kamransagheir
@kamransagheir
Jan 22 03:52
Need help with linux arcc
arch
pl
z
asap
There is a particular software called "tomcat" that I'm trying to run from the console but it is not working
can someone help me out by maybe installing it and seeing if it works for them'
I can't find any help online
It works fine with linux fedora and windowa
but I'm not able to make it work for linux arch
Claudio Restifo
@Marmiz
Jan 22 03:55

@Feldbot well, unfortunately I cannot think of any high-level info since:

rendering only what you need from JSON

it's such an arbitrary requirement. Not only it changes from project to project... but it may changes while the project grows.
(like , you start wanting to avoid render, but after a while you change your mind and want a placeholder or something)

My best suggestion is understanding exactly what you want to achieve... then slowly but steadily you work on your solution

@cmccormack you up for a question?
Daniel Feldman
@Feldbot
Jan 22 04:06
@Marmiz Thanks Claudio. It is a hard question to answer and does seem to rely on the context of the problem. I appreciate your help, I'll be mulling that over tomorrow! Cool picture btw :-)
Tom
@moT01
Jan 22 04:10
@Marmiz whats the problem
Claudio Restifo
@Marmiz
Jan 22 04:14

@moT01 Have a project that relies on Gulp (i'm a webpack guy).
I want to pretty much change a js file based on the env variable.

Now for my understeanding I have to set task to Gulp. So I can create two task based on the stream.
The best way to modify a file in this scenario would be with WriteStream? Or there's a built in gulp system?

Tom
@moT01
Jan 22 04:18
I can't help ya there
Claudio Restifo
@Marmiz
Jan 22 04:20
no worries
I think at the end of the day it's just node
tundeiness
@tundeiness
Jan 22 07:54
@Feldbot thanks
Daniel
@dkapexhiu
Jan 22 10:35
Hello! how to find plugin dependencies in wordpress?
tundeiness
@tundeiness
Jan 22 10:41
errrm guys can someone help me check why my Hello isn't rendering? https://codepen.io/highness/pen/xmMMoG?editors=0110
mstellaluna
@mstellaluna
Jan 22 13:04
@anandpotukchi Hello, when posting large amount of code, please use a jsbin, gist, codepen or similar tool. Posting large amount of code is considered spamming as part of our code of conduct at https://code-of-conduct.freecodecamp.org
Niraj Nandish
@Nirajn2311
Jan 22 14:12
Christopher McCormack
@cmccormack
Jan 22 15:26
@Marmiz hey sorry I logged off right before you asked, hope you got an answer!
Christopher McCormack
@cmccormack
Jan 22 17:03
@tundeiness you good on that issue? Seems your code has changed since you asked
Rafah Mehfooz
@Rafah-Mehfooz
Jan 22 19:55
hey guys, I need to assign color to each stack in polar chart, does anybody have experience in anychart and can guide me how can I achieve that ?https://www.anychart.com/products/anychart/gallery/Polar_Charts/Stacked_Column_Polar_Chart.php
May Kittens Devour Your Soul
@diomed
Jan 22 20:06
this tea is nothing but hot leaf juice...*
Tecnott
@Tecnott_twitter
Jan 22 20:31
Hi, I'm new using e107 I enter to search for themes in the find themes option, but it sends me this error: "Unable to connect for updates. Please check firewall and / or internet connection", but I do not know what I can do
Rafah Mehfooz
@Rafah-Mehfooz
Jan 22 22:34
Hey guys i need help with anycharts, anybody willing to guide me?