How to separate a json data in javascript

Question

I am very new to js, now i have a json data which was passed by backend to my js file. The json data is like the following:

{
Vivo:{Time:[20190610,20190611],Price:[2000,2000]},
Huawei:{Time:[20190610,20190611],Price:[3000,3000]},
Maxvalue:3000
}

the json data i get is by the following code:

fetch('/Tmall') //Tmall is the url i go to fetch data
.then(function(response) {
return response.json();
}).then(function(Data) {

...
}

Next I will process the data to present at the front-end, but i don't know how to assign the Data to two different argument:

Cellphone = 
{
Vivo:{Time:[20190610,20190611],Price:[2000,2000]},
Huawei:{Time:[20190610,20190611],Price:[3000,3000]}
}

Max = {Maxvalue:3000}

Here is what i tried to do, i used if-is the key to separate the data from the original one, but it dosen't work

    var Cellphone = {}
    for (var i = 0; i < Data.length; i++)
    {
      if (Data.key[i] != 'Maxvalue'){
        Cellphone.push(Data[i])
      }
    }

Access an object's data with dot notation: let Cellphone = { Vivo: Data.Vivo, Huawei: Data.Huawei }; and let Max = Data.Maxvalue;. — Kévin Bibollet
– Kévin Bibollet, Commented Jun 11, 2019 at 8:39
@JackBashford The second last code block is the output i want :) the last code block i wrote is only deal with the cellphone part. in reality i actually have multiple cellphone infos need to deal with — Tilei Liu
– Tilei Liu, Commented Jun 11, 2019 at 9:07

Yosvel Quintero · Accepted Answer · 2019-06-11 08:48:22Z

2

You can use Object.keys() combined with Array.prototype.filter() and Array.prototype.map().

Code:

// Your `Data` response...
const Data = {Vivo:{Time:[20190610,20190611],Price:[2000,2000]},Huawei:{Time:[20190610,20190611],Price:[3000,3000]},Maxvalue:3000};

// Logic
const Cellphone = Object.keys(Data)
  .filter(k => k !== 'Maxvalue')
  .map(k => ({ [k]: Data[k] }));
const Max = { Maxvalue: Data.Maxvalue };

console.log('Cellphone:', Cellphone);
console.log('Max:', Max);

answered Jun 11, 2019 at 8:48

Yosvel Quintero

19.1k5 gold badges39 silver badges47 bronze badges

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

4 Comments

Tilei Liu Over a year ago

Hi is "k" a reserved word? or in filter() or map() it can be automatically identified as a variable to iterate through the parameter? i have no idea how machine can realize what k is here

Yosvel Quintero Over a year ago

@TileiLiu k is a variable name.. The current element being processed in the array of keys

Tilei Liu Over a year ago

is it adaptable if i replace 'k' with 'a','b','c' .... or even a word like 'element'?

Yosvel Quintero Over a year ago

Yes, that is right.. I used k because referring to the object keys but you can use any variable name

Jack Bashford · Accepted Answer · 2019-06-11 08:42:34Z

2

Just extract the Maxvalue property, and assign the others to Cellphone. This is really simple with destructuring and spreading:

const data = {
  Vivo: {
    Time: [20190610, 20190611],
    Price: [2000, 2000]
  },
  Huawei: {
    Time: [20190610, 20190611],
    Price: [3000, 3000]
  },
  Maxvalue: 3000
};

const { Maxvalue: Max, ...Cellphone } = data;
console.log("Max:", Max);
console.log("Cellphone:", Cellphone);

.as-console-wrapper { max-height: 100% !important; top: auto; }

answered Jun 11, 2019 at 8:42

Jack Bashford

44.3k11 gold badges56 silver badges84 bronze badges

3 Comments

Tilei Liu Over a year ago

HI~I don't get what is this mean "const { Maxvalue: Max, ...Cellphone } = data;"

Jack Bashford Over a year ago

The const {...} = data means we're extracting object properties. The Maxvalue: Max makes a new variable called Max and gives it the value of data.Maxvalue. The ...Cellphone makes a new object called Cellphone with all the rest of the properties in data.

Tilei Liu Over a year ago

Hi i put the code in my js file, yet it still dosen't work. is it because instead of an const my "Data" is actually a object?

Someone · Accepted Answer · 2019-06-11 08:42:19Z

1

You can individually pick out the max value, save it in to a variable, then remove it from the object. This will allow you to assign all cellphones to a variable, even if their names change. For example;

let data = {
  Vivo:{Time:[20190610,20190611],Price:[2000,2000]},
  Huawei:{Time:[20190610,20190611],Price:[3000,3000]},
  Maxvalue:3000
}

// save the maxValue key
let maxValue = data.Maxvalue;

// then remove it from the object
delete(data.Maxvalue);

// the remaining keys are cellphones
let cellPhones = data;

console.log(maxValue, cellPhones);

answered Jun 11, 2019 at 8:42

Someone

3,5881 gold badge28 silver badges43 bronze badges

1 Comment

Tilei Liu Over a year ago

Thank you! it's also a great answer.

Nils · Accepted Answer · 2019-06-11 08:40:10Z

0

In the function, where you set Data as a parameter, do the following

let Cellphone = {
    Vivo: Data.Vivo,
    Huawei: Data.Huawei
};
let Max = Data.Maxvalue;

answered Jun 11, 2019 at 8:40

Nils

731 silver badge10 bronze badges

2 Comments

Someone Over a year ago

What if the cellphone names change?

Vadim Hulevich Over a year ago

Capital case in js usually using for class

Peter · Accepted Answer · 2019-06-11 08:43:19Z

0

The following code should solve your problem

var phones = {};
var max;
Object.entries(data).forEach(function (entry) {
  if (entry[0] == "Maxvalue") {
    max = entry[1];
  }
  else {
    phones[entry[0]] = entry[1];
  }
});
console.log("Phones: ", phones);
console.log("Max: ", max)

answered Jun 11, 2019 at 8:43

Peter

38.9k39 gold badges151 silver badges213 bronze badges

Collectives™ on Stack Overflow

How to separate a json data in javascript

5 Answers 5

4 Comments

3 Comments

1 Comment

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

4 Comments

3 Comments

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related