Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – How do I create an array out of specific parts of JSON data?

After calling an API, I have some data in JSON format. Within that format, there is an array with sub-parts (I apologize, I don’t know the terminology) that exist inside each key of the array.

{
  "id": "<my id>",
  "bots": [],
  "avatar": "https://static-cdn.jtvnw.net/jtv_user_pictures/1c1c09ef-3937-4408-8f31-04ec6bec2238-profile_image-300x300.png",
  "channelEmotes": [],
  "sharedEmotes": [
    {
      "id": "<emote id>",
      "code": "<emote name>",
      "imageType": "<filetype>",
      "animated": true,
      "user": {
        "id": "<emote creator id>",
        "name": "<emote creator username>",
        "displayName": "<emote creator display name>",
        "providerId": "<not sure what this field is actually>"
      }
    },
    {
      "id": "<emote id>",
      "code": "<emote name>",
      "imageType": "<filetype>",
      "animated": true,
      "user": {
        "id": "<emote creator id>",
        "name": "<emote creator username>",
        "displayName": "<emote creator display name>",
        "providerId": "<not sure what this field is actually>"
      }
    }
  ]
}

Specifically, I want to make separate arrays for all the emote name, emote id, and filetypes like (I plan to have many more than these two)

var emotecodes = [code0, code1, ...];
var emoteids = [id0, id1, ...];
var emotefiletypes = [imageType0, imageType1, ...];

I’ve tried various other things I’ve found around the internet but have had no success.

Tags:

4

Answers


  1. 0

    You can use the reduce function on the sharedEmotes property of the json

    const jsonData = {
  "id": "<my id>",
  "bots": [],
  "avatar": "https://static-cdn.jtvnw.net/jtv_user_pictures/1c1c09ef-3937-4408-8f31-04ec6bec2238-profile_image-300x300.png",
  "channelEmotes": [],
  "sharedEmotes": [{
      "id": "<emote id>",
      "code": "<emote name>",
      "imageType": "<filetype>",
      "animated": true,
      "user": {
        "id": "<emote creator id>",
        "name": "<emote creator username>",
        "displayName": "<emote creator display name>",
        "providerId": "<not sure what this field is actually>"
      }
    },
    {
      "id": "<emote id>",
      "code": "<emote name>",
      "imageType": "<filetype>",
      "animated": true,
      "user": {
        "id": "<emote creator id>",
        "name": "<emote creator username>",
        "displayName": "<emote creator display name>",
        "providerId": "<not sure what this field is actually>"
      }
    }
  ]
};

const formattedData = jsonData.sharedEmotes.reduce((acc, curr) => {

  acc.emotecodes.push(curr.code);
  acc.emoteids.push(curr.id);
  acc.emotefiletypes.push(curr.imageType);


  return acc;
}, {
  emotecodes: [],
  emoteids: [],
  emotefiletypes: []
});


console.log(formattedData.emotecodes, formattedData.emoteids, formattedData.emotefiletypes)
    Login or Signup to reply.
  2. 0

    To create separate arrays for the emote names, emote ids, and filetypes from the JSON data, you can use the map function in JavaScript. The map function will allow you to extract specific parts of the JSON data and create new arrays based on those parts.

    const emotecodes = data.sharedEmotes.map(emote => emote.code);
const emoteids = data.sharedEmotes.map(emote => emote.id);
const emotefiletypes = data.sharedEmotes.map(emote => emote.imageType)
    Login or Signup to reply.
  3. 0

    Here is a old fashioned way to get your data. (O(N)):

    const getData = (json, type) => {
  let result = []
  for (let i of json['sharedEmotes']) {
    result.push(i[type])
  }
  return result
}

    It just iterates over the sharedEmotes array and push the type into a new array.

    And here is the full code:

    const json = {
  "id": "<my id>",
  "bots": [],
  "avatar": "https://static-cdn.jtvnw.net/jtv_user_pictures/1c1c09ef-3937-4408-8f31-04ec6bec2238-profile_image-300x300.png",
  "channelEmotes": [],
  "sharedEmotes": [{
      "id": "<emote id>",
      "code": "<emote name>",
      "imageType": "<filetype>",
      "animated": true,
      "user": {
        "id": "<emote creator id>",
        "name": "<emote creator username>",
        "displayName": "<emote creator display name>",
        "providerId": "<not sure what this field is actually>"
      }
    },
    {
      "id": "<emote id>",
      "code": "<emote name>",
      "imageType": "<filetype>",
      "animated": true,
      "user": {
        "id": "<emote creator id>",
        "name": "<emote creator username>",
        "displayName": "<emote creator display name>",
        "providerId": "<not sure what this field is actually>"
      }
    }
  ]
}

const getData = (json, type) => {
  let result = []
  for (let i of json['sharedEmotes']) {
    result.push(i[type])
  }
  return result
}

let emotecodes = getData(json, 'code');
let emoteids = getData(json, 'id');
let emotefiletypes = getData(json, 'imageType');

console.log(emotecodes)
console.log(emoteids)
console.log(emotefiletypes)
    Login or Signup to reply.
  4. 0

    Array.prototype.map() method would do the work. Also consider using const or let to declare variables instead of var (Here is why).

    const apiJSONData = {
    id: '<my id>',
    bots: [],
    avatar:
      'https://static-cdn.jtvnw.net/jtv_user_pictures/1c1c09ef-3937-4408-8f31-04ec6bec2238-profile_image-300x300.png',
    channelEmotes: [],
    sharedEmotes: [
      {
        id: '<emote id>',
        code: '<emote name>',
        imageType: '<filetype>',
        animated: true,
        user: {
          id: '<emote creator id>',
          name: '<emote creator username>',
          displayName: '<emote creator display name>',
          providerId: '<not sure what this field is actually>',
        },
      },
      {
        id: '<emote id>',
        code: '<emote name>',
        imageType: '<filetype>',
        animated: true,
        user: {
          id: '<emote creator id>',
          name: '<emote creator username>',
          displayName: '<emote creator display name>',
          providerId: '<not sure what this field is actually>',
        },
      },
    ],
  };

  const emoteCodes = apiJSONData.sharedEmotes.map((emoteObj) => emoteObj.code);
  const emoteIds = apiJSONData.sharedEmotes.map((emoteObj) => emoteObj.id);
  const emoteFileTypes = apiJSONData.sharedEmotes.map(
    (emoteObj) => emoteObj.imageType
  );

  console.log(emoteCodes);
  console.log(emoteIds);
  console.log(emoteFileTypes);
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search