{"id":26367,"date":"2022-08-24T18:36:41","date_gmt":"2022-08-24T18:36:41","guid":{"rendered":"https:\/\/www.stansoftcorporation.com\/?p=26367"},"modified":"2022-08-25T11:55:12","modified_gmt":"2022-08-25T11:55:12","slug":"data-object-manipulation-javascript","status":"publish","type":"post","link":"https:\/\/www.stansoftcorporation.com\/?p=26367","title":{"rendered":"Data Object Manipulation (Javascript)"},"content":{"rendered":"<style>\/*! elementor - v3.7.2 - 21-08-2022 *\/\n.elementor-heading-title{padding:0;margin:0;line-height:1}.elementor-widget-heading .elementor-heading-title[class*=elementor-size-]>a{color:inherit;font-size:inherit;line-height:inherit}.elementor-widget-heading .elementor-heading-title.elementor-size-small{font-size:15px}.elementor-widget-heading .elementor-heading-title.elementor-size-medium{font-size:19px}.elementor-widget-heading .elementor-heading-title.elementor-size-large{font-size:29px}.elementor-widget-heading .elementor-heading-title.elementor-size-xl{font-size:39px}.elementor-widget-heading .elementor-heading-title.elementor-size-xxl{font-size:59px}<\/style>\n<h2>Objects<br \/>\n<\/h2>\n<p>In Javascript, Objects are given&nbsp; different properties. The properties can also known as the pairs of the object. Example&nbsp; of an&nbsp; object is a person that&nbsp; can have properties&nbsp; age, name and height making it a pair.<\/p>\n<\/p>\n<h3>Creating the html page<br \/>\n<\/h3>\n<p>Create a section in index.html<\/p>\n<p>&lt;div id=&#8221;section&#8221;&gt;&lt;\/div&gt;<\/p>\n<p>Add CSS in index.css<\/p>\n<p>display: flex;<br \/>flex-wrap: wrap;<br \/>height: auto;<\/p>\n<h3>HTML Document selector<\/h3>\n<p>We now get our section from html to javascript to the index.js file<\/p>\n<p>const sectionselect = document.querySelector(&#8216;#section&#8217;);<\/p>\n<h3>Adding objects<\/h3>\n<p>Now we create the objectsin the index.js file<\/p>\n<p>const objects = [<br \/>{<br \/>name: &#8216;Obect 1&#8217;,<br \/>description: &#8216; Lorem ipsum dolor sit amet, consectetur adipiscing elit.&#8217;,<br \/>notes: &#8216; Aenean posuere neque a turpis ullamcorper consectetur. Nam consectetur ullamcorper ante, ut gravida urna faucibus nec.&#8217;,<br \/>},<\/p>\n<p>{<br \/>name: &#8216;Obect 2&#8217;,<br \/>description: &#8216; Lorem ipsum dolor sit amet, consectetur adipiscing elit.&#8217;,<br \/>notes: &#8216; Aenean posuere neque a turpis ullamcorper consectetur. Nam consectetur ullamcorper ante, ut gravida urna faucibus nec.&#8217;,<br \/>},<\/p>\n<p>{<br \/>name: &#8216;Obect 3&#8217;,<br \/>description: &#8216; Lorem ipsum dolor sit amet, consectetur adipiscing elit.&#8217;,<br \/>notes: &#8216; Aenean posuere neque a turpis ullamcorper consectetur. Nam consectetur ullamcorper ante, ut gravida urna faucibus nec.&#8217;,<br \/>},<\/p>\n<p>{<br \/>name: &#8216;Obect 4&#8217;,<br \/>description: &#8216; Lorem ipsum dolor sit amet, consectetur adipiscing elit.&#8217;,<br \/>notes: &#8216; Aenean posuere neque a turpis ullamcorper consectetur. Nam consectetur ullamcorper ante, ut gravida urna faucibus nec.&#8217;,<br \/>},<\/p>\n<p>];<\/p>\n<h3>Adding the objects to the html file <\/h3>\n<p>What we do next is to loop through the array to get each object on the web without overlapping the other.<\/p>\n<p>for the code below we add it to the index.js<\/p>\n<p>objects.forEach((object) =&gt; {<br \/>const webdisplay = `&lt;div&gt;<br \/>&lt;div&gt;<br \/>&lt;h4&gt;${object.name}&lt;\/h4&gt;<br \/>&lt;h6&gt;&lt;em&gt;${object.description}&lt;\/em&gt;&lt;\/h6&gt;<br \/>&lt;hr&gt;<br \/>&lt;p&gt;${object.notes}&lt;\/p&gt;<br \/>&lt;\/div&gt;<br \/>&lt;\/div&gt;`;<br \/>objects.innerHTML += webdisplay;<br \/>});<\/p>\n<p>from this we will get each object display<\/p>\n<p>Then we can add this in the index.css file<\/p>\n<p>.main {<br \/>display: flex;<br \/>flex-direction: row;<br \/>}<\/p>\n<p>.content {<br \/>display: flex;<br \/>flex-direction: column;<br \/>justify-content: flex-start;<br \/>align-items: flex-start;<br \/>width: 70%;<br \/>margin: auto;<br \/>}<\/p>\n<p>.content h4 {<br \/>font-size: 13px;<br \/>line-height: 14px;<br \/>}<\/p>\n<p>.content h6 {<br \/>font-size: 13px;<br \/>line-height: 15px;<br \/>color: #ec5242;<br \/>}<\/p>\n<p>.content hr {<br \/>width: 20%;<br \/>color: #ec5242;<br \/>margin: 0;<br \/>}<\/p>\n<p>.content p {<br \/>font-size: 12px;<br \/>line-height: 14px;<br \/>margin-top: 10px;<br \/>}<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Objects In Javascript, Objects are given&nbsp; different properties. The properties can also known as the pairs of the object. Example&nbsp; of an&nbsp; object is a person that&nbsp; can have properties&nbsp; age, name and height making it a pair. Creating the html page Create a section in index.html &lt;div id=&#8221;section&#8221;&gt;&lt;\/div&gt; Add CSS in index.css display: flex;flex-wrap: &hellip;<\/p>\n<p class=\"read-more\"> <a class=\"\" href=\"https:\/\/www.stansoftcorporation.com\/?p=26367\"> <span class=\"screen-reader-text\">Data Object Manipulation (Javascript)<\/span> Read More &raquo;<\/a><\/p>\n","protected":false},"author":2,"featured_media":26378,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"default","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","footnotes":""},"categories":[60],"tags":[],"class_list":["post-26367","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-programming"],"_links":{"self":[{"href":"https:\/\/www.stansoftcorporation.com\/index.php?rest_route=\/wp\/v2\/posts\/26367","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.stansoftcorporation.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.stansoftcorporation.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.stansoftcorporation.com\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.stansoftcorporation.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=26367"}],"version-history":[{"count":16,"href":"https:\/\/www.stansoftcorporation.com\/index.php?rest_route=\/wp\/v2\/posts\/26367\/revisions"}],"predecessor-version":[{"id":26387,"href":"https:\/\/www.stansoftcorporation.com\/index.php?rest_route=\/wp\/v2\/posts\/26367\/revisions\/26387"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.stansoftcorporation.com\/index.php?rest_route=\/wp\/v2\/media\/26378"}],"wp:attachment":[{"href":"https:\/\/www.stansoftcorporation.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=26367"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.stansoftcorporation.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=26367"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.stansoftcorporation.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=26367"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}