Converting only some object values into array

Question

so I have this array of objects:

 [
    {
    "id": "774944",
    "general": {
      "presentable_id": "774944",
      "name": "Blekk BROTHER LC1280XLC blå",
      "description": "<p><b>Få optimale utskriftsresultater, tydelig tekst og levende grafikk med Brother LC1280XLC-blekkpatronen i cyan.</b></p><li>Se kompatibilitetsoversikten for passende maskiner</li>"
    },
    "brand": {
      "name": "Brother Norge AS"
    },
    "images": {
      "primary": {
        "large": "https://i.imgur.com/zYcibjw.jpg"
      }
    }
    },
    {
    "id": "774945",
    "general": {
      "presentable_id": "774945",
      "name": "Blekk BROTHER LC1280XLM rød",
      "description": "<p><b>Få optimale utskriftsresultater, tydelig tekst og levende grafikk med Brother LC1280XLM-blekkpatronen i magenta.</b></p><p>Denne Brother som ikke falmer, for svært holdbare utskrifter. Denne blekkpatronen i magenta har en kapasitet på opptil 1200 sider.</p><li>Farge: Magenta</li><li>Kapasitet: Opptil 1200 A4-sider </li><li>Enkel å installere og skifte ut</li><li>Flekkbestandig og falmer ikke</li><li>Gir tekst og bilder med utmerket kvalitet</li><li>Se kompatibilitetsoversikten for passende maskiner</li>"
    },
    "brand": {
      "name": "Brother Norge AS"
    },
    "images": {
      "primary": {
        "large": "https://i.imgur.com/ucfnti1.jpg"
      }
    }
    },
    {
    "id": "774946",
    "general": {
      "presentable_id": "774946",
      "name": "Blekk BROTHER LC1280XLY gul",
      "description": "<p><b>Enkel å installere og skifte ut</li><li>Flekkbestandig og falmer ikke</li><li>Gir tekst og bilder med utmerket kvalitet</li><li>Se kompatibilitetsoversikten for passende maskiner</li>"
    },
    "brand": {
      "name": "Brother Norge AS"
    },
    "images": {
      "primary": {
        "large": "https://i.imgur.com/6zdrajU.jpg"
      }
    }
    },]

and I wish to extract all 'id' values from ii and insert them into array. I have managed to develop this:

let id_array = [];
class URLextracted extends Component {
constructor(props) {
  super(props);
  this.state = {
    output: {},
  };
}

componentDidMount() {
  fetch({ShowResults()})
    .then(response => response.json())
    .then(data => this.setState({ output: data }));
}
render() {
const { id } = this.state.output;
id_array.push(id);
return id_array;
}
}

ShowResults() inserts an API link to the fetch above. I'm not even sure if I should use a component here. I wish this to output this:

id_array = ['774944','774945','774946']

Can not figure out how to this by myself :/

id_array = this.state.output.map(({id}) => id)

ponury-kostek
– ponury-kostek

2019-06-13 14:10:21 +00:00
Commented Jun 13, 2019 at 14:10 — ponury-kostek
– ponury-kostek, Commented Jun 13, 2019 at 14:10

Manish Khedekar · Accepted Answer · 2019-06-13 14:15:28Z

let id_array = [];
let myJSON = [{
    "id": "774944",
    "general": {
      "presentable_id": "774944",
      "name": "Blekk BROTHER LC1280XLC blå",
      "description": "<p><b>Få optimale utskriftsresultater, tydelig tekst og levende grafikk med Brother LC1280XLC-blekkpatronen i cyan.</b></p><li>Se kompatibilitetsoversikten for passende maskiner</li>"
    },
    "brand": {
      "name": "Brother Norge AS"
    },
    "images": {
      "primary": {
        "large": "https://i.imgur.com/zYcibjw.jpg"
      }
    }
  },
  {
    "id": "774945",
    "general": {
      "presentable_id": "774945",
      "name": "Blekk BROTHER LC1280XLM rød",
      "description": "<p><b>Få optimale utskriftsresultater, tydelig tekst og levende grafikk med Brother LC1280XLM-blekkpatronen i magenta.</b></p><p>Denne Brother som ikke falmer, for svært holdbare utskrifter. Denne blekkpatronen i magenta har en kapasitet på opptil 1200 sider.</p><li>Farge: Magenta</li><li>Kapasitet: Opptil 1200 A4-sider </li><li>Enkel å installere og skifte ut</li><li>Flekkbestandig og falmer ikke</li><li>Gir tekst og bilder med utmerket kvalitet</li><li>Se kompatibilitetsoversikten for passende maskiner</li>"
    },
    "brand": {
      "name": "Brother Norge AS"
    },
    "images": {
      "primary": {
        "large": "https://i.imgur.com/ucfnti1.jpg"
      }
    }
  },
  {
    "id": "774946",
    "general": {
      "presentable_id": "774946",
      "name": "Blekk BROTHER LC1280XLY gul",
      "description": "<p><b>Enkel å installere og skifte ut</li><li>Flekkbestandig og falmer ikke</li><li>Gir tekst og bilder med utmerket kvalitet</li><li>Se kompatibilitetsoversikten for passende maskiner</li>"
    },
    "brand": {
      "name": "Brother Norge AS"
    },
    "images": {
      "primary": {
        "large": "https://i.imgur.com/6zdrajU.jpg"
      }
    }
  },
];

myJSON.map(a => id_array.push(a.id));

console.log(id_array);

devserkan · Accepted Answer · 2019-06-13 14:25:22Z

You can use map to iterate over your data, extract the id and render this data if this is what you want here. I'm providing a working example. Do not think about the getData part. I'm just mimicking the fetch part here. You can examine the render part of the component. Also, I've changed the output state to an array since your data is actually an array.

const data = [
  {
    id: "774944",
    general: {
      presentable_id: "774944",
      name: "Blekk BROTHER LC1280XLC blå",
      description:
        "<p><b>Få optimale utskriftsresultater, tydelig tekst og levende grafikk med Brother LC1280XLC-blekkpatronen i cyan.</b></p><li>Se kompatibilitetsoversikten for passende maskiner</li>"
    },
    brand: {
      name: "Brother Norge AS"
    },
    images: {
      primary: {
        large: "https://i.imgur.com/zYcibjw.jpg"
      }
    }
  },
  {
    id: "774945",
    general: {
      presentable_id: "774945",
      name: "Blekk BROTHER LC1280XLM rød",
      description:
        "<p><b>Få optimale utskriftsresultater, tydelig tekst og levende grafikk med Brother LC1280XLM-blekkpatronen i magenta.</b></p><p>Denne Brother som ikke falmer, for svært holdbare utskrifter. Denne blekkpatronen i magenta har en kapasitet på opptil 1200 sider.</p><li>Farge: Magenta</li><li>Kapasitet: Opptil 1200 A4-sider </li><li>Enkel å installere og skifte ut</li><li>Flekkbestandig og falmer ikke</li><li>Gir tekst og bilder med utmerket kvalitet</li><li>Se kompatibilitetsoversikten for passende maskiner</li>"
    },
    brand: {
      name: "Brother Norge AS"
    },
    images: {
      primary: {
        large: "https://i.imgur.com/ucfnti1.jpg"
      }
    }
  },
  {
    id: "774946",
    general: {
      presentable_id: "774946",
      name: "Blekk BROTHER LC1280XLY gul",
      description:
        "<p><b>Enkel å installere og skifte ut</li><li>Flekkbestandig og falmer ikke</li><li>Gir tekst og bilder med utmerket kvalitet</li><li>Se kompatibilitetsoversikten for passende maskiner</li>"
    },
    brand: {
      name: "Brother Norge AS"
    },
    images: {
      primary: {
        large: "https://i.imgur.com/6zdrajU.jpg"
      }
    }
  }
];

const getData = () =>
  new Promise(resolve => setTimeout(() => resolve(data), 2000));

class App extends React.Component {
  state = {
    output: []
  };

  componentDidMount() {
    getData().then(output => this.setState({ output }));
  }

  render() {
    const { output } = this.state;
    return !output.length ? (
      <div>Loading...</div>
    ) : (
      output.map(({ id }) => <div key={id}>{id}</div>)
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root" />

Ghoul Ahmed · Accepted Answer · 2019-06-13 14:19:14Z

Try this:

const data  =  [
    {
    "id": "774944",
    "general": {
      "presentable_id": "774944",
      "name": "Blekk BROTHER LC1280XLC blå",
      "description": "<p><b>Få optimale utskriftsresultater, tydelig tekst og levende grafikk med Brother LC1280XLC-blekkpatronen i cyan.</b></p><li>Se kompatibilitetsoversikten for passende maskiner</li>"
    },
    "brand": {
      "name": "Brother Norge AS"
    },
    "images": {
      "primary": {
        "large": "https://i.imgur.com/zYcibjw.jpg"
      }
    }
    },
    {
    "id": "774945",
    "general": {
      "presentable_id": "774945",
      "name": "Blekk BROTHER LC1280XLM rød",
      "description": "<p><b>Få optimale utskriftsresultater, tydelig tekst og levende grafikk med Brother LC1280XLM-blekkpatronen i magenta.</b></p><p>Denne Brother som ikke falmer, for svært holdbare utskrifter. Denne blekkpatronen i magenta har en kapasitet på opptil 1200 sider.</p><li>Farge: Magenta</li><li>Kapasitet: Opptil 1200 A4-sider </li><li>Enkel å installere og skifte ut</li><li>Flekkbestandig og falmer ikke</li><li>Gir tekst og bilder med utmerket kvalitet</li><li>Se kompatibilitetsoversikten for passende maskiner</li>"
    },
    "brand": {
      "name": "Brother Norge AS"
    },
    "images": {
      "primary": {
        "large": "https://i.imgur.com/ucfnti1.jpg"
      }
    }
    },
    {
    "id": "774946",
    "general": {
      "presentable_id": "774946",
      "name": "Blekk BROTHER LC1280XLY gul",
      "description": "<p><b>Enkel å installere og skifte ut</li><li>Flekkbestandig og falmer ikke</li><li>Gir tekst og bilder med utmerket kvalitet</li><li>Se kompatibilitetsoversikten for passende maskiner</li>"
    },
    "brand": {
      "name": "Brother Norge AS"
    },
    "images": {
      "primary": {
        "large": "https://i.imgur.com/6zdrajU.jpg"
      }
    }
    },]
    
    const result = data.map(res=>res.id);
    console.log(result)

Collectives™ on Stack Overflow

Converting only some object values into array

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related