Monday, March 25, 2019

Replacing inline JSON with a link to a separate file and using this new daat to generate two new colums objects

CURRENT STATE


The Output currently Looks like this

This is my current code
See the Pen Infoshot_V-To3 by Paul (@payling) on CodePen.
The current code looks like this
The first section "//Inline JSON  //"
The second section {the javascript}



//Inline JSON  //
const factData = [
 {
   columnId: 1,
   columnName: "Facts",
   subjectId: 1,
   subjectName: "General Resources",
   linkName: "Overview of Chiang Mia",
   linkUrl: "https://en.wikipedia.org/wiki/Chiang_Mai",
   linkIcon: ""
 },
 {
   columnId: 1,
   columnName: "Facts",
   subjectId: 1,
   subjectName: "General Resources",
   linkName: "Digital Nomad Resources Chiang Mia",
   linkUrl: "https://chiangmaibuddy.com/welcome-to-chiang-mai/",
   linkIcon: ""
 },
 {
   columnId: 1,
   columnName: "Facts",
   subjectId: 2,
   subjectName: "The City",
   linkName: "25 Things to Do",
   linkUrl: "https://www.thecrazytourist.com/top-25-things-to-do-in-chiang-mai/",
   linkIcon: ""
 },
 {
   columnId: 1,
   columnName: "Facts",
   subjectId: 2,
   subjectName: "The City",
   linkName: "Map of Chiang Mia",
   linkUrl: "https://www.google.co.th/maps/@18.7692139,98.8428978,11.24z?hl=en&shorturl=1",
   linkIcon: ""
 },
 {
   columnId: 1,
   columnName: "Facts",
   subjectId: 3,
   subjectName: "Working In Chiaing Mia",
   linkName: "The best coworking Spaces",
   linkUrl: "https://toomanyadapters.com/best-co-working-spots-chiang-mai/",
   linkIcon: ""
 },
 {
   columnId: 1,
   columnName: "Facts",
   subjectId: 3,
   subjectName: "Working In Chiaing Mia",
   linkName: "Other coworking list",
   linkUrl: "https://www.madmonkeyhostels.com/h2o_blog/best-coworking-spaces-in-chiang-mai/",
   linkIcon: ""
 },
 {
   columnId: 1,
   columnName: "Facts",
   subjectId: 4,
   subjectName: "Coworking Space List",
   linkName: "Punspace",
   linkUrl: "http://www.punspace.com/",
   linkIcon: ""
 },
  {
   columnId: 1,
   columnName: "Facts",
   subjectId: 4,
   subjectName: "Coworking Space List",
   linkName: "Planterspace",
   linkUrl: "https://planterspace.com/",
   linkIcon: ""
 }
];

//get data from JSON //
$.getJSON(
  "https://codepen.io/timivey/pen/emQZYY.js",
  function(data) {

    // Success! Do stuff with data.
    console.log(data.length);

  }
);

//Order Data Components //
var dataToRender = [];
function orderData(){
  for(var index = 0; index < factData.length; index ++){
    factData[index].children = [];
    factData[index].children.push(factData[index]);

    for(var index2 = index + 1; index2 < factData.length; index2++)
    {
      if(factData[index].subjectId == factData[index2].subjectId)
      {
        factData[index2].isprocessed = "true";
        factData[index].children.push(factData[index2]);
      }
    }
    if(!factData[index].isprocessed)
    dataToRender.push(factData[index]);
  }
  console.log(dataToRender);
}

function displayFacts(facts) {

}

//Declare variables //
function columnName(pet){
 
  return `<div class="blue article-header">${pet.columnName}</div>`

}

function factTemplate(pet){
 
  var html = `<div class="subject-header">${pet.subjectName}</div>`;
  pet.children.forEach(element => {
    html += `<a href="${element.linkUrl}" target="_blank" class ="item">${element.linkName} </a></br>`

  });
  return html;


}
orderData();
document.getElementById("facts").innerHTML = `
<div class="blue article-header">${dataToRender[0].columnName}</div>

${dataToRender.map(factTemplate).join("")}
<div class="blue article-header">footer</div>


`;
orderData();
document.getElementById("facts2").innerHTML = `
<div class="green article-header">${dataToRender[0].columnName}</div>

${dataToRender.map(factTemplate).join("")}
<div class="blue article-header">footer</div>


`;

REQUIRED STATE

The New output should look like this

Required Changes to make this happen


  1. The inline Json in the first section of the javascript file needs to be removed from javascript file and replaced with code that will bring in the data from the external json file from here  http://www.infoshot.io/is_data/changm.json   This new Json file contains 9 new rows (17 rows in total). This is the data for the two new columns.
    1. Please for an additional $10 (making $50 all up provide commented out code to get the data from a url to a table in a mysql database

  3. The data in the new linked Json file  needs to be used to generate the next two columns "FOR" and "AGAINST" by using the current javascript code and modifying it 



JSON FILE OVERVIEW (FOR YOUR REFERENCE)
The json file that is located here https://codepen.io/payling/full/oVPRPB  for your reference the data looks like this




JSON DATA BELOW



[
  {
    "columnId": 1,
    "columnName": "Facts",
    "subjectId": 1,
    "subjectName": "General Resources",
    "linkName": "Overview of Chiang Mia",
    "linkUrl": "https://en.wikipedia.org/wiki/Chiang_Mai",
    "SourceLinkIcon": "",
    "SourceName": ""
  },
  {
    "columnId": 1,
    "columnName": "Facts",
    "subjectId": 1,
    "subjectName": "General Resources",
    "linkName": "Digital Nomad Resources Chiang Mia",
    "linkUrl": "https://chiangmaibuddy.com/welcome-to-chiang-mai/",
    "SourceLinkIcon": "",
    "SourceName": ""
  },
  {
    "columnId": 1,
    "columnName": "Facts",
    "subjectId": 2,
    "subjectName": "The City",
    "linkName": "25 Things to Do",
    "linkUrl": "https://www.thecrazytourist.com/top-25-things-to-do-in-chiang-mai/",
    "SourceLinkIcon": "",
    "SourceName": ""
  },
  {
    "columnId": 1,
    "columnName": "Facts",
    "subjectId": 2,
    "subjectName": "The City",
    "linkName": "Map of Chiang Mia",
    "linkUrl": "https://www.google.co.th/maps/@18.7692139,98.8428978,11.24z?hl=en&shorturl=1",
    "SourceLinkIcon": "",
    "SourceName": ""
  },
  {
    "columnId": 1,
    "columnName": "Facts",
    "subjectId": 3,
    "subjectName": "Working In Chiaing Mia",
    "linkName": "The best coworking Spaces",
    "linkUrl": "https://toomanyadapters.com/best-co-working-spots-chiang-mai/",
    "SourceLinkIcon": "",
    "SourceName": ""
  },
  {
    "columnId": 1,
    "columnName": "Facts",
    "subjectId": 3,
    "subjectName": "Working In Chiaing Mia",
    "linkName": "Other coworking list",
    "linkUrl": "https://www.madmonkeyhostels.com/h2o_blog/best-coworking-spaces-in-chiang-mai/",
    "SourceLinkIcon": "",
    "SourceName": ""
  },
  {
    "columnId": 1,
    "columnName": "Facts",
    "subjectId": 4,
    "subjectName": "Coworking Space List",
    "linkName": "Punspace",
    "linkUrl": "http://www.punspace.com/",
    "SourceLinkIcon": "",
    "SourceName": ""
  },
  {
    "columnId": 1,
    "columnName": "Facts",
    "subjectId": 4,
    "subjectName": "Coworking Space List",
    "linkName": "Planterspace",
    "linkUrl": "https://planterspace.com/",
    "SourceLinkIcon": "",
    "SourceName": ""
  },
  {
    "columnId": 2,
    "columnName": "For",
    "subjectId": 1,
    "subjectName": "LOW COST OF LIVING",
    "linkName": "Live under $600 pcm",
    "linkUrl": "https://alittleadrift.com/living-costs-chiang-mai-thailand/",
    "SourceLinkIcon": "",
    "SourceName": ""
  },
  {
    "columnId": 2,
    "columnName": "For",
    "subjectId": 1,
    "subjectName": "LOW COST OF LIVING",
    "linkName": "Chiang Mia Cost of living",
    "linkUrl": "https://www.youtube.com/watch?v=FHergmY4A8o",
    "SourceLinkIcon": "",
    "SourceName": ""
  },
  {
    "columnId": 2,
    "columnName": "For",
    "subjectId": 2,
    "subjectName": "NETWORKING OPPORTUNITIES",
    "linkName": "Meetups",
    "linkUrl": "https://www.meetup.com/cities/th/chiang_mai/",
    "SourceLinkIcon": "",
    "SourceName": ""
  },
  {
    "columnId": 2,
    "columnName": "For",
    "subjectId": 2,
    "subjectName": "NETWORKING OPPORTUNITIES",
    "linkName": "Expos",
    "linkUrl": "http://www.cmecc-mice.com/",
    "SourceLinkIcon": "",
    "SourceName": ""
  },
  {
    "columnId": 3,
    "columnName": "Against",
    "subjectId": 1,
    "subjectName": "Air quality",
    "linkName": "Pollution in Thailand",
    "linkUrl": "https://en.wikipedia.org/wiki/Environmental_issues_in_Thailand",
    "SourceLinkIcon": "",
    "SourceName": ""
  },
  {
    "columnId": 3,
    "columnName": "Against",
    "subjectId": 1,
    "subjectName": "Air quality",
    "linkName": "World Air Quality Index",
    "linkUrl": "https://aqicn.org/city/chiang-mai/",
    "SourceLinkIcon": "",
    "SourceName": ""
  },
  {
    "columnId": 3,
    "columnName": "Against",
    "subjectId": 1,
    "subjectName": "Air quality",
    "linkName": "#6 Worst Air quality Globally",
    "linkUrl": "http://www.nationmultimedia.com/detail/breakingnews/30341186",
    "SourceLinkIcon": "",
    "SourceName": ""
  },
  {
    "columnId": 3,
    "columnName": "Against",
    "subjectId": 2,
    "subjectName": "Time Zones",
    "linkName": "Changing Time Zones",
    "linkUrl": "https://www.nytimes.com/2001/07/28/business/international-business-thailand-s-leader-wants-to-switch-time-zon",
    "SourceLinkIcon": "",
    "SourceName": ""
  },
  {
    "columnId": 3,
    "columnName": "Against",
    "subjectId": 2,
    "subjectName": "Time Zones",
    "linkName": "International meeting planner",
    "linkUrl": "https://www.timeanddate.com/worldclock/meetingtime.html?iso=20190325&p1=28&p2=179",
    "SourceLinkIcon": "",
    "SourceName": ""
  }
]



Posted by at

No comments:

New comments are not allowed.

Subscribe to: Post Comments (Atom)