تحويل node js من خلال json.parse

Hanan Fahad2 · 3 يناير 2021

كيف يمكني تحويل بيانات node js الى بيانات جافا object من خلال json.parse عشان اقدر اطبع البيانات بصفحة html لانه يرفض التعامل معي حاولت بكل الطرق كيف استفيد من مكونات node في تطبيقي

Yomna Raouf · 3 يناير 2021

مرحبًا حنان.

إذا كنت تقصدين تحويل بيانات بصيغة json إلى كائن جافاسكريبت فيمكنك استخدام الطريقة التالية للقيام بذلك.

<!DOCTYPE html>
<html>
  <head>
    <title> json.parse </title>
  </head>
  <body>

  <h2>Create Object from JSON String</h2>

  <p id="demo"></p>

  <script>
    var txt = '{"name":"John", "age":30, "city":"New York"}'
    
    var obj = JSON.parse(txt);
    
    document.getElementById("demo").innerHTML = obj.name + ", " + obj.age;
  </script>

  </body>
</html>

الناتج صفحة html تحتوي التالي:

Create Object from JSON String
John, 30

يمكنك أيضًا ماركة الأكواد الخاصة بك معنا و سنقوم بمساعدتك.

Yomna Raouf · 3 يناير 2021

بتاريخ 10 ساعات قال hanan fahad11:

مرحبًا حنان.

بذلك تكونين قد قمتي بتحويل البيانات إلى كائن js و لكن حتى نعرض هذه البيانات على صفحة html من المفترض إنشاء http server حتى نتمكن من عرض البيانات في المتصفح كما يلي:

const http = require('http');
const os = require('os');

let data = os.cpus(); // JSON الناتج يكون كائن جافاسكريبت في هذه الحالة و ليس 



const server = http.createServer((req, res) => {
  res.setHeader('Content-Type', 'text/html');
  res.write(`
   <!DOCTYPE html>
    <html>
      <head>
        <title> json.parse </title>
      </head>
      <body>

      <h2>Create Object from JSON String</h2>

      <p id="demo"></p>

      <script>       
        document.getElementById("demo").innerHTML = \`${data[0].model}\`;
      </script>

      </body>
    </html>
  `);
  res.end();
});

server.listen(3001);

لاختبار الناتج نفتح الرابط localhost:3001 في المتصفح

بتاريخ 10 ساعات قال hanan fahad11:

جربت استخدم react مع node واستدعاء الداله Cups يرجع داله فاضيه ليش

بالطبع لن يعمل هذا، فاستخدام node مع react لا يعني أن نكتب أكواد node داخل react. فحتى يحدث ما تريدينه يجب أن تقومي ببناء API و عن طريق ال http requests طلبات http يتم إرسال البيانات إلى الواجهة أي قسم العميل.

أي أن تكون node مسئولة عن قسم المخدم , و react عن قسم العميل.

يبدو أنك مازلت في بداية الطريق لذلك أرجو منك المتابعة مع الدورة حتى تتكتسبي الأساسيات و ستتمكنيني من القيام بما تريدين، فقط تمهلي و لا تستعجلي حتى لا تتشتت أفكارك

Sam Ahw · 3 يناير 2021

يرمز JSON إلى JavaScript Object Notation. هو تنسيق خفيف الوزن لتخزين البيانات ونقلها. غالبًا ما يتم استخدام JSON عند إرسال البيانات من خادم إلى صفحة ويب.

أما لاستخدامه مع Node JS بفرض لديك البيانات التالية:

let obj = { 
    "name": "Sara",
    "age": 23,
    "gender": "Female",
    "department": "History",
    "car": "Honda"
}

,وبالتالي:

var json_obj = JSON.parse('{ "name":"Sara", "age":23, "gender":"Female", car: "Honda}');

وفي حال كنت تستعملين Express، يمكنك إرسال غرض عن الطريق التالي:

res.json({data: obj})

حيث يشير obj إلى المتحول الذي قمنا بإنشاءه في الخطوة السابقة.

وفي حال كانت البيانات ضمن ملف Json خارجي يمكنك استدعاؤها عبر تضمينها ضمن الملف كالتالي:

let jsonData = require('./student.json');

//ثم يمكنك إرسالها أو استخدامها ضمن الكود

تم التعديل في 3 يناير 2021 بواسطة Sam Ahw
إضافة

Hanan Fahad2 · 3 يناير 2021

مثال للكود

const os = require('os');

os.cpus()

رجع لي

[ 
  { 
    model: 'Intel(R) Core(TM) i7 CPU 860 @ 2.80GHz', 
    speed: 2926, 
    times: { 
      user: 252020,
      nice: 0,
      sys: 30340,
      idle: 1070356870,
      irq: 0
    } 
  }, 
  { 
    model: 'Intel(R) Core(TM) i7 CPU 860 @ 2.80GHz',
    speed: 2926,
    times: { 
      user: 306960,
      nice: 0,
      sys: 26980,
      idle: 1071569080,
      irq: 0
    } 
  }, 
  { 
    model: 'Intel(R) Core(TM) i7 CPU 860 @ 2.80GHz',
    speed: 2926,
    times: { 
      user: 248450,
      nice: 0,
      sys: 21750,
      idle: 1070919370,
      irq: 0
    }
  }, 
  {
    model: 'Intel(R) Core(TM) i7 CPU 860 @ 2.80GHz',
    speed: 2926, 
    times: { 
      user: 256880,
      nice: 0,
      sys: 19430,
      idle: 1070905480,
      irq: 20
    } 
  } 
]

كيف اقدر اطبعهم لسه ماوصلت ل express

Hanan Fahad2 · 3 يناير 2021

const os = require('os');

const { join } = require('path');

console.log(JSON.parse( os.cpus()))

تم التعديل في 3 يناير 2021 بواسطة hanan fahad11

Sam Ahw · 3 يناير 2021

النمط المعاد من استخدام مكتبة OS هو object وبالتالي يمكنك استخدامه مباشرة أو تحويله إلى النمط String أيضاً
في حال كان سؤالك عن ارسال النتيجة وعرضها للمتصفح، بالكود لا يحوي ذلك. للإضافة:

const http = require("http");
const os = require("os");

var result = os.cpus();


http.createServer(function (request, response) {
   response.writeHead(200, {'Content-Type': 'text/plain'});
   
   //  هنا يتم ارسال الخرج كغرض ويمكنك تحويله إلى نمط نصي كما ذكرنا سابقاً
   response.end(result);
}).listen(3000);

Wael Aljamal · 3 يناير 2021

بتاريخ 19 دقائق مضت قال hanan fahad11:

كيف اقدر اطبعهم لسه ماوصلت ل express

مرحبا حنان،

نلاحظ أن الخرج هو على شكل مصفوفة جيسون json array.

تبدأ و تنتهي بالأقواس المربعة [ ] التي هي محددات المصفوفة.

ومن ثم تحوي على عدة أغراض Objects كل منها غرض جيسون بنفسه Json Object

لعرض البيانات علينا اتباع تسلسل الوصول لها.

أولا نحدد مصفوفة لتخزين الناتج، فنصل إلى الجزء الداخلي, هنا لدينا غرض وللوصول لبياناته علينا استخدام اسم الخاصية

حيث كما نعلم أن بيانات json هي عبارة عن مفتاح مع بيانات key : value.

مثال:

let x = os.cpus();

console.log(x[0].model); // output => 'Intel(R) Core(TM) i7 CPU 860 @ 2.80GHz'

console.log(x[1].times.user); // output => 306960

إن ()os.cpus تعيد نمط البيانات التالي: []<Object> مصفوفة أغراض.

بالتوفيق

Hanan Fahad2 · 3 يناير 2021

جربت استخدم react مع node واستدعاء الداله Cups يرجع داله فاضيه ليش

تحويل node js من خلال json.parse

السؤال

رابط هذا التعليق

شارك على الشبكات الإجتماعية

8 أجوبة على هذا السؤال

Recommended Posts

رابط هذا التعليق

شارك على الشبكات الإجتماعية

رابط هذا التعليق

شارك على الشبكات الإجتماعية

رابط هذا التعليق

شارك على الشبكات الإجتماعية

رابط هذا التعليق

شارك على الشبكات الإجتماعية

رابط هذا التعليق

شارك على الشبكات الإجتماعية

رابط هذا التعليق

شارك على الشبكات الإجتماعية

رابط هذا التعليق

شارك على الشبكات الإجتماعية

رابط هذا التعليق

شارك على الشبكات الإجتماعية

انضم إلى النقاش

إعلانات

تابعنا على