30 Days Of JavaScript.16E

Day 16. JSON_Exercise

Level 1 / Level 2 / Level 3

👟Level 1.

1. Change skills array to JSON using JSON.stringify().

const skills = ['HTML', 'CSS', 'JS', 'React','Node', 'Python']
const skillsTxt = JSON.stringify(skills);

console.log(skillsTxt);
// ["HTML","CSS","JS","React","Node","Python"]

2. Stringify the age variable.

let age = 250;
let ageStr = JSON.stringify(age);

console.log(ageStr);  // 250
console.log(typeof age);  // number
console.log(typeof ageStr);  // string

3. Stringify the isMarried variable.

let isMarried = true
let isMarriedTxt = JSON.stringify(isMarried);

console.log(isMarriedTxt);  // true
console.log(typeof isMarried);  // boolean
console.log(typeof isMarriedTxt);  // string

4. Stringify the student object.

const student = {
  firstName:'Asabeneh',
  lastName:'Yetayehe',
  age:250,
  isMarried:true,
  skills:['HTML', 'CSS', 'JS', 'React','Node', 'Python', ]
}
const studentTxt = JSON.stringify(student);

console.log(studentTxt);
// {"firstName":"Asabeneh","lastName":"Yetayehe","age":250,"isMarried":true,"skills":["HTML","CSS","JS","React","Node","Python"]}

👟Level 2.

1. Stringify the students object with only firstName, lastName and skills properties.

const student = {
  firstName:'Asabeneh',
  lastName:'Yetayehe',
  age:250,
  isMarried:true,
  skills:['HTML', 'CSS', 'JS', 'React','Node', 'Python', ]
}
// give 2 spaces
const studentFilterTxt = JSON.stringify(student, ['firstName', 'lastName', 'skills'], 2);

console.log(studentFilterTxt);
/*
{
  "firstName": "Asabeneh",
  "lastName": "Yetayehe",
  "skills": [
    "HTML",
    "CSS",
    "JS",
    "React",
    "Node",
    "Python"
  ]
}
*/

To use a filter array in replacer argument, I should put the properties as strings(with ‘’, “”, or ``). Otherwise the code will give ReferenceError.

👟Level 3.

1. Parse the txt JSON to object.

const txt = `{
    "Alex": {
        "email": "alex@alex.com",
        "skills": [
            "HTML",
            "CSS",
            "JavaScript"
        ],
        "age": 20,
        "isLoggedIn": false,
        "points": 30
    },
    "Asab": {
        "email": "asab@asab.com",
        "skills": [
            "HTML",
            "CSS",
            "JavaScript",
            "Redux",
            "MongoDB",
            "Express",
            "React",
            "Node"
        ],
        "age": 25,
        "isLoggedIn": false,
        "points": 50
    },
    "Brook": {
        "email": "daniel@daniel.com",
        "skills": [
            "HTML",
            "CSS",
            "JavaScript",
            "React",
            "Redux"
        ],
        "age": 30,
        "isLoggedIn": true,
        "points": 50
    },
    "Daniel": {
        "email": "daniel@alex.com",
        "skills": [
            "HTML",
            "CSS",
            "JavaScript",
            "Python"
        ],
        "age": 20,
        "isLoggedIn": false,
        "points": 40
    },
    "John": {
        "email": "john@john.com",
        "skills": [
            "HTML",
            "CSS",
            "JavaScript",
            "React",
            "Redux",
            "Node.js"
        ],
        "age": 20,
        "isLoggedIn": true,
        "points": 50
    },
    "Thomas": {
        "email": "thomas@thomas.com",
        "skills": [
            "HTML",
            "CSS",
            "JavaScript",
            "React"
        ],
        "age": 20,
        "isLoggedIn": false,
        "points": 40
    },
    "Paul": {
        "email": "paul@paul.com",
        "skills": [
            "HTML",
            "CSS",
            "JavaScript",
            "MongoDB",
            "Express",
            "React",
            "Node"
        ],
        "age": 20,
        "isLoggedIn": false,
        "points": 40
    }
}`
const txtObject = JSON.parse(txt);

console.log(txtObject);
// {Alex: {…}, Asab: {…}, Brook: {…}, Daniel: {…}, John: {…}, …}

2. Find the user who has most skills from the variable stored in txt.

const txtObject = JSON.parse(txt);
const txtNames = Object.keys(txtObject);
const skillsNum = [];
for (let i = 0; i < txtNames.length; i++) {
  skillsNum[i] = txtObject[`${txtNames[i]}`].skills.length;
}
let max = Math.max(...skillsNum);
for (const element of skillsNum) {
  if (element === max) {
    console.log(txtNames[skillsNum.indexOf(element)]);
  }
}  // Asab


const txtObject = JSON.parse(txt);
const txtNames = Object.keys(txtObject);
const skillsNum = {};
for (let i = 0; i < txtNames.length; i++) {
  // assign name-number as key-value pairs
  skillsNum[`${txtNames[i]}`] = txtObject[`${txtNames[i]}`].skills.length;
}
let skillNumValue = Object.values(skillsNum)
let max = Math.max(...skillNumValue);
for (const value of skillNumValue) {
  if (value === max) {
    console.log(Object.keys(skillsNum)[skillNumValue.indexOf(value)]);
  }
}  // Asab

• Mistakes I’ve been through

I wanted to use the reviver function to only print out the names and skills property.

const txtNames = Object.keys(JSON.parse(txt));
const txtObject = JSON.parse(txt, (key, value) => {
  if (key === 'skills') {
    console.log(value.length);
}});
console.log(txtObject);
// 3 8 5 4 6 4 7

const txtNames = Object.keys(JSON.parse(txt));
const txtObject = JSON.parse(txt, (key, value) => {
    for (let i = 0; i < txtNames.length; i++) {
        if (key === `${txtNames[i]}`) {
        console.log(txtNames[i], value["skills"]);
}}});
/* 
  Alex undefined
  Asab undefined
  Brook undefined
  Daniel undefined
  John undefined
  Thomas undefined
  Paul undefined
*/

Trying to use reviver function, I found out that the function doesn’t return the whole value. In the code down below, I expected the value would return the object of ‘Alex’, but it returned an empty object.

const txtNames = Object.keys(JSON.parse(txt));
const txtObject = JSON.parse(txt, (key, value) => {
  if (key === 'Alex') {
    console.log(key, value);
}});
console.log(txtObject);
// Alex {}

const txtNames = Object.keys(JSON.parse(txt));
const txtObject = JSON.parse(txt, function(key, value) {
  if (key === 'Alex') {
    console.log(this);
}});
// {Alex: {…}, Asab: {…}, Brook: {…}, Daniel: {…}, John: {…}, …}
// the {…} is empty

When converting JSON to an object, I can use reviver method to format the JSON text.