Convert the value of null in the array to a string-- what are your methods?

 let myData = [
                    {id:1,name:"",age:10,Career:null},
                    {id:2,name:"",age:10,Career:""},
                    {id:3,name:"",age:10,Career:null},
                ];

to replace an empty Career with a string--
my way is 

    Nullzhuan(data){
       if(data == null){
          return "- -";
        }else{
        return data;
        }
    }
   let _this = this;
   myData.map(item=>{
         item.name = _this.Nullzhuan(item.name);
         item.age= _this.Nullzhuan(item.age);
         item.Career = _this.Nullzhuan(item.Career);
      })

I think mine is too troublesome. Is there any easier way?

Html5 javascript
Oct.26,2021

  • version 1: 

    myData.map(d=>{
    Object.keys(d).forEach((k)=>d[k]=d[k]||'- -')
    return d
})

  • version 2 (Devil version): 

    myData.map(d=>Object.keys(d).reduce((k1,k2)=>typeof k1=== 'string'?{[k1]:(d[k1]||'- -'),[k2]:(d[k2]||'- -')}:{...k1,[k2]:(d[k2]||'- -')}))

  • version 3 (version 2 improvement): 

    myData.map(d=>Object.keys(d).map(k=>({[k]:(d[k]||'- -')})).reduce((d1,d2)=>({...d1,...d2})))
  • effect:

    clipboard.png

  • involves

    • map , Object.keys () , reduce , . expand, dynamic key , | gate value, arrow function.

  • description (based on version 3):

    1. Object.keys you can get key of an object : 

      Object.keys({id:1,name:"",age:10,Career:null})
// (4)["id", "name", "age", "Career"]

    2. in js | does not return bool , but a value, 0 | | 12 returns 12 with a short circuit, true | | false returns true about & & and in js | | there are many 

      0||12 //12 
true || false // false

    3. dynamic key , object key can use variables instead of 

      let key='name'
{[key]:'hello'}
// {name: "hello"}

    4. . expander, which expands the property and merges the same key values when used in the object, such as age here, which replaces the previous

      . 
      {...{name:'hello',age:'22'},age:44}
{name: "hello", age: 44}

    5. reduce is also very useful. Here we use the expansion + merge objects above 

      [1,2,3,4,5].reduce((d1,d2)=>d1+d2) // 15 
[{name:"1"},{age:2}].reduce((d1,d2)=>{...d1,...d2}) //{name: "1", age: 2}

    6. map Mapping 

      [1,2,3].map(d=>({num:d})) // [{num: 1},{num: 2},{num: 3}]

    7. start with one data 

      let data={id:1,name:"",age:10,Career:null}
Object.keys(data) 
// ["id", "name", "age", "Career"]

Object.keys(data).map(k=>({[k]:(data[k]||'- - ')})) 
// [{"id":1},{"name":""},{"age":10},{"Career":"- - "}]

Object.keys(data).map(k=>({[k]:(data[k]||'- - ')})).reduce((d1,d2)=>({...d1,...d2})) 
// {"id":1,"name":"","age":10,"Career":"- - "}

    8. and then transform it into array mapping 

      myData.map(d=>Object.keys(d).map(k=>({[k]:(d[k]||'- -')})).reduce((d1,d2)=>({...d1,...d2})))
  • Summary
    the above is the basis of es6 , but it is not recommended to write such complex code, which is not very friendly to maintenance, unless the encapsulation and documentation are very beautiful. As for thinking, you have to use the idea of data flow. A data is like a stream of water. After each process, it becomes another form of data, until the last process becomes the data you want. It is called data cleaning.

can be written like this: 

 myData.map(item=>{
         item.name = !item.name && '- -';
         item.age= !item.age && '- -';
         item.Career = !item.Career && '- -';
      })

shouldn't the easiest thing be to change to json, regular match and replace it? 

let s = JSON.stringify(myData);
JSON.parse(s.replace(/"Career":null/g, '"Career":"--"'))

you should solve the problem at the database level and change the field default null to default empty string.
wants to adopt the answer. Personally, I am a full-end developer, so I understand the pain of being a front-end developer.

what are all the other answers? And the landlord this also has a serious problem, do not use map return is not all undefined, paste the code I wrote it. For reference only. 

let myData = [
  {id:1,name:"",age:10,Career:null},
  {id:2,name:"",age:10,Career:""},
  {id:3,name:"",age:10,Career:null},
];

let filterData = myData.map(item=>{
  let obj = {};  // 
  for( const key in item ){
    obj[key] = item[key] || '- -'
  }
  return obj
})

console.log(filterData)

discuss with the backend whether null can be returned as an empty string

Previous: PHP scheduling problem, look at the picture

Next: Is there a front-end H5 activity page framework?

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
© 2021 CodesHelper
Advertising Contact us About us
Menu